mirror of
https://gitea.gf4.pw/gf4/haveno-markets.git
synced 2024-11-21 01:33:38 -07:00
optimizations
This commit is contained in:
wireless_purple
parent
cdfbf26c98
commit
bb10145f56
@ -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"
|
||||
|
||||
@ -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[e.findIndex((e) => e.code === "XMR")].sign = "ɱ";
|
||||
e.push({
|
||||
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`)
|
||||
.json()
|
||||
.then((j) => {
|
||||
crypto.set(formatCrypto(j));
|
||||
});
|
||||
Bun.file(`${import.meta.env.VITE_DB_PATH}/traditional_currency_list.json`)
|
||||
Bun.file(`${import.meta.env.VITE_DB_PATH}active_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 };
|
||||
|
||||
@ -15,153 +15,153 @@ Object.groupBy ||= (values, keyFinder) => {
|
||||
</script>
|
||||
|
||||
<div class="col app">
|
||||
<div class="row header" style="align-content:center;">
|
||||
<span>
|
||||
<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;"/>
|
||||
<a href="https://xmrchain.net">xmrchain.net</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="col footer">
|
||||
<span>
|
||||
Links:
|
||||
<a href="https://haveno.markets">Clearnet</a> |
|
||||
<a href="http://lsj5o4i7iiogz6q4rstiv75nk7kots2f2nhuga75y7s23leskz2uh6id.onion">Tor</a> |
|
||||
<a href="http://haveno-markets.i2p">I2P</a>
|
||||
<a href="http://okoeicsihmjkqcqaiqow3arcrzm5ascwhpxq34incxg6a5z4tjza.b32.i2p">(b32)</a>
|
||||
</span>
|
||||
<span>
|
||||
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;"/>
|
||||
haveno-reto
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
Donations:
|
||||
<a style="word-break:break-all;" href="monero:84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu">
|
||||
84LnuW3YpCQirNMN6y6Px1E3DfwnqwXVRARi9eHjzeSVFJqEQmJCxkP5WpkysbcktqUNhXxQLowhJGSknNjJWZNQ7FKp5bu
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="row header" style="align-content:center;">
|
||||
<span>
|
||||
<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;"/>
|
||||
<a href="https://xmrchain.net">xmrchain.net</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="col footer">
|
||||
<span>
|
||||
Links:
|
||||
<a href="https://haveno.markets">Clearnet</a> |
|
||||
<a href="http://lsj5o4i7iiogz6q4rstiv75nk7kots2f2nhuga75y7s23leskz2uh6id.onion">Tor</a> |
|
||||
<a href="http://haveno-markets.i2p">I2P</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;"/>
|
||||
haveno-reto
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
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;
|
||||
min-height: 100dvh;
|
||||
}
|
||||
.container {
|
||||
width:80%!important;
|
||||
}
|
||||
.header {
|
||||
background-color:#5555;
|
||||
padding:1em 0;
|
||||
}
|
||||
.footer {
|
||||
background-color:#4444;
|
||||
margin-top:auto;
|
||||
text-align:center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.header > * {
|
||||
display:flex;
|
||||
width:33.3%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap:.2em;
|
||||
}
|
||||
@media only screen and (max-width: 600px){
|
||||
.header > * {
|
||||
width:initial;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
text-align:center;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.header > * {
|
||||
display:flex;
|
||||
width:33.3%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap:.2em;
|
||||
}
|
||||
@media only screen and (max-width: 600px){
|
||||
.header > * {
|
||||
width:initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -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) };
|
||||
}
|
||||
|
||||
@ -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>
|
||||
@ -125,77 +122,81 @@ const liquidity = Object.values(data.offers)
|
||||
<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 class="col card">
|
||||
<h4>Liquidity</h4>
|
||||
<span class="price">{formatPrice(data.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>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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}
|
||||
<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="trades">View more »</a></h4>
|
||||
</div>
|
||||
|
||||
@ -71,69 +71,75 @@ const BUY_SELL = isMoneroQuote(market) ? ["SELL", "BUY"] : ["BUY", "SELL"];
|
||||
<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 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_SELL[0]]?.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}
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Price</th>
|
||||
<th>Amount (XMR)</th>
|
||||
<th>Amount ({market})</th>
|
||||
</tr>
|
||||
{#each data.offers[BUY_SELL[0]]?.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}
|
||||
</tbody>
|
||||
</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[BUY_SELL[1]]?.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}
|
||||
<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 ? 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}
|
||||
</tbody>
|
||||
</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 class="col card">
|
||||
<h4>Last Trades</h4>
|
||||
<table>
|
||||
<tbody>
|
||||
<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}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user