-
+
+
diff --git a/website/manifest.webmanifest b/website/manifest.webmanifest
index e71abaff1..0b6e69d90 100644
--- a/website/manifest.webmanifest
+++ b/website/manifest.webmanifest
@@ -2,7 +2,11 @@
"name": "kibō",
"short_name": "kibō",
"description": "A better, FOSS, Bitcoin-only, self-hostable Glassnode",
- "categories": ["bitcoin", "on-chain", "data"],
+ "categories": [
+ "bitcoin",
+ "on-chain",
+ "data"
+ ],
"start_url": "/",
"scope": "/",
"display": "standalone",
@@ -12,28 +16,28 @@
"lang": "en",
"icons": [
{
- "src": "/assets/pwa/2024-09-17_09-06-03/manifest-icon-192.maskable.png",
+ "src": "/assets/pwa/2024-11-20_09-41-25/manifest-icon-192.maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/pwa/2024-09-17_09-06-03/manifest-icon-192.maskable.png",
+ "src": "/assets/pwa/2024-11-20_09-41-25/manifest-icon-192.maskable.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
- "src": "/assets/pwa/2024-09-17_09-06-03/manifest-icon-512.maskable.png",
+ "src": "/assets/pwa/2024-11-20_09-41-25/manifest-icon-512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
- "src": "/assets/pwa/2024-09-17_09-06-03/manifest-icon-512.maskable.png",
+ "src": "/assets/pwa/2024-11-20_09-41-25/manifest-icon-512.maskable.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
-}
+}
\ No newline at end of file
diff --git a/website/scripts/chart.js b/website/scripts/chart.js
index 7d3e8d363..244b4d2db 100644
--- a/website/scripts/chart.js
+++ b/website/scripts/chart.js
@@ -224,14 +224,6 @@ export function init({
}
createFetchChunksOfVisibleDatasetsEffect();
- function resetChartListElement() {
- while (
- elements.chartList.lastElementChild?.classList.contains("chart-wrapper")
- ) {
- elements.chartList.lastElementChild?.remove();
- }
- }
-
/**
* @param {HTMLElement} parent
* @param {number} chartIndex
@@ -767,7 +759,7 @@ export function init({
/** @type {AnyDatasetPath} */
const datasetPath = `${s}-to-price`;
- const dataset = datasets.getOrImport(s, datasetPath);
+ const dataset = datasets.getOrCreate(s, datasetPath);
// Don't trigger reactivity by design
activeDatasets().add(dataset);
@@ -806,7 +798,7 @@ export function init({
});
function createLiveCandleUpdateEffect() {
- signals.createEffect(webSockets.krakenCandle.latest, (latest) => {
+ signals.createEffect(webSockets.kraken1dCandle.latest, (latest) => {
if (!latest) return;
const index = utils.chunkIdToIndex(s, latest.year);
@@ -825,95 +817,6 @@ export function init({
return priceSeries;
}
- function resetLegendElement() {
- elements.legend.innerHTML = "";
- }
-
- function initTimeScaleElement() {
- const GENESIS_DAY = "2009-01-03";
-
- /**
- * @param {HTMLButtonElement} button
- * @param {ChartOption} option
- */
- function setTimeScale(button, option) {
- const chart = charts.at(-1);
- if (!chart) return;
- const timeScale = chart.timeScale();
-
- const year = button.dataset.year;
- let days = button.dataset.days;
- let toHeight = button.dataset.to;
-
- switch (option.scale) {
- case "date": {
- let from = new Date();
- let to = new Date();
- to.setUTCHours(0, 0, 0, 0);
-
- if (!days && typeof button.dataset.yearToDate === "string") {
- days = String(
- Math.ceil(
- (to.getTime() -
- new Date(`${to.getUTCFullYear()}-01-01`).getTime()) /
- consts.ONE_DAY_IN_MS,
- ),
- );
- }
-
- if (year) {
- from = new Date(`${year}-01-01`);
- to = new Date(`${year}-12-31`);
- } else if (days) {
- from.setDate(from.getUTCDate() - Number(days));
- } else {
- from = new Date(GENESIS_DAY);
- }
-
- timeScale.setVisibleRange({
- from: /** @type {Time} */ (from.getTime() / 1000),
- to: /** @type {Time} */ (to.getTime() / 1000),
- });
- break;
- }
- case "height": {
- timeScale.setVisibleRange({
- from: /** @type {Time} */ (0),
- to: /** @type {Time} */ (Number(toHeight?.slice(0, -1)) * 1_000),
- });
- break;
- }
- }
- }
-
- /**
- * @param {HTMLElement} timeScaleButtons
- */
- function initGoToButtons(timeScaleButtons) {
- Array.from(timeScaleButtons.children).forEach((button) => {
- if (button.tagName !== "BUTTON") throw "Expect a button";
- button.addEventListener("click", () => {
- const option = options.selected();
- if (option.kind === "chart") {
- setTimeScale(/** @type {HTMLButtonElement} */ (button), option);
- }
- });
- });
- }
- // initGoToButtons(elements.timeScaleDateButtons);
- // initGoToButtons(elements.timeScaleHeightButtons);
-
- // function createScaleButtonsToggleEffect() {
- // const isDate = signals.createMemo(() => scale() === "date");
- // signals.createEffect(isDate, (isDate) => {
- // elements.timeScaleDateButtons.hidden = !isDate;
- // elements.timeScaleHeightButtons.hidden = isDate;
- // });
- // }
- // createScaleButtonsToggleEffect();
- }
- initTimeScaleElement();
-
/**
* @param {ChartOption} option
*/
@@ -933,15 +836,12 @@ export function init({
(list) => (list ? [list] : []),
);
- resetLegendElement();
- resetChartListElement();
-
/** @type {Series[]} */
const allSeries = [];
charts = chartsBlueprints.map((seriesBlueprints, chartIndex) => {
const { chartDiv, unitName, chartMode } = createChartDiv(
- elements.chartList,
+ elements.chartsChartList,
chartIndex,
);
@@ -1148,7 +1048,7 @@ export function init({
}
[...seriesBlueprints].reverse().forEach((seriesBlueprint, index) => {
- const dataset = datasets.getOrImport(
+ const dataset = datasets.getOrCreate(
scale,
seriesBlueprint.datasetPath,
);
@@ -1266,11 +1166,31 @@ export function init({
});
}
+ function resetLegendElement() {
+ elements.legend.innerHTML = "";
+ }
+
+ function resetChartListElement() {
+ while (
+ elements.chartsChartList.lastElementChild?.classList.contains(
+ "chart-wrapper",
+ )
+ ) {
+ elements.chartsChartList.lastElementChild?.remove();
+ }
+ }
+
+ function reset() {
+ charts.forEach((chart) => chart.remove());
+ charts = [];
+ resetLegendElement();
+ resetChartListElement();
+ }
+
function createApplyChartOptionEffect() {
signals.createEffect(selected, (option) => {
- signals.createRoot(() => {
- applyChartOption(option);
- });
+ reset();
+ applyChartOption(option);
});
}
createApplyChartOptionEffect();
diff --git a/website/scripts/live-price.js b/website/scripts/live-price.js
new file mode 100644
index 000000000..b45fe93d7
--- /dev/null
+++ b/website/scripts/live-price.js
@@ -0,0 +1,41 @@
+/**
+ * @import {Options} from './options';
+ */
+
+/**
+ * @param {Object} args
+ * @param {Colors} args.colors
+ * @param {Consts} args.consts
+ * @param {LightweightCharts} args.lightweightCharts
+ * @param {Signals} args.signals
+ * @param {Utilities} args.utils
+ * @param {Options} args.options
+ * @param {Datasets} args.datasets
+ * @param {WebSockets} args.webSockets
+ * @param {Elements} args.elements
+ * @param {Ids} args.ids
+ * @param {Accessor} args.dark
+ */
+export function init({
+ colors,
+ consts,
+ dark,
+ datasets,
+ elements,
+ ids,
+ lightweightCharts,
+ options,
+ signals,
+ utils,
+ webSockets,
+}) {
+ const livePriceElement = elements.livePrice;
+
+ const price = window.document.createElement("h1");
+ livePriceElement.append(price);
+
+ signals.createEffect(webSockets.kraken1dCandle.latest, (candle) => {
+ if (!candle) return;
+ price.innerHTML = utils.formatters.dollars.format(candle.close);
+ });
+}
diff --git a/website/scripts/main.js b/website/scripts/main.js
index 8baa0abd3..902eb0e32 100644
--- a/website/scripts/main.js
+++ b/website/scripts/main.js
@@ -4,7 +4,7 @@
* @import { Option, ResourceDataset, TimeScale, TimeRange, Unit, Marker, Weighted, DatasetPath, OHLC, FetchedJSON, DatasetValue, FetchedResult, AnyDatasetPath, SeriesBlueprint, BaselineSpecificSeriesBlueprint, CandlestickSpecificSeriesBlueprint, LineSpecificSeriesBlueprint, SpecificSeriesBlueprintWithChart, Signal, Color, DatasetCandlestickData, PartialChartOption, ChartOption, AnyPartialOption, ProcessedOptionAddons, OptionsTree, AnyPath, SimulationOption } from "./types/self"
* @import {createChart as CreateClassicChart, createChartEx as CreateCustomChart, LineStyleOptions} from "../packages/lightweight-charts/v4.2.0/types";
* @import * as _ from "../packages/ufuzzy/v1.0.14/types"
- * @import { DeepPartial, ChartOptions, IChartApi, IHorzScaleBehavior, WhitespaceData, SingleValueData, ISeriesApi, Time, LogicalRange, SeriesMarker, CandlestickData, SeriesType, BaselineStyleOptions, SeriesOptionsCommon } from "../packages/lightweight-charts/v4.2.0/types"
+ * @import { DeepPartial, ChartOptions, IChartApi, IHorzScaleBehavior, WhitespaceData, SingleValueData, ISeriesApi, Time, LineData, LogicalRange, SeriesMarker, CandlestickData, SeriesType, BaselineStyleOptions, SeriesOptionsCommon } from "../packages/lightweight-charts/v4.2.0/types"
* @import { DatePath, HeightPath, LastPath } from "./types/paths";
* @import { SignalOptions } from "../packages/solid-signals/2024-11-02/types/core/core"
* @import { getOwner as GetOwner, onCleanup as OnCleanup, Owner } from "../packages/solid-signals/2024-11-02/types/core/owner"
@@ -19,7 +19,22 @@ function initPackages() {
createSolidSignal: /** @type {CreateSignal} */ (
_signals.createSignal
),
- createEffect: /** @type {CreateEffect} */ (_signals.createEffect),
+ createSolidEffect: /** @type {CreateEffect} */ (
+ _signals.createEffect
+ ),
+ createEffect: /** @type {CreateEffect} */ (compute, effect) => {
+ let dispose = /** @type {VoidFunction | null} */ (null);
+ // @ts-ignore
+ _signals.createEffect(compute, (v) => {
+ dispose?.();
+ signals.createRoot((_dispose) => {
+ dispose = _dispose;
+ effect(v);
+ });
+ signals.onCleanup(() => dispose?.());
+ });
+ signals.onCleanup(() => dispose?.());
+ },
createMemo: /** @type {CreateMemo} */ (_signals.createMemo),
createRoot: /** @type {CreateRoot} */ (_signals.createRoot),
getOwner: /** @type {GetOwner} */ (_signals.getOwner),
@@ -220,8 +235,15 @@ function initPackages() {
* @param {HTMLElement} args.element
* @param {Signals} args.signals
* @param {Colors} args.colors
+ * @param {DeepPartial} [args.options]
*/
- function createChart({ scale, element, signals, colors }) {
+ function createChart({
+ scale,
+ element,
+ signals,
+ colors,
+ options: _options = {},
+ }) {
/** @satisfies {DeepPartial} */
const options = {
autoSize: true,
@@ -257,6 +279,7 @@ function initPackages() {
}
: {}),
},
+ ..._options,
};
/** @type {IChartApi} */
@@ -597,7 +620,6 @@ function initPackages() {
let packagePromise = null;
return function () {
- let p = null;
if (!packagePromise) {
// @ts-ignore
packagePromise = imports[key]();
@@ -640,6 +662,20 @@ const utils = {
yield() {
return this.sleep(0);
},
+ array: {
+ /**
+ * @param {number} start
+ * @param {number} end
+ */
+ range(start, end) {
+ const range = [];
+ while (start <= end) {
+ range.push(start);
+ start += 1;
+ }
+ return range;
+ },
+ },
dom: {
/**
* @param {string} id
@@ -743,13 +779,16 @@ const utils = {
/**
* @param {Object} arg
* @param {string} arg.text
+ * @param {string} arg.title
* @param {VoidFunction} arg.onClick
*/
- createButtonElement({ text, onClick }) {
+ createButtonElement({ text, onClick, title }) {
const button = window.document.createElement("button");
button.innerHTML = text;
+ button.title = title;
+
button.addEventListener("click", onClick);
return button;
@@ -773,6 +812,8 @@ const utils = {
}) {
const label = window.document.createElement("label");
+ inputId = inputId.toLowerCase();
+
const input = window.document.createElement("input");
input.type = "radio";
input.name = inputName;
@@ -898,6 +939,130 @@ const utils = {
return field;
},
+ createUlElement() {
+ return window.document.createElement("ul");
+ },
+ createLiElement() {
+ return window.document.createElement("li");
+ },
+ /**
+ * @param {Object} args
+ * @param {string} args.id
+ * @param {string} args.title
+ * @param {Signal} args.signal
+ * @param {number} args.min
+ * @param {number} args.max
+ * @param {number} args.step
+ * @param {{createEffect: typeof CreateEffect}} args.signals
+ */
+ createInputNumberElement({ id, title, signal, min, max, step, signals }) {
+ const input = window.document.createElement("input");
+ input.id = id;
+ input.title = title;
+ input.type = "number";
+ input.min = String(min);
+ input.max = String(max);
+ input.step = String(step);
+
+ let stateValue = /** @type {string | null} */ (null);
+
+ signals.createEffect(
+ () => {
+ const value = signal();
+ return value ? String(value) : "";
+ },
+ (value) => {
+ if (stateValue !== value) {
+ input.value = value;
+ stateValue = value;
+ }
+ },
+ );
+
+ input.addEventListener("input", () => {
+ const valueSer = input.value;
+ const value = Number(valueSer);
+ if (value >= min && value <= max) {
+ stateValue = valueSer;
+ signal.set(value);
+ }
+ });
+
+ return input;
+ },
+ /**
+ * @param {Object} args
+ * @param {string} args.id
+ * @param {string} args.title
+ * @param {Signal} args.signal
+ * @param {{createEffect: typeof CreateEffect}} args.signals
+ */
+ createInputDate({ id, title, signal, signals }) {
+ const input = window.document.createElement("input");
+ input.id = id;
+ input.title = title;
+ input.type = "date";
+ const min = "2011-01-01";
+ const minDate = new Date(min);
+ const maxDate = new Date();
+ const max = utils.date.toString(maxDate);
+ input.min = min;
+ input.max = max;
+
+ let stateValue = /** @type {string | null} */ (null);
+
+ signals.createEffect(
+ () => {
+ const date = signal();
+ return date ? utils.date.toString(date) : "";
+ },
+ (value) => {
+ if (stateValue !== value) {
+ input.value = value;
+ stateValue = value;
+ }
+ },
+ );
+
+ input.addEventListener("change", () => {
+ const value = input.value;
+ const date = new Date(value);
+ if (date >= minDate && date <= maxDate) {
+ stateValue = value;
+ signal.set(value ? date : null);
+ }
+ });
+
+ return input;
+ },
+ /**
+ * @param {Object} param0
+ * @param {string} param0.title
+ * @param {string} param0.description
+ */
+ createHeader({ title, description }) {
+ const headerElement = window.document.createElement("header");
+
+ const div = window.document.createElement("div");
+ headerElement.append(div);
+
+ const h1 = window.document.createElement("h1");
+ div.append(h1);
+
+ const titleElement = window.document.createElement("span");
+ titleElement.append(title);
+ h1.append(titleElement);
+
+ const descriptionElement = window.document.createElement("small");
+ descriptionElement.append(description);
+ h1.append(descriptionElement);
+
+ return {
+ headerElement,
+ titleElement,
+ descriptionElement,
+ };
+ },
},
url: {
chartParamsWhitelist: ["from", "to"],
@@ -1124,6 +1289,20 @@ const utils = {
return Number(v);
},
},
+ date: {
+ /**
+ * @param {Date} v
+ */
+ serialize(v) {
+ return utils.date.toString(v);
+ },
+ /**
+ * @param {string} v
+ */
+ deserialize(v) {
+ return new Date(v);
+ },
+ },
},
formatters: {
dollars: new Intl.NumberFormat("en-US", {
@@ -1168,6 +1347,25 @@ const utils = {
: // @ts-ignore
new Date(time.year, time.month, time.day);
},
+ /**
+ * @param {Date} start
+ */
+ getRangeUpToToday(start) {
+ return this.getRange(start, new Date());
+ },
+ /**
+ * @param {Date} start
+ * @param {Date} end
+ */
+ getRange(start, end) {
+ const dates = /** @type {Date[]} */ ([]);
+ let currentDate = new Date(start);
+ while (currentDate <= end) {
+ dates.push(new Date(currentDate));
+ currentDate.setUTCDate(currentDate.getUTCDate() + 1);
+ }
+ return dates;
+ },
},
/**
*
@@ -1328,14 +1526,14 @@ const elements = {
selectedTitle: utils.dom.getElementById("selected-title"),
selectedDescription: utils.dom.getElementById("selected-description"),
selectors: utils.dom.getElementById("frame-selectors"),
- chartList: utils.dom.getElementById("chart-list"),
+ chartsChartList: utils.dom.getElementById("charts-chart-list"),
legend: utils.dom.getElementById("legend"),
style: getComputedStyle(window.document.documentElement),
- // timeScaleDateButtons: utils.dom.getElementById("timescale-date-buttons"),
- // timeScaleHeightButtons: utils.dom.getElementById("timescale-height-buttons"),
selectedHeader: utils.dom.getElementById("selected-header"),
charts: utils.dom.getElementById("charts"),
simulation: utils.dom.getElementById("simulation"),
+ livePrice: utils.dom.getElementById("live-price"),
+ moscowTime: utils.dom.getElementById("moscow-time"),
};
/** @typedef {typeof elements} Elements */
@@ -1951,6 +2149,21 @@ function createDatasets(signals) {
scale,
url: baseURL,
fetch: _fetch,
+ fetchRange(start, end) {
+ const promises = /** @type {Promise[]} */ ([]);
+ switch (scale) {
+ case "date": {
+ utils.array.range(start, end).forEach((year) => {
+ promises.push(this.fetch(year));
+ });
+ break;
+ }
+ default: {
+ throw "Unsupported";
+ }
+ }
+ return Promise.all(promises);
+ },
fetchedJSONs,
// drop() {
// dispose();
@@ -1985,7 +2198,7 @@ function createDatasets(signals) {
* @param {DatasetPath} path
* @returns {ResourceDataset}
*/
- function getOrImport(scale, path) {
+ function getOrCreate(scale, path) {
if (scale === "date") {
const found = date.get(/** @type {DatePath} */ (path));
if (found) return /** @type {ResourceDataset} */ (found);
@@ -2018,7 +2231,7 @@ function createDatasets(signals) {
}
return {
- getOrImport,
+ getOrCreate,
};
}
/** @typedef {ReturnType} Datasets */
@@ -2088,18 +2301,18 @@ function initWebSockets(signals) {
/**
* @param {(candle: DatasetCandlestickData) => void} callback
- * @returns
+ * @param {number} interval
*/
- function krakenCandleWebSocketCreator(callback) {
- const ws = new WebSocket("wss://ws.kraken.com");
+ function krakenCandleWebSocketCreator(callback, interval) {
+ const ws = new WebSocket("wss://ws.kraken.com/v2");
ws.addEventListener("open", () => {
ws.send(
JSON.stringify({
- event: "subscribe",
- pair: ["XBT/USD"],
- subscription: {
- name: "ohlc",
+ method: "subscribe",
+ params: {
+ channel: "ohlc",
+ symbol: ["BTC/USD"],
interval: 1440,
},
}),
@@ -2109,11 +2322,11 @@ function initWebSockets(signals) {
ws.addEventListener("message", (message) => {
const result = JSON.parse(message.data);
- if (!Array.isArray(result)) return;
+ if (result.channel !== "ohlc") return;
- const [timestamp, _, open, high, low, close, __, volume] = result[1];
+ const { timestamp, open, high, low, close } = result.data.at(-1);
- const date = new Date(Number(timestamp) * 1000);
+ const date = new Date(timestamp);
const dateStr = utils.date.toString(date);
@@ -2134,12 +2347,18 @@ function initWebSockets(signals) {
return ws;
}
- const krakenCandle = createWebsocket(krakenCandleWebSocketCreator);
+ const kraken1dCandle = createWebsocket((callback) =>
+ krakenCandleWebSocketCreator(callback, 1440),
+ );
+ const kraken5mnCandle = createWebsocket((callback) =>
+ krakenCandleWebSocketCreator(callback, 5),
+ );
- krakenCandle.open();
+ kraken1dCandle.open();
+ kraken5mnCandle.open();
function createDocumentTitleEffect() {
- signals.createEffect(krakenCandle.latest, (latest) => {
+ signals.createEffect(kraken5mnCandle.latest, (latest) => {
if (latest) {
const close = latest.close;
console.log("close:", close);
@@ -2153,7 +2372,8 @@ function initWebSockets(signals) {
createDocumentTitleEffect();
return {
- krakenCandle,
+ kraken1dCandle,
+ // kraken5mnCandle,
};
}
/** @typedef {ReturnType} WebSockets */
@@ -2252,6 +2472,8 @@ packages.signals().then((signals) =>
);
let firstChartOption = true;
let firstSimulationOption = true;
+ let firstLivePriceOption = true;
+ let firstMoscowTimeOption = true;
signals.createEffect(options.selected, (option) => {
if (previousElement) {
@@ -2262,7 +2484,13 @@ packages.signals().then((signals) =>
utils.url.replaceHistory({ pathname: option.id });
}
- const hideTop = option.kind === "home" || option.kind === "pdf";
+ const hideTop =
+ option.kind === "home" ||
+ option.kind === "pdf" ||
+ option.kind === "live-price" ||
+ option.kind === "converter" ||
+ option.kind === "moscow-time";
+
elements.selectedHeader.hidden = hideTop;
elements.selectedTitle.innerHTML = option.title;
@@ -2277,6 +2505,8 @@ packages.signals().then((signals) =>
// break;
// }
case "chart": {
+ console.log("chart", option);
+
element = elements.charts;
lastChartOption.set(option);
@@ -2333,7 +2563,7 @@ packages.signals().then((signals) =>
ids,
lightweightCharts,
options,
- selected: /** @type {any} */ (lastChartOption),
+ selected: option,
signals,
utils,
webSockets,
@@ -2347,7 +2577,77 @@ packages.signals().then((signals) =>
break;
}
- default: {
+ case "live-price": {
+ console.log("live-price");
+
+ element = elements.livePrice;
+
+ if (firstLivePriceOption) {
+ const lightweightCharts = packages.lightweightCharts();
+ const script = import("./live-price.js");
+
+ utils.dom.importStyleAndThen("/styles/live-price.css", () =>
+ script.then(({ init }) =>
+ lightweightCharts.then((lightweightCharts) =>
+ signals.runWithOwner(owner, () =>
+ init({
+ colors,
+ consts,
+ dark,
+ datasets,
+ elements,
+ ids,
+ lightweightCharts,
+ options,
+ signals,
+ utils,
+ webSockets,
+ }),
+ ),
+ ),
+ ),
+ );
+ }
+ firstLivePriceOption = false;
+
+ break;
+ }
+ case "moscow-time": {
+ console.log("moscow-time");
+
+ element = elements.moscowTime;
+
+ if (firstLivePriceOption) {
+ const lightweightCharts = packages.lightweightCharts();
+ const script = import("./moscow-time.js");
+
+ utils.dom.importStyleAndThen("/styles/moscow-time.css", () =>
+ script.then(({ init }) =>
+ signals.runWithOwner(owner, () =>
+ init({
+ colors,
+ consts,
+ dark,
+ datasets,
+ elements,
+ ids,
+ options,
+ signals,
+ utils,
+ webSockets,
+ }),
+ ),
+ ),
+ );
+ }
+ firstLivePriceOption = false;
+
+ break;
+ }
+ case "converter":
+ case "home":
+ case "pdf":
+ case "url": {
return;
}
}
diff --git a/website/scripts/moscow-time.js b/website/scripts/moscow-time.js
new file mode 100644
index 000000000..0d40137ba
--- /dev/null
+++ b/website/scripts/moscow-time.js
@@ -0,0 +1,45 @@
+/**
+ * @import {Options} from './options';
+ */
+
+/**
+ * @param {Object} args
+ * @param {Colors} args.colors
+ * @param {Consts} args.consts
+ * @param {Signals} args.signals
+ * @param {Utilities} args.utils
+ * @param {Options} args.options
+ * @param {Datasets} args.datasets
+ * @param {WebSockets} args.webSockets
+ * @param {Elements} args.elements
+ * @param {Ids} args.ids
+ * @param {Accessor} args.dark
+ */
+export function init({
+ colors,
+ consts,
+ dark,
+ datasets,
+ elements,
+ ids,
+ options,
+ signals,
+ utils,
+ webSockets,
+}) {
+ const moscowTimeElement = elements.moscowTime;
+
+ const satsPerDollar = signals.createMemo(
+ () =>
+ 100_000_000 /
+ // webSockets.kraken5mnCandle.latest()?.close ||
+ (webSockets.kraken1dCandle.latest()?.close || 0),
+ );
+
+ const p = window.document.createElement("h1");
+ moscowTimeElement.append(p);
+
+ signals.createEffect(satsPerDollar, (satsPerDollar) => {
+ p.innerHTML = utils.formatters.dollars.format(satsPerDollar);
+ });
+}
diff --git a/website/scripts/options.js b/website/scripts/options.js
index 3e5e78ae3..ed603aaf9 100644
--- a/website/scripts/options.js
+++ b/website/scripts/options.js
@@ -1853,436 +1853,528 @@ function createPartialOptions(colors) {
{
name: "Coinbases",
tree: [
- ...(scale === "date"
- ? /** @satisfies {PartialOptionsTree} */ ([
- {
- scale,
- name: "Daily Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Daily Sum Of Coinbases In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-coinbase-1d-sum`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Daily Sum Of Coinbases In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-coinbase-in-dollars-1d-sum`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Yearly Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Yearly Sum Of Coinbases In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-coinbase-1y-sum`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Yearly Sum Of Coinbases In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-coinbase-in-dollars-1y-sum`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Cumulative",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Cumulative Coinbases In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Coinbases",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-cumulative-coinbase`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Cumulative Coinbases In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Coinbases",
- color: colors.dollars,
- datasetPath: `${scale}-to-cumulative-coinbase-in-dollars`,
- },
- ],
- },
- ],
- },
- {
- name: "Last Block",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Last Coinbase In Bitcoin",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Last",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-last-coinbase`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Last Coinbase In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Last",
- color: colors.dollars,
- datasetPath: `${scale}-to-last-coinbase-in-dollars`,
- },
- ],
- },
- ],
- },
- ])
- : []),
+ .../** @satisfies {PartialOptionsTree} */ (
+ scale === "date"
+ ? [
+ {
+ scale,
+ name: "Daily Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Daily Sum Of Coinbases In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-coinbase-1d-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Daily Sum Of Coinbases In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-coinbase-in-dollars-1d-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Yearly Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Yearly Sum Of Coinbases In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-coinbase-1y-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Yearly Sum Of Coinbases In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-coinbase-in-dollars-1y-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Cumulative",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Cumulative Coinbases In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Coinbases",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-cumulative-coinbase`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Cumulative Coinbases In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Coinbases",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-cumulative-coinbase-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: "Last Block",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Last Coinbase In Bitcoin",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-last-coinbase`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Last Coinbase In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-last-coinbase-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ : [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Coinbases In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Coinbase",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-coinbase`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Coinbases In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Coinbase",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-coinbase-in-dollars`,
+ },
+ ],
+ },
+ ]
+ ),
],
},
{
name: "Subsidies",
tree: [
- ...(scale === "date"
- ? /** @type {PartialOptionsTree} */ ([
- {
- scale,
- name: "Daily Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Daily Sum Of Subsidies In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-subsidy`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Daily Sum Of Subsidies In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-subsidy-in-dollars`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Yearly Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Yearly Sum Of Subsidies In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-subsidy-1y-sum`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Yearly Sum Of Subsidies In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-subsidy-in-dollars-1y-sum`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Cumulative",
-
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Cumulative Subsidies In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Subsidies",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-cumulative-subsidy`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Cumulative Subsidies In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Subsidies",
- color: colors.dollars,
- datasetPath: `${scale}-to-cumulative-subsidy-in-dollars`,
- },
- ],
- },
- ],
- },
- {
- name: "Last Block",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Last Subsidy In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Last",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-last-subsidy`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Last Subsidy In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Last",
- color: colors.dollars,
- datasetPath: `${scale}-to-last-subsidy-in-dollars`,
- },
- ],
- },
- ],
- },
- ])
- : []),
+ .../** @satisfies {PartialOptionsTree} */ (
+ scale === "date"
+ ? [
+ {
+ scale,
+ name: "Daily Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Daily Sum Of Subsidies In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-subsidy-1d-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Daily Sum Of Subsidies In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-subsidy-in-dollars-1d-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Yearly Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Yearly Sum Of Subsidies In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-subsidy-1y-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Yearly Sum Of Subsidies In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-subsidy-in-dollars-1y-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Cumulative",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Cumulative Subsidies In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Subsidies",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-cumulative-subsidy`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Cumulative Subsidies In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Subsidies",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-cumulative-subsidy-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: "Last Block",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Last Subsidy In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-last-subsidy`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Last Subsidy In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-last-subsidy-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ : [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Subsidies In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-subsidy`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Subsidies In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-subsidy-in-dollars`,
+ },
+ ],
+ },
+ ]
+ ),
],
},
{
name: "Fees",
tree: [
- ...(scale === "date"
- ? /** @type {PartialOptionsTree} */ ([
- {
- scale,
- name: "Daily Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Daily Sum Of Fees In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-fees`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Daily Sum Of Fees In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-fees-in-dollars-1d-sum`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Yearly Sum",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Yearly Sum Of Fees In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Sum",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-fees-1y-sum`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Yearly Sum Of Fees In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Sum",
- color: colors.dollars,
- datasetPath: `${scale}-to-fees-in-dollars-1y-sum`,
- },
- ],
- },
- ],
- },
- {
- scale,
- name: "Cumulative",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Cumulative Fees In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Fees",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-cumulative-fees`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Cumulative Fees In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Fees",
- color: colors.dollars,
- datasetPath: `${scale}-to-cumulative-fees-in-dollars`,
- },
- ],
- },
- ],
- },
- {
- name: "Last Block",
- tree: [
- {
- scale,
- name: "In Bitcoin",
- title: "Last Fees In Bitcoin",
- description: "",
- unit: "Bitcoin",
- bottom: [
- {
- title: "Last",
- color: colors.bitcoin,
- datasetPath: `${scale}-to-last-fees`,
- },
- ],
- },
- {
- scale,
- name: "In Dollars",
- title: "Last Fees In Dollars",
- description: "",
- unit: "US Dollars",
- bottom: [
- {
- title: "Last",
- color: colors.dollars,
- datasetPath: `${scale}-to-last-fees-in-dollars`,
- },
- ],
- },
- ],
- },
- ])
- : []),
+ .../** @satisfies {PartialOptionsTree} */ (
+ scale === "date"
+ ? [
+ {
+ scale,
+ name: "Daily Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Daily Sum Of Fees In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-fees-1d-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Daily Sum Of Fees In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-fees-in-dollars-1d-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Yearly Sum",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Yearly Sum Of Fees In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-fees-1y-sum`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Yearly Sum Of Fees In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-fees-in-dollars-1y-sum`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ scale,
+ name: "Cumulative",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Cumulative Fees In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Fees",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-cumulative-fees`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Cumulative Fees In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Fees",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-cumulative-fees-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ {
+ name: "Last Block",
+ tree: [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Last Fees In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-last-fees`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Last Fees In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Last",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-last-fees-in-dollars`,
+ },
+ ],
+ },
+ ],
+ },
+ ]
+ : [
+ {
+ scale,
+ name: "In Bitcoin",
+ title: "Fees In Bitcoin",
+ description: "",
+ unit: "Bitcoin",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.bitcoin,
+ datasetPath: `${scale}-to-fees`,
+ },
+ ],
+ },
+ {
+ scale,
+ name: "In Dollars",
+ title: "Fees In Dollars",
+ description: "",
+ unit: "US Dollars",
+ bottom: [
+ {
+ title: "Sum",
+ color: colors.dollars,
+ datasetPath: `${scale}-to-fees-in-dollars`,
+ },
+ ],
+ },
+ ]
+ ),
],
},
@@ -4835,6 +4927,23 @@ function createPartialOptions(colors) {
}
return [
+ // {
+ // name: "Live",
+ // tree: [
+ // {
+ // kind: "live-price",
+ // name: "Price",
+ // },
+ // {
+ // kind: "moscow-time",
+ // name: "Moscow Time",
+ // },
+ // {
+ // kind: "converter",
+ // name: "Converter",
+ // },
+ // ],
+ // },
{
name: "Charts",
tree: [
@@ -4965,21 +5074,25 @@ function createPartialOptions(colors) {
url: () => "bitcoin:bc1q950q4ukpxxm6wjjkv6cpq8jzpazaxrrwftctkt",
},
{
- name: "Donate lightning",
+ name: "Donate via lightning",
qrcode: true,
url: () =>
"lightning:lnurl1dp68gurn8ghj7ampd3kx2ar0veekzar0wd5xjtnrdakj7tnhv4kxctttdehhwm30d3h82unvwqhkxmmww3jkuar8d35kgetj8yuq363hv4",
},
{
- name: "Fundraiser",
+ name: "Donate via Geyser",
+ url: () => "https://geyser.fund/project/kibo/funding",
+ },
+ {
+ name: "Geyser Fundraiser",
url: () => "https://geyser.fund/project/kibo",
},
{
- name: "Goals",
+ name: "Geyser Goals",
url: () => "https://geyser.fund/project/kibo/goals",
},
{
- name: "Leaderboard",
+ name: "Geyser Leaderboard",
url: () => "https://geyser.fund/project/kibo/leaderboard",
},
],
@@ -4995,12 +5108,17 @@ function createPartialOptions(colors) {
"https://primal.net/p/npub1jagmm3x39lmwfnrtvxcs9ac7g300y3dusv9lgzhk2e4x5frpxlrqa73v44",
},
{
- name: "Source",
- url: () => "https://github.com/kibo-money/kibo",
- },
- {
- name: "API",
- url: () => "/api",
+ name: "Developers",
+ tree: [
+ {
+ name: "API",
+ url: () => "/api",
+ },
+ {
+ name: "Source",
+ url: () => "https://github.com/kibo-money/kibo",
+ },
+ ],
},
];
}
@@ -5142,6 +5260,7 @@ export function initOptions({
if (option.qrcode) {
return utils.dom.createButtonElement({
text: option.name,
+ title: option.title,
onClick: () => {
qrcode.set(option.url);
},
@@ -5189,7 +5308,8 @@ export function initOptions({
signals.createEffect(
() =>
- webSockets.krakenCandle.latest()?.close ?? lastValues()?.close,
+ webSockets.kraken1dCandle.latest()?.close ??
+ lastValues()?.close,
(close) => {
if (close) {
valueElement.innerHTML = formatValue(close, "US Dollars");
@@ -5248,11 +5368,11 @@ export function initOptions({
} else {
createCheckEffect();
}
-
- return label;
} else {
- console.log(option);
+ console.log("else", option);
}
+
+ return label;
}
}
}
@@ -5416,10 +5536,9 @@ export function initOptions({
title = anyPartial.title;
} else {
kind = anyPartial.kind;
- title = anyPartial.title;
+ title = "title" in anyPartial ? anyPartial.title : anyPartial.name;
console.log("Unprocessed", anyPartial);
- id = `${kind}-${ids.fromString(anyPartial.title)}`;
- // return;
+ id = `${kind}-${ids.fromString(title)}`;
}
/** @type {ProcessedOptionAddons} */
@@ -5465,9 +5584,7 @@ export function initOptions({
qrcode,
});
- if (element) {
- li.append(element);
- }
+ li.append(element);
});
listForSum.push(() => 1);
diff --git a/website/scripts/simulation.js b/website/scripts/simulation.js
index 6affaa992..ae2e81145 100644
--- a/website/scripts/simulation.js
+++ b/website/scripts/simulation.js
@@ -7,7 +7,7 @@
* @param {Colors} args.colors
* @param {Consts} args.consts
* @param {LightweightCharts} args.lightweightCharts
- * @param {Accessor} args.selected
+ * @param {SimulationOption} args.selected
* @param {Signals} args.signals
* @param {Utilities} args.utils
* @param {Options} args.options
@@ -38,22 +38,27 @@ export function init({
const resultsElement = window.document.createElement("div");
simulationElement.append(resultsElement);
+ const getDefaultIntervalStart = () => new Date("2021-04-15");
+ const getDefaultIntervalEnd = () => new Date();
+
const storagePrefix = "save-in-bitcoin";
const settings = {
- initial: signals.createSignal(/** @type {number | null} */ (1000), {
- save: {
- ...utils.serde.number,
- id: `${storagePrefix}-initial-amount`,
- param: "initial-amount",
- },
- }),
- later: signals.createSignal(/** @type {number | null} */ (0), {
- save: {
- ...utils.serde.number,
- id: `${storagePrefix}-later-amount`,
- param: "later-amount",
- },
- }),
+ initial: {
+ firstDay: signals.createSignal(/** @type {number | null} */ (1000), {
+ save: {
+ ...utils.serde.number,
+ id: `${storagePrefix}-initial-amount`,
+ param: "initial-amount",
+ },
+ }),
+ overTime: signals.createSignal(/** @type {number | null} */ (0), {
+ save: {
+ ...utils.serde.number,
+ id: `${storagePrefix}-later-amount`,
+ param: "later-amount",
+ },
+ }),
+ },
recurrent: {
amount: signals.createSignal(/** @type {number | null} */ (100), {
save: {
@@ -63,8 +68,45 @@ export function init({
},
}),
},
+ interval: {
+ start: signals.createSignal(
+ /** @type {Date | null} */ (getDefaultIntervalStart()),
+ {
+ save: {
+ ...utils.serde.date,
+ id: `${storagePrefix}-interval-start`,
+ param: "interval-start",
+ },
+ },
+ ),
+ end: signals.createSignal(
+ /** @type {Date | null} */ (getDefaultIntervalEnd()),
+ {
+ save: {
+ ...utils.serde.date,
+ id: `${storagePrefix}-interval-end`,
+ param: "interval-end",
+ },
+ },
+ ),
+ },
+ fees: {
+ percentage: signals.createSignal(/** @type {number | null} */ (0.25), {
+ save: {
+ ...utils.serde.number,
+ id: `${storagePrefix}-percentage`,
+ param: "percentage",
+ },
+ }),
+ },
};
+ const { headerElement } = utils.dom.createHeader({
+ title: selected.title,
+ description: selected.serializedPath,
+ });
+ parametersElement.append(headerElement);
+
const initialGroup = createParameterGroup({
title: "Initial",
description:
@@ -78,7 +120,7 @@ export function init({
input: createInputDollar({
id: "simulation-dollars-initial",
title: "Initial amount of dollars converted",
- signal: settings.initial,
+ signal: settings.initial.firstDay,
}),
}),
);
@@ -89,12 +131,17 @@ export function init({
input: createInputDollar({
id: "simulation-dollars-later",
title: "Dollars to spread over time",
- signal: settings.later,
+ signal: settings.initial.overTime,
}),
}),
);
- parametersElement.append(createHrElement());
+ const topUpGroup = createParameterGroup({
+ title: "Top Up",
+ description:
+ "The topUp amount of dollars you're willing to eventually save in Bitcoin.",
+ });
+ parametersElement.append(topUpGroup);
const recurrentGroup = createParameterGroup({
title: "Recurrent",
@@ -105,7 +152,7 @@ export function init({
recurrentGroup.append(
createInputField({
- name: "Amount",
+ name: "Maximum Amount",
input: createInputDollar({
id: "simulation-dollars-recurrent",
title: "Recurrent dollar amount",
@@ -114,34 +161,92 @@ export function init({
}),
);
- const frequencyUL = appendUl({ parent: recurrentGroup });
-
- [{ name: "Daily" }, { name: "Weekly" }, { name: "Monthly" }].forEach(
- ({ name }) => {
- const li = appendLi({ name, parent: frequencyUL });
- },
- );
-
- const frequencyChoiceUL = appendUl({ parent: recurrentGroup });
+ const frequencyUL = utils.dom.createUlElement();
+ recurrentGroup.append(frequencyUL);
[
- "Monday",
- "Tuesday",
- "Wednesday",
- "Thursday",
- "Friday",
- "Saturday",
- "Sunday",
- ].forEach((name) => {
- const li = appendLi({ name, parent: frequencyChoiceUL });
+ { name: "Daily" },
+ {
+ name: "Weekly",
+ sub: [
+ "Monday",
+ "Tuesday",
+ "Wednesday",
+ "Thursday",
+ "Friday",
+ "Saturday",
+ "Sunday",
+ ],
+ },
+ {
+ name: "Monthly",
+ sub: [
+ "The 1st",
+ "The 2nd",
+ "The 3rd",
+ "The 4th",
+ "The 5th",
+ "The 6th",
+ "The 7th",
+ "The 8th",
+ "The 9th",
+ "The 10th",
+ "The 11th",
+ "The 12th",
+ "The 13th",
+ "The 14th",
+ "The 15th",
+ "The 16th",
+ "The 17th",
+ "The 18th",
+ "The 19th",
+ "The 20th",
+ "The 21st",
+ "The 22nd",
+ "The 23rd",
+ "The 24th",
+ "The 25th",
+ "The 26th",
+ "The 27th",
+ "The 28th",
+ ],
+ },
+ ].forEach(({ name, sub }, index) => {
+ const li = utils.dom.createLiElement();
+ const { label, input } = utils.dom.createLabeledInput({
+ inputId: `frequency-${name}`,
+ inputName: "frequency",
+ inputValue: name.toLowerCase(),
+ labelTitle: name,
+ inputChecked: !index,
+ onClick: () => {},
+ });
+ label.append(name);
+ li.append(label);
+ if (sub) {
+ const parentName = name;
+ const ul = utils.dom.createUlElement();
+ li.append(ul);
+ sub.forEach((name) => {
+ const li = utils.dom.createLiElement();
+ const { label, input } = utils.dom.createLabeledInput({
+ inputId: `frequency-${parentName}-${name}`,
+ inputName: `frequency-${parentName}`,
+ inputValue: name.toLowerCase(),
+ labelTitle: name,
+ inputChecked: !index,
+ onClick: () => {},
+ });
+ label.append(name);
+ li.append(label);
+ ul.append(li);
+ });
+ }
+ frequencyUL.append(li);
});
- parametersElement.append(createHrElement());
-
- const today = signals.createSignal(utils.date.todayUTC());
- setInterval(() => {
- today.set(utils.date.todayUTC());
- }, consts.FIVE_SECONDS_IN_MS);
+ const frequencyChoiceUL = utils.dom.createUlElement();
+ recurrentGroup.append(frequencyChoiceUL);
const intervalGroup = createParameterGroup({
title: "Interval",
@@ -149,42 +254,22 @@ export function init({
});
parametersElement.append(intervalGroup);
- /**
- * @param {Object} args
- * @param {HTMLElement} args.parent
- */
- function appendDiv({ parent }) {
- const div = window.document.createElement("div");
- parent.append(div);
- return div;
- }
+ console.log("weofpwklfpwkofwepokf");
- function createInputDateField() {
- const div = appendDiv({ parent: intervalGroup });
-
- appendInputDate({
- id: "",
- title: "",
- value: "2021-04-15",
- parent: div,
- signals,
- today,
- });
-
- appendButton({
- onClick: () => {},
- text: "Reset",
- title: "",
- parent: div,
- });
-
- return div;
- }
-
- createInputDateField();
- createInputDateField();
-
- parametersElement.append(createHrElement());
+ createInputDateField({
+ signal: settings.interval.start,
+ getDefault: getDefaultIntervalStart,
+ parent: intervalGroup,
+ signals,
+ utils,
+ });
+ createInputDateField({
+ signal: settings.interval.end,
+ getDefault: getDefaultIntervalEnd,
+ parent: intervalGroup,
+ signals,
+ utils,
+ });
const feesGroup = createParameterGroup({
title: "Fees",
@@ -193,39 +278,275 @@ export function init({
});
parametersElement.append(feesGroup);
- createInputNumber({
+ const input = utils.dom.createInputNumberElement({
id: "",
title: "",
- value: 0.25,
- parent: feesGroup,
+ signal: settings.fees.percentage,
min: 0,
- max: 10,
+ max: 50,
+ step: 0.01,
+ signals,
+ });
+ feesGroup.append(input);
+
+ // parametersElement.append(utils.dom.createHrElement());
+
+ // const strategyGroup = createParameterGroup({
+ // title: "Strategy",
+ // description: "The strategy used to convert your fiat into Bitcoin",
+ // });
+ // parametersElement.append(strategyGroup);
+
+ // const ulStrategies = utils.dom.createUlElement();
+ // strategyGroup.append(ulStrategies);
+
+ // ["All in", "Weighted Local", "Weighted Cycle"].forEach((strategy) => {
+ // const li = utils.dom.createLiElement();
+ // li.append(strategy);
+ // ulStrategies.append(li);
+ // });
+
+ const parent = window.document.createElement("div");
+ parent.classList.add("chart-list");
+ resultsElement.append(parent);
+
+ signals.createEffect(settings.interval.start, (start) => {
+ console.log("start", start);
});
- parametersElement.append(createHrElement());
-
- const strategyGroup = createParameterGroup({
- title: "Strategy",
- description: "The strategy used to convert your fiat into Bitcoin",
+ signals.createEffect(settings.interval.end, (end) => {
+ console.log("end", end);
});
- parametersElement.append(strategyGroup);
- const ulStrategies = appendUl({ parent: strategyGroup });
+ const owner = signals.getOwner();
- ["All in", "Weighted Local", "Weighted Cycle"].forEach((strategy) => {
- appendLi({
- name: strategy,
- parent: ulStrategies,
+ const closes = datasets.getOrCreate("date", "date-to-close");
+ closes.fetchRange(2009, new Date().getUTCFullYear()).then(() => {
+ signals.runWithOwner(owner, () => {
+ signals.createEffect(
+ () => ({
+ initialAmount: settings.initial.firstDay() || 0,
+ recurrentAmount: settings.recurrent.amount() || 0,
+ dollarsLeft: settings.initial.overTime() || 0,
+ start: settings.interval.start(),
+ end: settings.interval.end(),
+ fees: settings.fees.percentage(),
+ }),
+ // ({ initialAmount, recurrentAmount, dollarsLeft, start, end }) => {
+ // console.log({
+ // start,
+ // end,
+ // });
+ // },
+ ({ initialAmount, recurrentAmount, dollarsLeft, start, end, fees }) => {
+ console.log({ start, end });
+ parent.innerHTML = "";
+
+ if (!start || !end || start > end) return;
+
+ const range = utils.date.getRange(start, end);
+
+ let investedAmount = 0;
+
+ /** @type {LineData
+ 