+ {priceDisplay !== null && (
+
+
Price at submission
+
+ {priceDisplay} ISLM per token
+
+
+ )}
{/* Only show Funds Source selection if ucDAO balance is greater than 0 */}
diff --git a/libs/burn-waitlist/src/lib/components/price-chart.tsx b/libs/burn-waitlist/src/lib/components/price-chart.tsx
new file mode 100644
index 000000000..ea292b425
--- /dev/null
+++ b/libs/burn-waitlist/src/lib/components/price-chart.tsx
@@ -0,0 +1,251 @@
+'use client';
+
+import { useId, useMemo } from 'react';
+import {
+ Area,
+ AreaChart,
+ CartesianGrid,
+ ResponsiveContainer,
+ Tooltip,
+ XAxis,
+ YAxis,
+} from 'recharts';
+import type { PriceChartPoint } from '../hooks/use-waitlist-price-chart';
+import { formatEthDecimal } from '@haqq/shell-shared';
+
+export interface PriceChartProps {
+ data: PriceChartPoint[];
+ /** Chart height in pixels */
+ height?: number;
+ /** Whether price values are in atto (wei) - will format for display */
+ priceInAtto?: boolean;
+ isLoading?: boolean;
+ error?: Error | null;
+}
+
+const DEFAULT_HEIGHT = 240;
+const ONE_HOUR = 3600;
+
+/**
+ * Expands chart data by adding a point every hour from the last point up to now.
+ * So a single API point becomes a line from that time to current time (same price).
+ */
+function expandDataWithHourlyPoints(
+ data: Array<{ timestamp: number; price: number }>,
+): Array<{ timestamp: number; price: number }> {
+ if (!data.length) return [];
+ const now = Math.floor(Date.now() / 1000);
+ const last = data[data.length - 1]!;
+ if (last.timestamp >= now) return data;
+ const result: PriceChartPoint[] = [...data];
+ for (let t = last.timestamp + ONE_HOUR; t <= now; t += ONE_HOUR) {
+ result.push({ timestamp: t, price: last.price });
+ }
+ if (result[result.length - 1]!.timestamp < now) {
+ result.push({ timestamp: now, price: last.price });
+ }
+ return result;
+}
+
+function formatChartTime(ts: number): string {
+ const d = new Date(ts * 1000);
+ const now = new Date();
+ const isToday =
+ d.getDate() === now.getDate() &&
+ d.getMonth() === now.getMonth() &&
+ d.getFullYear() === now.getFullYear();
+ if (isToday) {
+ return d.toLocaleTimeString(undefined, {
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+ }
+ return d.toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ hour: '2-digit',
+ minute: '2-digit',
+ });
+}
+
+/**
+ * Price chart built with Recharts (SVG-based). Web3-style dark card.
+ * @see https://recharts.org/
+ */
+export function PriceChart({
+ data,
+ height = DEFAULT_HEIGHT,
+ priceInAtto = true,
+ isLoading = false,
+ error = null,
+}: PriceChartProps) {
+ const uid = useId();
+ const expandedData = useMemo(() => expandDataWithHourlyPoints(data), [data]);
+
+ const chartData = useMemo(
+ () =>
+ expandedData.map((d) => ({
+ ...d,
+ timeLabel: formatChartTime(d.timestamp),
+ })),
+ [expandedData],
+ );
+
+ const formatPrice = useMemo(
+ () => (p: number) =>
+ priceInAtto && p > 0 ? formatEthDecimal(BigInt(p), 2, 0) : p.toFixed(2),
+ [priceInAtto],
+ );
+
+ const currentPriceFormatted = useMemo(() => {
+ if (!chartData.length) return '0';
+ return formatPrice(chartData[chartData.length - 1]!.price);
+ }, [chartData, formatPrice]);
+
+ const isSinglePoint = chartData.length === 1;
+
+ const gradientId = `price-chart-gradient-${uid.replace(/:/g, '')}`;
+
+ if (error) {
+ return (
+
+
+ Failed to load price chart
+
+
+ );
+ }
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (!data.length) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ Price history
+
+
+ {isSinglePoint && (
+
+ Holding
+
+ )}
+
+ {currentPriceFormatted}
+
+ ISLM/HAQQ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ formatChartTime(ts)}
+ stroke="#C5C5C5"
+ tick={{ fill: '#C5C5C5', fontSize: 9 }}
+ axisLine={false}
+ tickLine={false}
+ />
+ formatPrice(p)}
+ stroke="#C5C5C5"
+ tick={{ fill: '#C5C5C5', fontSize: 10 }}
+ axisLine={false}
+ tickLine={false}
+ width={56}
+ tickMargin={12}
+ />
+ ;
+ }) => {
+ if (!active || !payload?.length) return null;
+ const point = payload[0]?.payload as {
+ timestamp: number;
+ price: number;
+ timeLabel: string;
+ };
+ if (!point) return null;
+ return (
+
+
+ {point.timeLabel}
+
+
+ {formatPrice(point.price)} ISLM
+
+
+
+
+ );
+}
diff --git a/libs/burn-waitlist/src/lib/components/requests-list.tsx b/libs/burn-waitlist/src/lib/components/requests-list.tsx
index f49e4c830..bf38257f1 100644
--- a/libs/burn-waitlist/src/lib/components/requests-list.tsx
+++ b/libs/burn-waitlist/src/lib/components/requests-list.tsx
@@ -6,6 +6,7 @@ import { Button } from '@haqq/shell-ui-kit';
import { FundsSource } from '../constants/waitlist-config';
import type { Application } from '../hooks/use-waitlist-applications';
import type { WaitlistBalancesResponse } from '../hooks/use-waitlist-balances';
+import { formatEthDecimal } from '@haqq/shell-shared';
export interface RequestsListProps {
applications: Array<
@@ -100,6 +101,24 @@ export function RequestsList({
{amount} ISLM
+ {app.price !== undefined && app.price !== '' && (
+