@@ -455,7 +468,7 @@
Limit Price
({settlementLabel} per {assetToken.symbol})({settlementLabel} per {displayedAssetSymbol})
Order Summary
-
+
-
+
{orderSide === 'Buy' ? 'Buying' : 'Selling'}
-
- {selectedAmount
- ? parseFloat(formatUnits(selectedAmount, assetToken.decimals)).toFixed(3)
- : '0'}
- {assetToken.symbol}
-
+
+
+ {(selectedAmount
+ ? parseFloat(formatUnits(selectedAmount, assetToken.decimals))
+ : 0
+ ).toFixed(wtDecimalsForSummary)}
+ {assetToken.symbol}
+
+ {#if showShareEquivalent}
+
+ equivalent to {(
+ (selectedAmount
+ ? parseFloat(formatUnits(selectedAmount, assetToken.decimals))
+ : 0) * displayScale
+ ).toFixed(5)}
+ {displayedAssetSymbol}
+
+ {/if}
+
At price
diff --git a/src/lib/components/orders/MarketOrder.svelte b/src/lib/components/orders/MarketOrder.svelte
index 914e0900..4a77d043 100644
--- a/src/lib/components/orders/MarketOrder.svelte
+++ b/src/lib/components/orders/MarketOrder.svelte
@@ -51,6 +51,16 @@
*/
export let buyPrice: number | null = null;
export let sellPrice: number | null = null;
+ /**
+ * When `displayDenom === 'unwrapped'`, the input field, balance row, market
+ * price, and order summary are re-labeled in the share token (tX) and
+ * displayed values are scaled by `wrapRatio` (so a wt-denominated BigInt
+ * of 0.01 wtSGOV reads as 0.01003 tSGOV on a 1.0027 ratio). The order
+ * itself still goes on-chain in wt — `selectedAmount` stays wt
+ * regardless of denom. `wrapRatio` is ignored when 'wrapped'.
+ */
+ export let displayDenom: 'wrapped' | 'unwrapped' = 'wrapped';
+ export let wrapRatio: number = 1;
const ORDERBOOK_MAX_STALENESS_MS = 20_000; // 20 seconds
const PRICE_GUARD_MULTIPLIER = 1.05; // 5% price tolerance for slippage and liquidity checks
@@ -251,6 +261,25 @@
$: paymentToken = $currentNetwork?.defaultPaymentToken || $currentNetwork?.paymentTokens?.[0];
$: paymentTokenSymbol = paymentToken?.symbol ?? 'Quote';
+ // Display denom helpers — see the `displayDenom`/`wrapRatio` prop docs.
+ $: displayedAssetSymbol =
+ displayDenom === 'unwrapped' && assetToken
+ ? assetToken.symbol.replace(/^wt/, 't')
+ : assetToken?.symbol ?? '';
+ $: displayScale =
+ displayDenom === 'unwrapped' && Number.isFinite(wrapRatio) && wrapRatio > 0 ? wrapRatio : 1;
+ $: displayedSpendingTokenSymbol = orderSide === 'Buy' ? paymentTokenSymbol : displayedAssetSymbol;
+ /** USDC per displayed asset unit (USDC/wt when wrapped, USDC/t when unwrapped). */
+ $: displayedMarketPrice = displayScale > 0 ? marketPrice / displayScale : marketPrice;
+ $: displayedBestOrderbookPrice =
+ bestOrderbookPrice == null
+ ? null
+ : displayScale > 0
+ ? bestOrderbookPrice / displayScale
+ : bestOrderbookPrice;
+ $: showShareEquivalent = displayDenom === 'unwrapped' && displayScale !== 1;
+ $: wtDecimalsForSummary = showShareEquivalent ? 5 : 3;
+
// Errors
let selectedAmountError: boolean = false;
let insufficientBalanceError: boolean = false;
@@ -1066,24 +1095,29 @@
showMaxButton={false}
compact={true}
noBorder={true}
+ displayScale={inputMode === 'spend' ? 1 : displayScale}
/>
- {inputMode === 'spend' ? paymentTokenSymbol : assetToken.symbol}
+ {inputMode === 'spend' ? paymentTokenSymbol : displayedAssetSymbol}
{#if spendingTokenBalanceDecimals !== null}
{@const balanceFormatted = parseFloat(
formatUnits(spendingTokenBalance, spendingTokenBalanceDecimals)
)}
- {@const balanceRounded = Math.round(balanceFormatted * 1000) / 1000}
+ {@const balanceScale = orderSide === 'Sell' ? displayScale : 1}
+ {@const balanceRounded = Math.round(balanceFormatted * balanceScale * 1000) / 1000}
Balance: {balanceRounded.toFixed(3)}
- {spendingToken?.symbol ?? ''}
+ {orderSide === 'Sell' ? displayedSpendingTokenSymbol : spendingToken?.symbol ?? ''}
{:else}
Balance: —
{/if}
@@ -1112,20 +1146,20 @@
Market Price
- (per {assetToken.symbol})
+ (per {displayedAssetSymbol})
@@ -1196,18 +1230,37 @@
{:else}
-
-
+
+
{orderSide === 'Buy' ? 'Buying' : 'Selling'}
-
- {selectedAmount
- ? parseFloat(formatUnits(selectedAmount, assetToken.decimals)).toFixed(3)
- : '0'}
- {assetToken.symbol}
-
+
{/if}
-
+
+ {(selectedAmount
+ ? parseFloat(formatUnits(selectedAmount, assetToken.decimals))
+ : 0
+ ).toFixed(wtDecimalsForSummary)}
+ {assetToken.symbol}
+
+ {#if showShareEquivalent}
+
+ equivalent to {(
+ (selectedAmount
+ ? parseFloat(formatUnits(selectedAmount, assetToken.decimals))
+ : 0) * displayScale
+ ).toFixed(5)}
+ {displayedAssetSymbol}
+
+ {/if}
+
+
Direction
Status
- Remaining
- Filled
- Price
+
+ Remaining
+ {#if denomination === 'unwrapped'}
+ (shares)
+ {/if}
+
+
+ Filled
+ {#if denomination === 'unwrapped'}
+ (shares)
+ {/if}
+
+
+ Price
+ {#if denomination === 'unwrapped'}
+ / share
+ {:else if wrapRatio !== 1}
+ / token
+ {/if}
+
Hash
Link
@@ -351,13 +401,21 @@
—
- {amount ? Number(amount).toFixed(3) : '—'}
- {order.tokenSymbol}
+ {#if amount}
+ {@const converted = displayAmount(Number(amount))}
+ {converted != null ? converted.toFixed(3) : '—'}
+ {:else}
+ —
+ {/if}
+ {displaySymbol(order.tokenSymbol)}
- {order.price !== undefined && Number.isFinite(order.price)
- ? order.price.toFixed(3)
- : '—'}
+ {#if order.price !== undefined && Number.isFinite(order.price)}
+ {@const px = displayPrice(order.price)}
+ {px != null ? px.toFixed(3) : '—'}
+ {:else}
+ —
+ {/if}
{#if txHash}
@@ -422,10 +480,6 @@
: maxOutputBigInt > 0n
? Number(formatUnits(maxOutputBigInt, tokenDecimals)).toFixed(3)
: '—'}
- {@const currentPrice =
- order.price !== undefined && order.price !== null && Number.isFinite(order.price)
- ? order.price.toFixed(3)
- : '—'}
{@const isMyOrder = orderOwner.toLowerCase() === $walletAddress?.toLowerCase()}
{@const typeLabel =
order.type === 'dca' ? 'DCA' : order.type === 'custom' ? 'Custom' : 'Limit'}
@@ -477,18 +531,31 @@
{/if}
- {remainingAmount}
- {order.tokenSymbol}
+ {#if remainingAmount === '—' || remainingAmount === 'n/a' || remainingAmount === '0'}
+ {remainingAmount}
+ {:else}
+ {@const conv = displayAmount(Number(remainingAmount))}
+ {conv != null ? conv.toFixed(3) : remainingAmount}
+ {/if}
+ {displaySymbol(order.tokenSymbol)}
{#if order.filled !== undefined && order.filled > 0}
- {order.filled.toFixed(3)}
- {order.filledSymbol ?? order.tokenSymbol}
+ {@const conv = displayAmount(order.filled)}
+ {(conv ?? order.filled).toFixed(3)}
+ {displaySymbol(order.filledSymbol ?? order.tokenSymbol)}
+ {:else}
+ —
+ {/if}
+
+
+ {#if order.price !== undefined && order.price !== null && Number.isFinite(order.price)}
+ {@const px = displayPrice(order.price)}
+ {px != null ? px.toFixed(3) : '—'}
{:else}
—
{/if}
- {currentPrice}
{#if quote}
{@const raindexUrl = getRaindexOrderUrl(
diff --git a/src/lib/components/ui/TabNav.svelte b/src/lib/components/ui/TabNav.svelte
index 2a827d5d..32931fc2 100644
--- a/src/lib/components/ui/TabNav.svelte
+++ b/src/lib/components/ui/TabNav.svelte
@@ -1,6 +1,10 @@
+
+;
+ /** All rates, indexed by lowercased asset (t*) address. */
+ byAssetAddress: Record;
+ /** Raw list. */
+ all: ExchangeRate[];
+}
+
+// ============================================================================
+// Fixture loader
+// ============================================================================
+
+interface WrapRatioFixture {
+ rates: ExchangeRate[];
+ history: Record>;
+}
+
+const FIXTURE = fixture as unknown as WrapRatioFixture;
+
+function buildLookup(rates: ExchangeRate[]): ExchangeRateLookup {
+ const byShareAddress: Record = {};
+ const byAssetAddress: Record = {};
+ for (const rate of rates) {
+ const share = rate.share.address?.toLowerCase();
+ const asset = rate.asset.address?.toLowerCase();
+ if (share) byShareAddress[share] = rate;
+ if (asset) byAssetAddress[asset] = rate;
+ }
+ return { byShareAddress, byAssetAddress, all: rates };
+}
+
+const LOOKUP: ExchangeRateLookup = buildLookup(FIXTURE.rates);
+
+/**
+ * Returns the wrap ratio (number of underlying t* per 1 wt*) for a given
+ * token address — accepts either the share (wt*) or asset (t*) address.
+ * Returns 1 when the lookup is missing the entry (safe default — parity
+ * wrappers stay 1:1).
+ */
+export function resolveRatio(
+ lookup: ExchangeRateLookup | null | undefined,
+ address: string | null | undefined
+): number {
+ if (!lookup || !address) return 1;
+ const key = address.toLowerCase();
+ const entry = lookup.byShareAddress[key] ?? lookup.byAssetAddress[key];
+ if (!entry) return 1;
+ const parsed = Number(entry.assetsPerShare);
+ return Number.isFinite(parsed) && parsed > 0 ? parsed : 1;
+}
+
+/**
+ * TanStack-shaped query so existing consumers (`$exchangeRatesQuery.data`)
+ * keep working when the live API replaces the fixture. The queryFn is
+ * synchronous-with-Promise-wrap — there's no network call.
+ */
+export function createExchangeRatesQuery() {
+ return createQuery({
+ queryKey: ['exchangeRates'],
+ enabled: browser,
+ staleTime: Infinity,
+ queryFn: async () => LOOKUP
+ });
+}
+
+export function createExchangeRateHistoryQuery(
+ wrappedTokenAddress: string | null | undefined,
+ options?: { page?: number; pageSize?: number }
+) {
+ return createQuery({
+ queryKey: [
+ 'exchangeRateHistory',
+ wrappedTokenAddress?.toLowerCase() ?? null,
+ options?.page ?? 1,
+ options?.pageSize ?? 50
+ ],
+ enabled: browser && Boolean(wrappedTokenAddress),
+ staleTime: Infinity,
+ queryFn: async () => {
+ if (!wrappedTokenAddress) {
+ throw new Error('wrappedTokenAddress is required');
+ }
+ const entry = FIXTURE.history[wrappedTokenAddress.toLowerCase()];
+ if (!entry) {
+ return {
+ share: { address: wrappedTokenAddress, symbol: '', decimals: 18 },
+ asset: { address: '', symbol: '', decimals: 18 },
+ events: [],
+ pagination: {
+ page: 1,
+ pageSize: options?.pageSize ?? 50,
+ totalEvents: 0,
+ totalPages: 0,
+ hasMore: false
+ }
+ };
+ }
+ return {
+ ...entry,
+ pagination: {
+ page: 1,
+ pageSize: options?.pageSize ?? 50,
+ totalEvents: entry.events.length,
+ totalPages: 1,
+ hasMore: false
+ }
+ };
+ }
+ });
+}
diff --git a/src/lib/queries/tradeActivity.ts b/src/lib/queries/tradeActivity.ts
index 635d53b9..5a5b22b9 100644
--- a/src/lib/queries/tradeActivity.ts
+++ b/src/lib/queries/tradeActivity.ts
@@ -44,7 +44,10 @@ export function createTokenTradeActivityQuery(
while (page <= 50) {
const response = await apiGetTradesByToken(primaryAddress!, page, PAGE_SIZE, from, now);
- allTrades = allTrades.concat(response.trades);
+ // `?? []` because the upstream REST API occasionally omits `trades`
+ // on a paginated response; `[].concat(undefined)` returns
+ // `[undefined]`, which then poisons every downstream consumer.
+ allTrades = allTrades.concat(response.trades ?? []);
if (!response.pagination.hasMore) break;
page++;
}
@@ -107,7 +110,7 @@ export function createTakerTradesQuery(
while (page <= 10) {
const response = await apiGetTakerTrades(walletAddress!, { page, pageSize: PAGE_SIZE });
- allTrades = allTrades.concat(response.trades);
+ allTrades = allTrades.concat(response.trades ?? []);
if (!response.pagination.hasMore) break;
page++;
}
diff --git a/src/lib/stores/panelDenomStore.ts b/src/lib/stores/panelDenomStore.ts
new file mode 100644
index 00000000..92ec6f41
--- /dev/null
+++ b/src/lib/stores/panelDenomStore.ts
@@ -0,0 +1,42 @@
+// Trade panel display denomination. Lives in localStorage so the user's
+// preference survives reloads and follows them across tokens.
+//
+// 'wrapped' → show wtX symbols + native (wt-denominated) amounts everywhere.
+// 'unwrapped' → show tX symbols + t-equivalent amounts; the form quietly
+// converts at the order boundary so the on-chain trade is
+// still in wt units (the wrapper is the orderbook primitive).
+//
+// Holdings on the dashboard use a sibling store with the same shape so the
+// trade panel toggle and the dashboard toggle don't fight each other.
+import { writable, type Writable } from 'svelte/store';
+
+import type { Denomination } from '$lib/utils/wrapDenom';
+
+const PANEL_DENOM_KEY = 'st0x.panel.denom';
+const HOLDINGS_DENOM_KEY = 'st0x.holdings.denom';
+
+function readPersisted(key: string): Denomination {
+ if (typeof window === 'undefined') return 'wrapped';
+ try {
+ const raw = window.localStorage.getItem(key);
+ return raw === 'unwrapped' ? 'unwrapped' : 'wrapped';
+ } catch {
+ return 'wrapped';
+ }
+}
+
+function createDenomStore(key: string): Writable {
+ const store = writable(readPersisted(key));
+ store.subscribe((value) => {
+ if (typeof window === 'undefined') return;
+ try {
+ window.localStorage.setItem(key, value);
+ } catch {
+ // Quotas / privacy mode — silently degrade to in-memory only.
+ }
+ });
+ return store;
+}
+
+export const panelDenom = createDenomStore(PANEL_DENOM_KEY);
+export const holdingsDenom = createDenomStore(HOLDINGS_DENOM_KEY);
diff --git a/src/lib/stores/wrapExplainerStore.ts b/src/lib/stores/wrapExplainerStore.ts
new file mode 100644
index 00000000..452b98bd
--- /dev/null
+++ b/src/lib/stores/wrapExplainerStore.ts
@@ -0,0 +1,17 @@
+// Module-scoped store for the wrap-explainer modal open state. Lives outside
+// the trade [id]/+page.svelte component (which has 100+ reactive vars and
+// hits Svelte 4's 6-word dirty-bit accounting). Keeping the state in a
+// module store means the open/close flow is driven entirely by Svelte's
+// subscription machinery — no per-component invalidation race regardless of
+// how loaded the trade page's reactive graph is at the moment of the click.
+import { writable } from 'svelte/store';
+
+export const wrapExplainerOpen = writable(false);
+
+export function openWrapExplainer(): void {
+ wrapExplainerOpen.set(true);
+}
+
+export function closeWrapExplainer(): void {
+ wrapExplainerOpen.set(false);
+}
diff --git a/src/lib/utils/wrapDenom.ts b/src/lib/utils/wrapDenom.ts
new file mode 100644
index 00000000..50e1ec45
--- /dev/null
+++ b/src/lib/utils/wrapDenom.ts
@@ -0,0 +1,84 @@
+/**
+ * Wrap-ratio denomination helpers.
+ *
+ * The trade page and OrdersTable both need to re-label and re-scale numbers
+ * between the wrapped token's native unit (wt*, what the orderbook holds and
+ * what the wallet shows) and the underlying share unit (t*, what the chart
+ * axis and the brokerage display). The math is small but easy to get the
+ * direction wrong on, so it lives here behind one set of named helpers with
+ * unit tests instead of inline `* ratio` / `/ ratio` sprinkled across
+ * components.
+ *
+ * Convention:
+ * - `ratio` = assetsPerShare = the count of t* that 1 wt* unwraps into.
+ * wtSGOV today: 1.0027 — so 1 wt holds 1.0027 t (shares accrue into the
+ * wrapper as the underlying yield/dividends do).
+ * - Orderbook amounts and ioRatios are denominated in wt* — they are the
+ * primitive on-chain quantity. Per-share equivalents are derived.
+ * - When `denomination === 'wrapped'` everything is identity (no scale).
+ * - When `ratio` is missing/zero/non-finite (defensive default for parity
+ * wrappers) every helper falls through to identity too, so it's always
+ * safe to call with `1` or a stale value.
+ */
+
+export type Denomination = 'wrapped' | 'unwrapped';
+
+function safeRatio(ratio: number | null | undefined): number {
+ if (ratio == null || !Number.isFinite(ratio) || ratio <= 0) return 1;
+ return ratio;
+}
+
+/**
+ * Display symbol for a wrapped token in the requested denomination. Strips
+ * the leading `wt` prefix (wtCOIN → tCOIN) when the override isn't supplied;
+ * an explicit `unwrappedSymbolOverride` always wins.
+ */
+export function displaySymbol(
+ tokenSymbol: string,
+ denomination: Denomination,
+ unwrappedSymbolOverride?: string
+): string {
+ if (denomination === 'wrapped') return tokenSymbol;
+ if (unwrappedSymbolOverride) return unwrappedSymbolOverride;
+ return tokenSymbol.replace(/^wt/, 't');
+}
+
+/**
+ * Convert a quantity expressed in wt* to the requested denomination.
+ * Returns `null` for null/NaN inputs so callers can show "—" without
+ * branching on the input shape twice.
+ */
+export function displayAmount(
+ amount: number | null | undefined,
+ denomination: Denomination,
+ ratio: number | null | undefined
+): number | null {
+ if (amount == null || !Number.isFinite(amount)) return null;
+ if (denomination === 'wrapped') return amount;
+ return amount * safeRatio(ratio);
+}
+
+/**
+ * Convert a USD-per-wt price to the requested denomination. USD-per-share is
+ * `USD-per-wt / ratio` because 1 wt holds `ratio` shares.
+ */
+export function displayPrice(
+ price: number | null | undefined,
+ denomination: Denomination,
+ ratio: number | null | undefined
+): number | null {
+ if (price == null || !Number.isFinite(price)) return null;
+ if (denomination === 'wrapped') return price;
+ return price / safeRatio(ratio);
+}
+
+/**
+ * Single multiplier for re-scaling OHLC and depth prices (USD-per-wt → the
+ * displayed denomination). `1` for wrapped/identity, `1 / ratio` for shares.
+ * Charts iterate over many points, so it's worth computing the multiplier
+ * once at the reactive boundary and multiplying inside the loop.
+ */
+export function priceScale(denomination: Denomination, ratio: number | null | undefined): number {
+ if (denomination === 'wrapped') return 1;
+ return 1 / safeRatio(ratio);
+}
diff --git a/src/routes/(main)/dashboard/+page.svelte b/src/routes/(main)/dashboard/+page.svelte
index 4aee0fa9..e426d1a5 100644
--- a/src/routes/(main)/dashboard/+page.svelte
+++ b/src/routes/(main)/dashboard/+page.svelte
@@ -40,6 +40,8 @@
import { createTakerTradesQuery, createBatchTradesQuery } from '$lib/queries/tradeActivity';
import { createCostBasisQuery } from '$lib/queries/costBasis';
import { calculatePnL } from '$lib/utils/costBasis';
+ import { createExchangeRatesQuery, resolveRatio } from '$lib/queries/exchangeRates';
+ import { holdingsDenom } from '$lib/stores/panelDenomStore';
import { manualCostBasisStore, type ManualCostBasisEntry } from '$lib/stores/manualCostBasis';
import { derived } from 'svelte/store';
import { onDestroy } from 'svelte';
@@ -935,6 +937,16 @@
// Cost basis query for P&L calculation - one-shot (no polling, refreshes on window focus)
$: costBasisQuery = createCostBasisQuery($currentNetwork, $walletAddress);
+ // Wrap-ratio lookup so the Holdings table can flip wt↔t when the user
+ // toggles `holdingsDenom`. Backed by the hardcoded SGOV fixture today;
+ // will switch to the live /v1/tokens/exchange-rates API when it ships.
+ const exchangeRatesQuery = createExchangeRatesQuery();
+ $: holdingsRatesLookup = $exchangeRatesQuery?.data ?? null;
+ $: resolveHoldingRatio = (address: string): number =>
+ $holdingsDenom === 'unwrapped' ? resolveRatio(holdingsRatesLookup, address) : 1;
+ $: displayUnwrappedSymbol = (sym: string): string =>
+ $holdingsDenom === 'unwrapped' ? sym.replace(/^wt/, 't') : sym;
+
// Load manual cost basis entries when wallet changes
$: manualCostBasisStore.loadForWallet($walletAddress);
@@ -1377,7 +1389,22 @@
-
{holding.walletBalanceNum.toFixed(4)} {(holding.walletBalanceNum * rowRatio).toFixed(4)}
{holding.vaultBalanceNum.toFixed(4)} {(holding.vaultBalanceNum * rowRatio).toFixed(4)}
{holding.totalBalance.toFixed(4)} {(holding.totalBalance * rowRatio).toFixed(4)}
${holding.price.toFixed(2)} ${(holding.price / rowRatio).toFixed(2)}
{#if $costBasisQuery?.isLoading}
@@ -1455,7 +1484,7 @@
{:else}
(historyRange = e.detail.key)}
/>
{:catch _err}
`${$currentNetwork.blockExplorer}/tx/${tx}`}
+ />
{:else if activeTokenTab === 'supply'}
+ {#if hasRatio}
+
+ {/if}
{#if !selectedAmount || selectedAmount === 0n}
{orderSide === 'Buy' ? 'Best ask' : 'Best bid'}
@@ -1215,19 +1268,33 @@
Avg. price
{/if}
-
- {#if !selectedAmount || selectedAmount === 0n}
- {bestOrderbookPrice !== null
- ? `~${bestOrderbookPrice.toFixed(2)} ${paymentTokenSymbol}`
- : 'N/A'}
- {:else if isLoadingPrice}
- Loading...
- {:else if priceError}
- N/A
- {:else}
- ~{marketPrice.toFixed(2)} {paymentTokenSymbol}
+
+
+ {#if !selectedAmount || selectedAmount === 0n}
+ {bestOrderbookPrice !== null
+ ? `~${bestOrderbookPrice.toFixed(2)} ${paymentTokenSymbol}`
+ : 'N/A'}
+ {:else if isLoadingPrice}
+ Loading...
+ {:else if priceError}
+ N/A
+ {:else}
+ ~{marketPrice.toFixed(2)} {paymentTokenSymbol}
+ {/if}
+
+ {#if displayDenom === 'unwrapped' && displayScale !== 1 && !isLoadingPrice && !priceError}
+ {@const perTPrice =
+ !selectedAmount || selectedAmount === 0n
+ ? displayedBestOrderbookPrice
+ : displayedMarketPrice}
+ {#if perTPrice !== null}
+
+ equivalent to ~{perTPrice.toFixed(2)}
+ {paymentTokenSymbol} per {displayedAssetSymbol}
+
+ {/if}
{/if}
-
+
@@ -1238,7 +1305,9 @@
{#if insufficientBalanceError}
- Insufficient {spendingToken?.symbol ?? 'token'} balance
+ Insufficient {orderSide === 'Sell'
+ ? displayedSpendingTokenSymbol
+ : spendingToken?.symbol ?? 'token'} balance
{/if}
{#if insufficientLiquidityWarning && !insufficientBalanceError}
diff --git a/src/lib/components/orders/OrdersTable.svelte b/src/lib/components/orders/OrdersTable.svelte
index bbe57dae..a6dba7f0 100644
--- a/src/lib/components/orders/OrdersTable.svelte
+++ b/src/lib/components/orders/OrdersTable.svelte
@@ -11,6 +11,11 @@
import { createRaindexClient } from '$lib/clients/raindex';
import type { GetOrdersFilters } from '@rainlanguage/orderbook';
import type { DisplayOrder } from '$lib/types/orders';
+ import {
+ displayAmount as denomDisplayAmount,
+ displayPrice as denomDisplayPrice,
+ displaySymbol as denomDisplaySymbol
+ } from '$lib/utils/wrapDenom';
// Props
export let orders: DisplayOrder[] = [];
@@ -27,6 +32,34 @@
// For fetching closed orders (only needed when showClosedOrdersOption is true)
export let tokenAddress: string | null = null;
+ // Denomination — when set to 'unwrapped' the table re-labels and re-scales
+ // the per-token size, filled, and price columns to the underlying t* asset
+ // (= wt amount × ratio). Defaults to 'wrapped' so existing callers (e.g.
+ // the dashboard) keep their current behavior. The price column is treated
+ // as USD per wt*, so the unwrapped equivalent is `price / ratio`.
+ export let denomination: 'wrapped' | 'unwrapped' = 'wrapped';
+ export let wrapRatio: number = 1;
+ /** Override for the underlying symbol display when denomination='unwrapped'.
+ * Leave undefined to derive from `order.tokenSymbol` by stripping the `wt`
+ * prefix (wtCOIN → tCOIN). */
+ export let unwrappedSymbolOverride: string | undefined = undefined;
+
+ // Declared as reactive `$:` so the function identity changes whenever
+ // `denomination` or `wrapRatio` changes. Svelte 4 tracks template-expression
+ // dependencies by the variables it can see in the expression — `denomination`
+ // is hidden inside the function body and therefore invisible to the static
+ // analyzer, so a plain `function displayAmount(x)` declaration would render
+ // stale values when the toggle flips (the table header would update because
+ // it reads `denomination` directly, but the cell values would not). Rebinding
+ // the function on each toggle forces every `displayAmount(...)` /
+ // `displayPrice(...)` / `displaySymbol(...)` call site to re-run.
+ $: displaySymbol = (tokenSymbol: string): string =>
+ denomDisplaySymbol(tokenSymbol, denomination, unwrappedSymbolOverride);
+ $: displayAmount = (amount: number | null | undefined): number | null =>
+ denomDisplayAmount(amount, denomination, wrapRatio);
+ $: displayPrice = (price: number | null | undefined): number | null =>
+ denomDisplayPrice(price, denomination, wrapRatio);
+
// Filter state
let selectedOrdersFilter: 'my' | 'all' = 'my';
let selectedOrderTypeFilter: 'all' | 'limit' | 'dca' | 'custom' | 'market' = 'all';
@@ -296,9 +329,26 @@
{/if}
+ {#if showPrefix}
+ Show as
+ {/if}
+
diff --git a/src/lib/components/wrap/RatioHistoryTab.svelte b/src/lib/components/wrap/RatioHistoryTab.svelte
new file mode 100644
index 00000000..03f6d8c9
--- /dev/null
+++ b/src/lib/components/wrap/RatioHistoryTab.svelte
@@ -0,0 +1,213 @@
+
+
+
+
+
+
+
+
diff --git a/src/lib/components/wrap/RatioStepChart.svelte b/src/lib/components/wrap/RatioStepChart.svelte
new file mode 100644
index 00000000..db953912
--- /dev/null
+++ b/src/lib/components/wrap/RatioStepChart.svelte
@@ -0,0 +1,213 @@
+
+
+
+
+
+ {#if $query.isPending}
+
+
+
+ Currently 1 : {fmtRatio(currentRatio)}
+
+ Wrap Ratio History
++ Starts at 1 : 1. Each rebase below adds more {assetSymbol} per + {wrappedSymbol} — usually a dividend or split from the underlying. + {#if onLearnMore} + + {/if} +
+
+
+ {:else if $query.isError}
+
+ Failed to load ratio history.
+ {#if $query.error instanceof Error}
+ ({$query.error.message})
+ {/if}
+
+ {:else if events.length === 0}
+
+ No rebases yet — the wrap ratio has been 1 : 1 since deployment.
+
+ {:else}
+ Events
+-
+ {#each eventsDesc as ev, idx (ev.blockNumber)}
+ {@const isLatest = idx === 0}
+ {@const newRate = ratioOfEvent(ev)}
+ {@const prev = eventsDesc[idx + 1] != null ? ratioOfEvent(eventsDesc[idx + 1]) : 1}
+
-
+
+
+
+ ++++ ++ Rebase + {#if isLatest} + + current + + {/if} +++ {fmtFullDate(ev.blockTimestamp)} + · + {relativeFromSec(ev.blockTimestamp)} +++ + 1 : {fmtRatio(newRate)} + + {#if prev != null && newRate != null && prev !== newRate} + {@const pct = ((newRate - prev) / prev) * 100} + {@const direction = pct >= 0 ? 'up' : 'down'} + + {direction === 'up' ? '+' : ''}{pct.toFixed(2)}% + + {/if} + {#if ev.type === 'donation'} + {#if txHrefBuilder} + + {truncTx(ev.txHash)} ++ {#if ev.type === 'donation'} +
+ + {:else} + {truncTx(ev.txHash)} + {/if} + {/if} + + +{ev.assetAmount} + {assetSymbol} added to the vault. +
+ {/if} +
+ {/each}
+
+
+ -
+
+ + Deployed ++1 : 1+
+
+
diff --git a/src/lib/components/wrap/ReceiveGiveCallout.svelte b/src/lib/components/wrap/ReceiveGiveCallout.svelte
new file mode 100644
index 00000000..9db45cd0
--- /dev/null
+++ b/src/lib/components/wrap/ReceiveGiveCallout.svelte
@@ -0,0 +1,66 @@
+
+
+
+ Wrap ratio over time
+ 1 {wrappedSymbol} : N {assetSymbol}
+
+
+
+
diff --git a/src/lib/components/wrap/WrapExplainerModal.svelte b/src/lib/components/wrap/WrapExplainerModal.svelte
new file mode 100644
index 00000000..5ba263a8
--- /dev/null
+++ b/src/lib/components/wrap/WrapExplainerModal.svelte
@@ -0,0 +1,222 @@
+
+
++ {side === 'Buy' ? 'Your wallet will receive' : 'Your wallet will spend'} +
+
+
+ {empty ? '—' : fmtNum(wrappedAmount, 4)}
+
+ {wrappedSymbol}
+
+ + {#if empty} + 1 {wrappedSymbol} bundles {ratioLabel} + {assetSymbol} shares — you'll see the {wrappedSymbol} count in your wallet, not the share count. + {:else} + = {fmtNum(sharesAmount, 4)} + {assetSymbol} shares · + {fmtUsd(totalUsd)} + {/if} +
+
+
+
+{/if}
diff --git a/src/lib/components/wrap/WrapRatioCard.svelte b/src/lib/components/wrap/WrapRatioCard.svelte
new file mode 100644
index 00000000..732d33c6
--- /dev/null
+++ b/src/lib/components/wrap/WrapRatioCard.svelte
@@ -0,0 +1,97 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ + New on {wrappedSymbol} +
++ What's a Wrapped tStock? +
+
+
+
+
+
+
+
+
+ The Wrap Ratio
+
+ 1 {wrappedSymbol}
+ =
+ {ratioLabel} {assetSymbol}
+
+ + Each {wrappedSymbol} in your wallet is redeemable for + {ratioLabel} + {assetSymbol} — each of which has right of redemption for one share of {equityName}. +
+Prices and history use shares.
++ Every chart, oracle price, and quote on this page is shown in + shares of {equityName} — the same units you'd see on a brokerage. +
+ +
+
+
+
+
+ On the chart
++ $ per share +
+{assetSymbol} — same price as {equityName}
+
+
+ In your wallet
++ {wrappedSymbol} +
++ 1 {wrappedSymbol} bundles {ratioLabel} + {assetSymbol} +
+What you'll actually receive.
++ When you order + {EXAMPLE_SHARES} shares, your wallet will show + {exampleWrapped} {wrappedSymbol} + — not {EXAMPLE_SHARES} tokens. The token count is smaller because each one is worth + {ratioLabel}× more. +
+
+
+
+
+ You order
+ {EXAMPLE_SHARES} {assetSymbol}
+
+
+
+ Wallet shows
+ {exampleWrapped} {wrappedSymbol}
+
+ Built for DeFi
++ Wrapping makes the token DeFi-ready. DeFi protocols track deposited balances internally — + they can't see when a dividend or stock split changes your underlying holdings. By rolling + those events into the wrap ratio, your {wrappedSymbol} quietly compounds (each token becomes + worth a bit more {assetSymbol} over time) without throwing the protocol's accounting out of + sync. +
+ ++ Need {assetSymbol} instead? Unwrap them. +
+
+ Wrapping is reversible at the ratio above and at no cost. Head to
+
+ Dashboard → Holdings
+ {#if onDontShow}
+
+ {:else}
+
+ {/if}
+
+
+
+
diff --git a/src/lib/components/wrap/WrapRatioChip.svelte b/src/lib/components/wrap/WrapRatioChip.svelte
new file mode 100644
index 00000000..10a311cf
--- /dev/null
+++ b/src/lib/components/wrap/WrapRatioChip.svelte
@@ -0,0 +1,55 @@
+
+
+{#if showChip}
+
+
+
+
+ Wrap Ratio
++ 1 {wrappedSymbol} = {ratioLabel} + {assetSymbol} +
++ Each {wrappedSymbol} bundles {ratioLabel} + {assetSymbol} shares. Trades and prices on this page are shown per share. +
+ {#if lastChangedRelative} ++ Last changed {lastChangedRelative}{#if lastChangeLabel} + · {lastChangeLabel}{/if} + {#if onViewHistory} + {' — '} + + {/if} +
+ {/if} +
+ {#if onLearnMore}
+
+ {/if}
+
+ Unwrap in Dashboard
+
+
+ 1 {wrappedSymbol}
+ =
+ {ratioLabel} {assetSymbol}
+
+ {#if onLearnMore}
+
+ {/if}
+
+{/if}
diff --git a/src/lib/config/tokens.ts b/src/lib/config/tokens.ts
index 55945140..00b5cd2d 100644
--- a/src/lib/config/tokens.ts
+++ b/src/lib/config/tokens.ts
@@ -283,6 +283,25 @@ export const TOKENS: CategorizedToken[] = [
tradingViewSymbol: 'AMEX:ARKK',
tradingViewMarket: 'america',
limitOrders: []
+ },
+ {
+ // wtSGOV — iShares 0-3 Month Treasury Bond ETF. Added via st0x.registry
+ // PR #22 (ST0x-Technology/st0x.registry). This is the first ST0x wrapper
+ // expected to develop a non-1:1 wrap ratio over time (T-bill yield
+ // accrues into the vault, increasing assetsPerShare). Pyth feed wiring
+ // is upstream in rain.pyth PR #20.
+ chainId: base.id,
+ address: '0x78c31580c97101694C70022c83D570150c11e935',
+ unwrappedAddress: '0xc941C1506B7555Ba8C506Fb6c9b9CC259902d612',
+ symbol: 'wtSGOV',
+ decimals: 18,
+ name: 'Wrapped iShares 0-3 Month Treasury Bond ETF ST0x',
+ logoUrl: '/images/ishares.png',
+ priceFeedId: '0x8d6a29bb5ed522931d711bb12c4bbf92af986936e52af582032913b5ffcbf4d5',
+ category: 'ST0x',
+ tradingViewSymbol: 'NYSE:SGOV',
+ tradingViewMarket: 'america',
+ limitOrders: []
}
// {
// chainId: base.id,
diff --git a/src/lib/config/wrapRatioFixture.json b/src/lib/config/wrapRatioFixture.json
new file mode 100644
index 00000000..134a7dc1
--- /dev/null
+++ b/src/lib/config/wrapRatioFixture.json
@@ -0,0 +1,60 @@
+{
+ "_comment": "Hardcoded wrap-ratio data for ERC4626-style wrappers until the /v1/tokens/exchange-rates API ships. Values verified on Base via cast on 2026-05-28 (block 46604184). See HANDOVER notes in PR #189. Only wtSGOV currently exhibits a non-1:1 ratio; other wrappers are implicitly 1.0 and resolveRatio() falls through to its 1.0 default.",
+ "rates": [
+ {
+ "share": {
+ "address": "0x78c31580c97101694c70022c83d570150c11e935",
+ "symbol": "wtSGOV",
+ "decimals": 18
+ },
+ "asset": {
+ "address": "0xc941c1506b7555ba8c506fb6c9b9cc259902d612",
+ "symbol": "tSGOV",
+ "decimals": 18
+ },
+ "assetsPerShare": "1.002700626096609112",
+ "blockNumber": 46604184,
+ "blockTimestamp": 1779997717,
+ "capturedAt": "2026-05-28 13:08:37"
+ }
+ ],
+ "history": {
+ "0x78c31580c97101694c70022c83d570150c11e935": {
+ "share": {
+ "address": "0x78c31580c97101694c70022c83d570150c11e935",
+ "symbol": "wtSGOV",
+ "decimals": 18
+ },
+ "asset": {
+ "address": "0xc941c1506b7555ba8c506fb6c9b9cc259902d612",
+ "symbol": "tSGOV",
+ "decimals": 18
+ },
+ "events": [
+ {
+ "type": "snapshot",
+ "blockNumber": 43868604,
+ "blockTimestamp": 1774526555,
+ "assetsPerShare": "1.0",
+ "capturedAt": "2026-03-26 12:02:35"
+ },
+ {
+ "type": "donation",
+ "blockNumber": 45905949,
+ "blockTimestamp": 1778601245,
+ "txHash": "0xeb3de2c68b35d44427f7486f9e4a4e0927534e41e1fc9739a2adf4157fd1d4bb",
+ "donor": "0x975789f46b5de4624d6a4c3b3679901edf1a5bda",
+ "assetAmount": "0.00279185",
+ "newAssetsPerShare": "1.002700626096609112"
+ },
+ {
+ "type": "snapshot",
+ "blockNumber": 46604184,
+ "blockTimestamp": 1779997717,
+ "assetsPerShare": "1.002700626096609112",
+ "capturedAt": "2026-05-28 13:08:37"
+ }
+ ]
+ }
+ }
+}
diff --git a/src/lib/queries/costBasis.ts b/src/lib/queries/costBasis.ts
index 7875a57e..4c90e1b7 100644
--- a/src/lib/queries/costBasis.ts
+++ b/src/lib/queries/costBasis.ts
@@ -82,7 +82,7 @@ async function fetchAllUserTrades(userAddress: string): PromiseHoldings
+
+
{#each assetHoldings as holding}
+ {@const rowRatio = resolveHoldingRatio(holding.address)}
+ {@const rowSymbol = displayUnwrappedSymbol(holding.symbol)}
Holdings
+ +
{#if holding.avgCostBasis !== null}
- ${holding.avgCostBasis.toFixed(2)}
+ ${(holding.avgCostBasis / rowRatio).toFixed(2)}
{:else}
—
{/if}
diff --git a/src/routes/(main)/trade/[id]/+page.svelte b/src/routes/(main)/trade/[id]/+page.svelte
index d18ba904..c389b94f 100644
--- a/src/routes/(main)/trade/[id]/+page.svelte
+++ b/src/routes/(main)/trade/[id]/+page.svelte
@@ -18,6 +18,12 @@
import TabNav from '$lib/components/ui/TabNav.svelte';
import ExternalLink from '$lib/components/ui/ExternalLink.svelte';
import { onMount } from 'svelte';
+ import {
+ wrapExplainerOpen,
+ openWrapExplainer,
+ closeWrapExplainer
+ } from '$lib/stores/wrapExplainerStore';
+ import { panelDenom } from '$lib/stores/panelDenomStore';
import { fly } from 'svelte/transition';
import Select from '$lib/components/ui/Select.svelte';
import type { SgTrade } from '@rainlanguage/orderbook';
@@ -30,6 +36,13 @@
OHLCBucket
} from '$lib/components/charts/token-chart-types';
import MarketOrder from '$lib/components/orders/MarketOrder.svelte';
+ import WrapRatioChip from '$lib/components/wrap/WrapRatioChip.svelte';
+ import WrapRatioCard from '$lib/components/wrap/WrapRatioCard.svelte';
+ import WrapExplainerModal from '$lib/components/wrap/WrapExplainerModal.svelte';
+ import DenomToggle from '$lib/components/wrap/DenomToggle.svelte';
+ import RatioHistoryTab from '$lib/components/wrap/RatioHistoryTab.svelte';
+ import { createExchangeRatesQuery, resolveRatio } from '$lib/queries/exchangeRates';
+ import { priceScale as denomPriceScale } from '$lib/utils/wrapDenom';
import { extractBaseSymbol } from '$lib/utils/tradingViewSymbols';
import {
analyzeTrade,
@@ -103,6 +116,7 @@
currentToken?.address ?? null
);
let oracleQuotesQuery = createOracleQuotesQuery($currentNetwork);
+ const exchangeRatesQuery = createExchangeRatesQuery();
$: {
orderbookQuotesQuery = createTokenOrderbookQuotesQuery(
$currentNetwork,
@@ -112,6 +126,91 @@
oracleQuotesQuery = createOracleQuotesQuery($currentNetwork);
}
+ // Wrap ratio (assetsPerShare) for the current wrapped token. Defaults to 1
+ // when the API lookup is missing — parity wrappers stay 1:1 and the chip /
+ // callouts hide themselves.
+ $: currentRatio = resolveRatio(
+ $exchangeRatesQuery.data ?? null,
+ currentPythToken?.address ?? currentToken?.address ?? null
+ );
+ // Sticky `hasRatio`: once we've ever resolved a non-1 ratio for the current
+ // token, keep the chip + Ratio History tab visible even if a later refetch
+ // transiently flips currentRatio back to 1 (the safe fallback inside
+ // resolveRatio). Without this stickiness, the chip flickers in/out during
+ // exchange-rates polling, TOKEN_TABS recomputes, and handleTokenTabChange
+ // rejects ratio-tab clicks that race the dropout window. Keyed by the
+ // resolved token address so navigating between tokens correctly resets.
+ let hasEverHadRatioForToken: { address: string; value: boolean } | null = null;
+ $: {
+ const addr = (currentPythToken?.address ?? currentToken?.address ?? '').toLowerCase();
+ const isNonOne = Number.isFinite(currentRatio) && currentRatio !== 1;
+ if (!hasEverHadRatioForToken || hasEverHadRatioForToken.address !== addr) {
+ hasEverHadRatioForToken = { address: addr, value: isNonOne };
+ } else if (isNonOne && !hasEverHadRatioForToken.value) {
+ hasEverHadRatioForToken = { address: addr, value: true };
+ }
+ }
+ $: hasRatio = hasEverHadRatioForToken?.value ?? false;
+
+ // "Ratio History" tab only shows when this wrapper actually has a non-1
+ // ratio — keeps the tab strip lean for parity tokens.
+ $: TOKEN_TABS = (
+ hasRatio
+ ? [
+ { id: 'contract', label: 'Contract' },
+ { id: 'ratio', label: 'Ratio History' },
+ { id: 'supply', label: 'Supply' },
+ { id: 'mints', label: 'Mints' },
+ { id: 'burns', label: 'Burns' }
+ ]
+ : [
+ { id: 'contract', label: 'Contract' },
+ { id: 'supply', label: 'Supply' },
+ { id: 'mints', label: 'Mints' },
+ { id: 'burns', label: 'Burns' }
+ ]
+ ) as ReadonlyArray<{ id: string; label: string; badge?: number | string | null }>;
+
+ // Table denomination — shares (t*) matches chart/oracle, wrapped (wt*)
+ // matches wallet balance. Default to shares; user toggles via DenomToggle.
+ let tableDenom: 'unwrapped' | 'wrapped' = 'unwrapped';
+ function handleDenomChange(event: CustomEvent<'unwrapped' | 'wrapped'>) {
+ tableDenom = event.detail;
+ }
+
+ // Price scaling for charts: OHLC + depth arrive in USD per wt* (the
+ // orderbook's native unit). Toggling to 'unwrapped' rescales by dividing
+ // by the ratio so the chart axis labels become USD per share. Identity
+ // transform when ratio is 1 (most tokens today). See `$lib/utils/wrapDenom`
+ // for the shared denom helpers used here and in OrdersTable.
+ $: priceScale = denomPriceScale(tableDenom, currentRatio);
+ $: displayOhlcData =
+ priceScale === 1
+ ? ohlcData
+ : ohlcData.map((c) => ({
+ x: c.x,
+ o: c.o * priceScale,
+ h: c.h * priceScale,
+ l: c.l * priceScale,
+ c: c.c * priceScale
+ }));
+ $: displayOrderbookDepth =
+ priceScale === 1
+ ? orderbookDepth
+ : {
+ bids: orderbookDepth.bids.map((b) => ({ ...b, price: b.price * priceScale })),
+ asks: orderbookDepth.asks.map((a) => ({ ...a, price: a.price * priceScale }))
+ };
+
+ // Explainer modal state imported from $lib/stores/wrapExplainerStore.ts.
+ // Module-level store decouples open/close propagation from this component's
+ // 100+-var reactive graph — clicks on the chip's onLearnMore prop callback
+ // flow directly through Svelte's store subscription machinery rather than
+ // through the trade page's per-component dirty-bit accounting (which races
+ // on the 6th word boundary under suite-level load and intermittently
+ // dropped updates when the state lived as a top-level `let` or per-
+ // component `writable`).
+
// One-shot: fetch legacy address quotes once per token
let legacyQuotesFetchedFor: string | null = null;
$: if (
@@ -271,13 +370,7 @@
] as const;
type AssetTabId = (typeof ASSET_TABS)[number]['id'];
let activeAssetTab: AssetTabId = 'company';
- const TOKEN_TABS = [
- { id: 'contract', label: 'Contract' },
- { id: 'supply', label: 'Supply' },
- { id: 'mints', label: 'Mints' },
- { id: 'burns', label: 'Burns' }
- ] as const;
- type TokenTabId = (typeof TOKEN_TABS)[number]['id'];
+ type TokenTabId = 'contract' | 'ratio' | 'supply' | 'mints' | 'burns';
let activeTokenTab: TokenTabId = 'contract';
const ONCHAIN_TABS = [
{ id: 'market', label: 'Market Data' },
@@ -604,12 +697,12 @@
}
};
$: currentFeedId = browser ? currentPythToken?.priceFeedId ?? null : null;
- const handleTokenTabChange = (event: CustomEvent<{ id: string }>) => {
+ function handleTokenTabChange(event: CustomEvent<{ id: string }>) {
const nextId = event.detail.id;
if (TOKEN_TABS.some((tab) => tab.id === nextId)) {
activeTokenTab = nextId as TokenTabId;
}
- };
+ }
let showChartModal = false;
function openChartModal(event?: Event) {
event?.stopPropagation?.();
@@ -888,9 +981,19 @@
$: modalTitle = tokenDisplaySymbol
? `Advanced Chart — ${tokenDisplayName} (${tokenDisplaySymbol})`
: `Advanced Chart — ${tokenDisplayName}`;
- $: panelTokenLabel = tokenDisplaySymbol || currentToken?.symbol || tokenDisplayName;
+ // Display symbols for the trade panel. The wrapped symbol is the orderbook
+ // primitive (wtX); the unwrapped symbol is the underlying share (tX). The
+ // `panelDenom` store toggles which one we show in the panel's verb line,
+ // input field, balance row, summary, etc. — see `panelDenomStore.ts`.
+ $: panelWrappedSymbol =
+ currentPythToken?.symbol ?? currentToken?.symbol ?? tokenDisplaySymbol ?? tokenDisplayName;
+ $: panelAssetSymbol = panelWrappedSymbol.replace(/^wt/, 't');
+ $: panelTokenLabel = $panelDenom === 'unwrapped' ? panelAssetSymbol : panelWrappedSymbol;
$: panelSummaryVerb = panelOrderSide === 'Buy' ? 'Buying' : 'Selling';
$: panelSummaryPreposition = panelOrderSide === 'Buy' ? 'with' : 'for';
+ $: panelRatioCalloutDisplay = Number.isInteger(currentRatio)
+ ? String(currentRatio)
+ : currentRatio.toLocaleString('en-US', { maximumFractionDigits: 4 });
@@ -919,6 +1022,32 @@
{:else}
+ {#if hasRatio}
+
+
- {#if $isAuthenticated && !isEmbeddedWallet}
-
- {/if}
+
+
+
+
+ Track
+ Track in Wallet
+
+ {/if}
+
+
+ {/if}
+
+ + {tokenDisplayName} +
+
+ {currentPythToken?.symbol ?? currentToken.symbol}
+ ·
+ Wrapped tStock on {$currentNetwork.displayName}
+
+
@@ -1006,7 +1135,25 @@
{#if orderbookQuoteUiState.loadingWithoutData}
Loading...
{:else if buyPrice !== null}
- ${formatNumeric(buyPrice)}
+ {#if hasRatio && currentRatio > 0}
+ {@const assetSym = (currentPythToken?.symbol ?? currentToken.symbol).replace(
+ /^wt/,
+ 't'
+ )}
+ {@const wrappedSym = currentPythToken?.symbol ?? currentToken.symbol}
+
+ {#if hasRatio && currentRatio > 0}
+
+ {@const assetSym = (currentPythToken?.symbol ?? currentToken.symbol).replace(
+ /^wt/,
+ 't'
+ )}
+ {@const wrappedSym = currentPythToken?.symbol ?? currentToken.symbol}
+
+
+ {:else}
+ ${formatNumeric(buyPrice)}
+ {/if}
{:else}
—
{/if}
@@ -1020,13 +1167,61 @@
{#if orderbookQuoteUiState.loadingWithoutData}
Loading...
{:else if sellPrice !== null}
- ${formatNumeric(sellPrice)}
+ {#if hasRatio && currentRatio > 0}
+ {@const assetSym = (currentPythToken?.symbol ?? currentToken.symbol).replace(
+ /^wt/,
+ 't'
+ )}
+ {@const wrappedSym = currentPythToken?.symbol ?? currentToken.symbol}
+
+ ${formatNumeric(buyPrice / currentRatio)}
+ / {assetSym}
+
+
+ ${formatNumeric(buyPrice)}
+ / {wrappedSym}
+
+
+
+ {:else}
+ ${formatNumeric(sellPrice)}
+ {/if}
{:else}
—
{/if}
+ ${formatNumeric(sellPrice / currentRatio)}
+ / {assetSym}
+
+
+ ${formatNumeric(sellPrice)}
+ / {wrappedSym}
+
+
+
+ 1 {wrappedSym} = {Number.isInteger(currentRatio)
+ ? currentRatio
+ : currentRatio.toLocaleString('en-US', {
+ maximumFractionDigits: 4
+ })}
+ {assetSym}
+
+
+
+ {/if}
{#if oracleError}
{oracleError}
{/if} @@ -1118,56 +1313,69 @@ View on-chain trades, liquidity, orders, and vaults
@@ -1219,6 +1431,8 @@
errorMessage={$orderbookQuotesQuery.error?.message ?? ''}
tokenAddress={currentToken?.address ?? null}
showTokenColumn={false}
+ denomination={tableDenom}
+ wrapRatio={currentRatio}
/>
{:else if activeOnchainTab === 'vaults'}
@@ -1425,6 +1639,18 @@
{#if activeTokenTab === 'contract'}
+ {#if hasRatio}
+ (activeTokenTab = 'ratio')}
+ />
+ {/if}
+ {:else if activeTokenTab === 'ratio' && hasRatio}
+ Contract Information
@@ -1483,6 +1709,21 @@
Decimals
18
+ {#if hasRatio}
+
+ Wrap ratio
+ 1 {currentPythToken?.symbol ?? currentToken.symbol} ↔ {Number.isInteger(
+ currentRatio
+ )
+ ? currentRatio
+ : currentRatio.toLocaleString('en-US', {
+ maximumFractionDigits: 4
+ })}
+ {(currentPythToken?.symbol ?? currentToken.symbol).replace(/^wt/, 't')}
+
+ {/if}
Proofs
@@ -1491,6 +1732,15 @@
Supply & Distribution
@@ -1733,9 +1983,6 @@ {/if}{tokenDisplayName}
- {#if tokenDisplaySymbol} -{tokenDisplaySymbol}
- {/if}
On
{$currentNetwork.displayName}
+ {#if hasRatio}
+
+ {/if}
{$currentNetwork.displayName}