@rainlanguage/ui-components 0.0.1-alpha.244 → 0.0.1-alpha.246

package/dist/components/ButtonTimeZone.svelte

@@ -0,0 +1,24 @@
+<script>import { ClockOutline } from "flowbite-svelte-icons";
+import { useLocalTime as useLocalTimeStore } from "../storesGeneric/useLocalTime";
+export let useLocalTime = useLocalTimeStore;
+function toggle() {
+  useLocalTime.update((value) => !value);
+}
+</script>
+
+<button
+	type="button"
+	on:click={toggle}
+	data-testid="timezone-toggle"
+	aria-pressed={$useLocalTime}
+	title={$useLocalTime
+		? 'Showing local time — click for UTC'
+		: 'Showing UTC — click for local time'}
+	aria-label={$useLocalTime
+		? 'Switch timestamps to UTC'
+		: 'Switch timestamps to local time'}
+	class="inline-flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs font-semibold tabular-nums text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+>
+	<ClockOutline class="h-4 w-4 shrink-0" />
+	<span>{$useLocalTime ? 'Local' : 'UTC'}</span>
+</button>

package/dist/components/ButtonTimeZone.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        /**
+             * Toggle for displaying timestamps in the browser's local timezone vs UTC.
+             * Sits next to the dark-mode / scrub buttons in the sidebar.
+             *
+             * The store is injectable for testing; it defaults to the global preference store.
+             */ useLocalTime?: Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ButtonTimeZoneProps = typeof __propDef.props;
+export type ButtonTimeZoneEvents = typeof __propDef.events;
+export type ButtonTimeZoneSlots = typeof __propDef.slots;
+export default class ButtonTimeZone extends SvelteComponent<ButtonTimeZoneProps, ButtonTimeZoneEvents, ButtonTimeZoneSlots> {
+}
+export {};

package/dist/components/charts/OrderTradesChart.svelte

@@ -17,6 +17,7 @@ import {
   TIME_DELTA_30_DAYS,
   TIME_DELTA_1_YEAR
 } from "../../services/time";
+import { useLocalTime } from "../../storesGeneric/useLocalTime";
 import {
   Button,
   ButtonGroup,
@@ -113,7 +114,7 @@ function setupChart() {
       mode: CrosshairMode.Normal
     },
     timeScale: {
-      tickMarkFormatter: (time) => formatChartTimestamp(time, timeDelta)
+      tickMarkFormatter: (time) => formatChartTimestamp(time, timeDelta, $useLocalTime)
     }
   });
   buyVolumeSeries = chart.addHistogramSeries({
@@ -179,14 +180,18 @@ function updateChartData() {
   }
   setTimeScale();
 }
-function setTimeScale() {
+function applyTickMarkFormatter(useLocal = $useLocalTime, delta = timeDelta) {
   if (!chart) return;
   chart.timeScale().applyOptions({
-    tickMarkFormatter: (time) => formatChartTimestamp(time, timeDelta)
+    tickMarkFormatter: (time) => formatChartTimestamp(time, delta, useLocal)
   });
+}
+function setTimeScale(delta = timeDelta) {
+  if (!chart) return;
+  applyTickMarkFormatter($useLocalTime, delta);
   if (chartData && chartData.pricePoints.length > 0) {
     const now = Math.floor(Date.now() / 1e3);
-    const from = now - timeDelta;
+    const from = now - delta;
     chart.timeScale().setVisibleRange({ from, to: now });
   } else {
     chart.timeScale().fitContent();
@@ -205,6 +210,8 @@ $: if (chartElement && trades.length > 0 && selectedPair && !chart)
   setupChart();
 $: if (chart && chartData) updateChartData();
 $: if (chart && $lightweightChartsTheme) setChartOptions();
+$: if (chart) applyTickMarkFormatter($useLocalTime, timeDelta);
+$: if (chart) setTimeScale(timeDelta);
 onMount(() => {
   if (trades.length > 0 && selectedPair) setupChart();
 });

package/dist/components/detail/OrderDetail.svelte

@@ -6,6 +6,7 @@ import TanstackOrderQuote from "./TanstackOrderQuote.svelte";
 import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
+import { useLocalTime } from "../../storesGeneric/useLocalTime";
 import ButtonVaultLink from "../ButtonVaultLink.svelte";
 import OrderVaultsVolTable from "../tables/OrderVaultsVolTable.svelte";
 import { QKEY_ORDER } from "../../queries/keys";
@@ -160,7 +161,7 @@ const formatBuilderState = (builderState) => {
 			<CardProperty>
 				<svelte:fragment slot="key">Created</svelte:fragment>
 				<svelte:fragment slot="value">
-					{formatTimestampSecondsAsLocal(data.timestampAdded)}
+					{formatTimestampSecondsAsLocal(data.timestampAdded, $useLocalTime)}
 				</svelte:fragment>
 			</CardProperty>
 

package/dist/components/tables/OrderTradesListTable.svelte

@@ -3,6 +3,7 @@ import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
+import { useLocalTime } from "../../storesGeneric/useLocalTime";
 import Hash, { HashType } from "../Hash.svelte";
 import { BugOutline } from "flowbite-svelte-icons";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";
@@ -71,7 +72,7 @@ const AppTable = TanstackAppTable;
     {@const oiRatio = Math.abs(outputAmt / inputAmt)}
     {@const validRatio = Number.isFinite(ioRatio) && Number.isFinite(oiRatio)}
     <TableBodyCell tdClass="px-4 py-2">
-      {formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+      {formatTimestampSecondsAsLocal(BigInt(item.timestamp), $useLocalTime)}
     </TableBodyCell>
     <TableBodyCell tdClass="px-4 py-2">
       <div class="flex flex-col gap-1 text-sm">

package/dist/components/tables/OrdersListTable.svelte

@@ -5,6 +5,7 @@ import { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
 import { RaindexOrder } from "@rainlanguage/raindex";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
+import { useLocalTime } from "../../storesGeneric/useLocalTime";
 import ListViewRaindexFilters from "../ListViewRaindexFilters.svelte";
 import Hash, { HashType } from "../Hash.svelte";
 import VaultCard from "../VaultCard.svelte";
@@ -177,7 +178,7 @@ const AppTable = TanstackAppTable;
 					{/if}
 				</div>
 				<span class="text-xs text-gray-500 dark:text-gray-400">
-					Added: {formatTimestampSecondsAsLocal(item.timestampAdded)}
+					Added: {formatTimestampSecondsAsLocal(item.timestampAdded, $useLocalTime)}
 				</span>
 			</div>
 		</TableBodyCell>

package/dist/components/tables/VaultBalanceChangesTable.svelte

@@ -4,6 +4,7 @@ import {
   RaindexVault
 } from "@rainlanguage/raindex";
 import { formatTimestampSecondsAsLocal } from "../../services/time";
+import { useLocalTime } from "../../storesGeneric/useLocalTime";
 import Hash, { HashType } from "../Hash.svelte";
 import { QKEY_VAULT_CHANGES } from "../../queries/keys";
 import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
@@ -70,7 +71,7 @@ const AppTable = TanstackAppTable;
 					</Tooltip>
 				</div>
 				<span class="text-xs text-gray-500 dark:text-gray-400">
-					{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+					{formatTimestampSecondsAsLocal(BigInt(item.timestamp), $useLocalTime)}
 				</span>
 			</div>
 		</TableBodyCell>

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export { default as OrderOrVaultHash } from "./components/OrderOrVaultHash.svelt
 export { default as License } from "./components/License.svelte";
 export { default as ButtonDarkMode } from "./components/ButtonDarkMode.svelte";
 export { default as ButtonScrub } from "./components/ButtonScrub.svelte";
+export { default as ButtonTimeZone } from "./components/ButtonTimeZone.svelte";
 export { default as Sensitive } from "./components/Sensitive.svelte";
 export { default as OrderPage } from "./components/deployment/OrderPage.svelte";
 export { default as InputHex } from "./components/input/InputHex.svelte";
@@ -98,6 +99,7 @@ export { darkChartTheme, lightChartTheme, } from "./utils/lightweightChartsTheme
 export { lightCodeMirrorTheme, darkCodeMirrorTheme, } from "./utils/codeMirrorThemes";
 export { cachedWritableStore, cachedWritableIntOptional, cachedWritableStringOptional, cachedWritableString, } from "./storesGeneric/cachedWritableStore";
 export { scrub } from "./storesGeneric/scrub";
+export { useLocalTime } from "./storesGeneric/useLocalTime";
 export { default as logoLight } from "./assets/logo-light.svg";
 export { default as logoDark } from "./assets/logo-dark.svg";
 export { default as RaindexOrderBuilderProvider } from "./providers/RaindexOrderBuilderProvider.svelte";

package/dist/index.js

@@ -61,6 +61,7 @@ export { default as OrderOrVaultHash } from "./components/OrderOrVaultHash.svelt
 export { default as License } from "./components/License.svelte";
 export { default as ButtonDarkMode } from "./components/ButtonDarkMode.svelte";
 export { default as ButtonScrub } from "./components/ButtonScrub.svelte";
+export { default as ButtonTimeZone } from "./components/ButtonTimeZone.svelte";
 export { default as Sensitive } from "./components/Sensitive.svelte";
 export { default as OrderPage } from "./components/deployment/OrderPage.svelte";
 export { default as InputHex } from "./components/input/InputHex.svelte";
@@ -95,6 +96,7 @@ export { lightCodeMirrorTheme, darkCodeMirrorTheme, } from "./utils/codeMirrorTh
 // Stores
 export { cachedWritableStore, cachedWritableIntOptional, cachedWritableStringOptional, cachedWritableString, } from "./storesGeneric/cachedWritableStore";
 export { scrub } from "./storesGeneric/scrub";
+export { useLocalTime } from "./storesGeneric/useLocalTime";
 // Assets
 export { default as logoLight } from "./assets/logo-light.svg";
 export { default as logoDark } from "./assets/logo-dark.svg";

package/dist/services/pairTradesChartData.d.ts

@@ -37,7 +37,12 @@ export declare function getTokenLabel(token: RaindexVaultToken): string;
 export declare function pairsAreEqual(pairA: TradingPair, pairB: TradingPair): boolean;
 export declare function findPairIndex(pairs: TradingPair[], targetPair: TradingPair): number;
 export declare function flipTradingPair(pair: TradingPair): TradingPair;
-export declare function formatChartTimestamp(timestampSeconds: number, timeDeltaSeconds: number): string;
+/**
+ * Formats a chart axis tick.
+ *
+ * @param useLocalTime - when true, use the browser timezone; otherwise UTC
+ */
+export declare function formatChartTimestamp(timestampSeconds: number, timeDeltaSeconds: number, useLocalTime?: boolean): string;
 export type TransformPairTradesInput = {
     trades: RaindexTrade[];
     baseTokenAddress: string;

package/dist/services/pairTradesChartData.js

@@ -108,12 +108,23 @@ export function flipTradingPair(pair) {
         quoteToken: pair.baseToken,
     };
 }
-export function formatChartTimestamp(timestampSeconds, timeDeltaSeconds) {
+/**
+ * Formats a chart axis tick.
+ *
+ * @param useLocalTime - when true, use the browser timezone; otherwise UTC
+ */
+export function formatChartTimestamp(timestampSeconds, timeDeltaSeconds, useLocalTime = false) {
     const date = new Date(timestampSeconds * 1000);
-    const day = date.getDate();
-    const month = date.toLocaleString("en-US", { month: "short" });
-    const hours = date.getHours().toString().padStart(2, "0");
-    const minutes = date.getMinutes().toString().padStart(2, "0");
+    const day = useLocalTime ? date.getDate() : date.getUTCDate();
+    const month = useLocalTime
+        ? date.toLocaleString("en-US", { month: "short" })
+        : date.toLocaleString("en-US", { month: "short", timeZone: "UTC" });
+    const hours = (useLocalTime ? date.getHours() : date.getUTCHours())
+        .toString()
+        .padStart(2, "0");
+    const minutes = (useLocalTime ? date.getMinutes() : date.getUTCMinutes())
+        .toString()
+        .padStart(2, "0");
     if (timeDeltaSeconds <= TIME_DELTA_24_HOURS) {
         return `${month} ${day} ${hours}:${minutes}`;
     }

package/dist/services/time.d.ts

@@ -5,7 +5,13 @@ export declare const TIME_DELTA_7_DAYS: number;
 export declare const TIME_DELTA_30_DAYS: number;
 export declare const TIME_DELTA_1_YEAR: number;
 export declare function dateTimestamp(date: Date): number;
-export declare function formatTimestampSecondsAsLocal(timestampSeconds: bigint): string;
+/**
+ * Formats a unix-seconds timestamp for display.
+ *
+ * @param timestampSeconds - unix epoch seconds
+ * @param useLocalTime - when true, format in the browser timezone; otherwise UTC
+ */
+export declare function formatTimestampSecondsAsLocal(timestampSeconds: bigint, useLocalTime?: boolean): string;
 export declare function timestampSecondsToUTCTimestamp(timestampSeconds: bigint): UTCTimestamp;
 /**
  * Method to put a timeout on a promise, throws the exception if promise is not settled within the time

package/dist/services/time.js

@@ -13,10 +13,15 @@ export const TIME_DELTA_1_YEAR = TIME_DELTA_24_HOURS * 365;
 export function dateTimestamp(date) {
     return Math.floor(date.getTime() / 1000);
 }
-export function formatTimestampSecondsAsLocal(timestampSeconds) {
-    return dayjs(timestampSeconds * BigInt("1000"))
-        .utc()
-        .format("L LT");
+/**
+ * Formats a unix-seconds timestamp for display.
+ *
+ * @param timestampSeconds - unix epoch seconds
+ * @param useLocalTime - when true, format in the browser timezone; otherwise UTC
+ */
+export function formatTimestampSecondsAsLocal(timestampSeconds, useLocalTime = false) {
+    const date = dayjs(timestampSeconds * BigInt("1000"));
+    return (useLocalTime ? date : date.utc()).format("L LT");
 }
 export function timestampSecondsToUTCTimestamp(timestampSeconds) {
     return dayjs(timestampSeconds * BigInt("1000")).unix();
@@ -37,63 +42,3 @@ export async function promiseTimeout(promise, time, exception) {
         new Promise((_resolve, reject) => (timeout = setTimeout(reject, time, exception))),
     ]).finally(() => clearTimeout(timeout));
 }
-if (import.meta.vitest) {
-    const { describe, it, expect, vi } = import.meta.vitest;
-    describe("Date and timestamp utilities", () => {
-        describe("formatTimestampSecondsAsLocal", () => {
-            it("converts timestamp to local format", () => {
-                const result = formatTimestampSecondsAsLocal(BigInt("1672531200")); // Jan 1, 2023 12:00 AM
-                expect(result).toBe("01/01/2023 12:00 AM");
-            });
-        });
-        describe("timestampSecondsToUTCTimestamp", () => {
-            it("converts bigint timestamp to UTCTimestamp", () => {
-                const result = timestampSecondsToUTCTimestamp(BigInt("1672531200"));
-                expect(result).toBe(1672531200);
-            });
-        });
-    });
-    describe("promiseTimeout", () => {
-        it("resolves when promise resolves before timeout", async () => {
-            const testValue = "test";
-            const promise = Promise.resolve(testValue);
-            const result = await promiseTimeout(promise, 100, new Error("Timeout"));
-            expect(result).toBe(testValue);
-        });
-        it("rejects when promise times out", async () => {
-            const promise = new Promise((resolve) => setTimeout(resolve, 200));
-            const exception = new Error("Timeout");
-            await expect(promiseTimeout(promise, 100, exception)).rejects.toThrow(exception);
-        });
-        it("rejects when original promise rejects", async () => {
-            const error = new Error("Original rejection");
-            const promise = Promise.reject(error);
-            await expect(promiseTimeout(promise, 100, new Error("Timeout"))).rejects.toThrow(error);
-        });
-        it("clears timeout after promise resolution", async () => {
-            vi.spyOn(global, "clearTimeout");
-            const promise = Promise.resolve("test");
-            await promiseTimeout(promise, 100, new Error("Timeout"));
-            expect(clearTimeout).toHaveBeenCalled();
-        });
-        it("clears timeout after promise rejection", async () => {
-            vi.spyOn(global, "clearTimeout");
-            const promise = Promise.reject(new Error("Original rejection"));
-            try {
-                await promiseTimeout(promise, 100, new Error("Timeout"));
-            }
-            catch {
-                // Ignore the error
-            }
-            expect(clearTimeout).toHaveBeenCalled();
-        });
-    });
-    describe("dateTimestamp", () => {
-        it("should get date timestamp in seconds", () => {
-            const date = new Date(2022, 1, 16, 17, 32, 11, 168);
-            const result = dateTimestamp(date);
-            const expected = Math.floor(date.getTime() / 1000);
-            expect(result).toEqual(expected);
-        });
-    });
-}

package/dist/storesGeneric/useLocalTime.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Global preference for displaying timestamps in the browser's local timezone
+ * instead of UTC.
+ *
+ * When `false` (default), all formatted timestamps stay in UTC — matching the
+ * historical Raindex webapp behaviour. When `true`, the same values are shown
+ * in the user's local timezone.
+ *
+ * Persisted under `settings.useLocalTime` so the preference survives reloads.
+ */
+export declare const useLocalTime: import("svelte/store").Writable<boolean>;

package/dist/storesGeneric/useLocalTime.js

@@ -0,0 +1,19 @@
+import { cachedWritableStore } from "./cachedWritableStore";
+/**
+ * Global preference for displaying timestamps in the browser's local timezone
+ * instead of UTC.
+ *
+ * When `false` (default), all formatted timestamps stay in UTC — matching the
+ * historical Raindex webapp behaviour. When `true`, the same values are shown
+ * in the user's local timezone.
+ *
+ * Persisted under `settings.useLocalTime` so the preference survives reloads.
+ */
+export const useLocalTime = cachedWritableStore("settings.useLocalTime", false, (value) => JSON.stringify(value), (serialized) => {
+    try {
+        return JSON.parse(serialized) === true;
+    }
+    catch {
+        return false;
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rainlanguage/ui-components",
-  "version": "0.0.1-alpha.244",
+  "version": "0.0.1-alpha.246",
   "description": "A component library for building Svelte applications to be used with Raindex.",
   "license": "LicenseRef-DCL-1.0",
   "author": "Rain Open Source Software Ltd",
@@ -57,7 +57,7 @@
     "@fontsource/dm-sans": "5.1.0",
     "@imask/svelte": "7.6.1",
     "@observablehq/plot": "0.6.16",
-    "@rainlanguage/raindex": "0.0.1-alpha.245",
+    "@rainlanguage/raindex": "0.0.1-alpha.246",
     "@reown/appkit": "1.6.4",
     "@reown/appkit-adapter-wagmi": "1.6.4",
     "@sentry/sveltekit": "7.120.0",