Merge phase-01-ui-driven-e2e-tests (incl #189 wrap-ratio UX) into main

[alastairong1]

Brings the full phase-01-ui-driven-e2e-tests integration branch into main — observability (Sentry), the anvil-based Playwright e2e suite, and the #189 wrap-ratio UX (chip, explainer, ratio history, denom toggle, wtSGOV).

Why

PR #174 was previously squash-merged into main, which split main from the phase-01-ui-driven-e2e-tests integration branch. As a result phase-01's later work (obs refactors, e2e stabilization) and #189 (merged into phase-01) never reached main. This PR reconciles them.

Conflict resolution

Three files conflicted purely due to the squash divergence — all resolved as the superset:

• LimitOrder.svelte, MarketOrder.svelte — took phase-01 (observability + wrap-UX; main only had the pre-wrap rendering).
• api/st0x/[...path]/+server.ts — functionally identical (edge-caching); took the prettier-clean form.

main's burst-fix (cache.ts/timeWindow.ts stampede lock) and SPYM fix are preserved (auto-merged, verified present).

Verification (local)

• svelte-check: 0 errors / 0 warnings
• eslint src: clean
• prettier --list-different: clean
• vitest: 763 passed / 1 skipped

After merge: wrap-ratio-ux, phase-01-ui-driven-e2e-tests, and integrate/phase-01-to-main can be deleted.

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Added wrapped/unwrapped denomination toggle for trade panels and holdings—view all quantities in your preferred denomination.
  • New wrap ratio history with visual timeline charts showing past exchange rates.
  • Enhanced order forms (Limit, Market, DCA) with denomination-aware inputs.
  • Added educational wrap token explainer modal and ratio cards with dashboard links.

• Bug Fixes

  • Improved handling of incomplete API responses in trade activity queries.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
st0x	Ready	Preview, Comment	Jun 2, 2026 9:45am

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR implements comprehensive ERC4626 wrapper support by adding a denomination toggle system that lets users view wrapped tokens in their underlying share quantity. It includes fixture-backed exchange rates, display-scale-aware inputs, new wrap-ratio UI components, and integrates denomination awareness across trading panels, orders tables, and the dashboard holdings view.

Changes

Wrap Ratio & Denomination Display System

Layer / File(s)	Summary
Denomination Utilities & State Foundation src/lib/utils/wrapDenom.ts, src/lib/queries/exchangeRates.ts, src/lib/stores/panelDenomStore.ts, src/lib/stores/wrapExplainerStore.ts	Core denomination type, display helpers for symbol/amount/price conversion, and TanStack query wrappers for exchange rates backed by fixture data. Two persisted Svelte stores manage panel and holdings denomination preferences across SSR.
Wrap Ratio Display Components src/lib/components/wrap/WrapRatioChip.svelte, WrapRatioCard.svelte, DenomToggle.svelte, RatioHistoryTab.svelte, RatioStepChart.svelte, WrapExplainerModal.svelte, ReceiveGiveCallout.svelte	New Svelte components for displaying wrap ratios, showing ratio history timelines with step charts, segmented denom toggle ("Shares" vs "Tokens"), and explainer modals. Ratio history includes filtered donation events, relative time labels, and percent-change indicators.
Display-Scale-Aware Input Handling src/lib/components/TradeAmountInput.svelte	TradeAmountInput now supports displayScale and unitOverride props to parse and format amounts in a display denomination (e.g., shares) while storing wt-denominated bigint. Input parsing divides by displayScale then passes through parseUnits; display formatting multiplies back. Reactive binding updates when scale changes.
Order Form Denomination Support src/lib/components/orders/LimitOrder.svelte, MarketOrder.svelte, DcaOrder.svelte	Order forms now accept displayDenom and wrapRatio props. Each computes reactive display state (asset symbol variants, display scale, share-equivalent toggle), wires scaled inputs/labels to TradeAmountInput, and updates Order Summary to show share-equivalent breakdowns when unwrapped.
Orders Table Denomination Display src/lib/components/orders/OrdersTable.svelte	Table accepts denomination, wrapRatio, and optional unwrappedSymbolOverride props. Table header switches unit labels to "(shares)" for unwrapped and "/ share" vs "/ token" suffixes. Amount/Remaining/Filled/Price cells delegate to denomination-aware display helpers from wrapDenom.
Dashboard Holdings Denomination Toggle src/routes/(main)/dashboard/+page.svelte	Dashboard queries exchange rates and derives per-token ratios. Holdings header now includes a checkbox toggling $holdingsDenom between wrapped/unwrapped. Each row scales wallet/vault balances and divides price/cost-basis by ratio when in unwrapped mode, and updates displayed symbol to asset variant.
Trade Page Wrap Ratio Integration src/routes/(main)/trade/[id]/+page.svelte	Large page update adding wrap-ratio queries, stickiness tracking (hasEverHadRatioForToken), and conditional UI. Chart and orderbook depth rescaled via priceScale. Bid/offer prices show "/ asset" and "/ wrapped" variants when ratio exists. Token tabs include conditional "Ratio History" when ratio observed. Denom toggle controls on-page denomination; panel checkbox controls order form inputs. WrapRatioCard, WrapRatioChip, and WrapExplainerModal conditionally render.
Token Config & Wrap Ratio Fixture src/lib/config/tokens.ts, src/lib/config/wrapRatioFixture.json	TOKENS registry extended with wtSGOV (Wrapped iShares 0-3 Month Treasury Bond ETF). New fixture JSON provides hardcoded rates and historical donation/snapshot events keyed by share address for deterministic testing.
API Safety Guards & Minor Updates src/lib/queries/costBasis.ts, src/lib/queries/tradeActivity.ts, src/lib/components/ui/TabNav.svelte, src/routes/api/st0x/[...path]/+server.ts	Trade queries now tolerate missing trades arrays from API via response.trades ?? [] guards. TabNav tabs support optional badge display. Proxy route formatting refactored.
Goldsky Fixture Cache & Unit Tests tests/integration/ui/__fixtures__/goldsky-cache/*.json, tests/lib/utils/wrapDenom.test.ts	Goldsky cache fixtures updated to return structured responses with empty addOrders arrays. New wrapDenom test suite validates symbol/amount/price conversions, ratio fallbacks, null handling, and a round-trip USD invariant that ensures amount × price is conserved across denomination switches.
Wrap Ratio UI Integration Test tests/integration/ui/wrapRatio.spec.ts	Playwright test for wrap-ratio UX: stubs Goldsky SFT subgraph, validates chip formatting and explainer modal, checks ratio history tab event rendering (excluding snapshots), and verifies denomination toggle impact on orders-table cell text and suffix switches (wtSGOV ↔ tSGOV).

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant Page as Trade Page
  participant Query as exchangeRatesQuery
  participant Stickiness as Ratio Stickiness
  participant Denom as DenomToggle / panelDenom
  participant Forms as Order Forms
  participant Table as OrdersTable
  participant Display as Display Helpers

  User->>Page: Load trade page
  Page->>Query: Load exchange rates
  Query-->>Page: currentRatio
  Page->>Stickiness: Track hasEverHadRatioForToken
  Stickiness-->>Page: hasRatio (persistent)
  alt hasRatio
    Page->>Page: Rescale chart/orderbook depth
    Page->>Page: Show WrapRatioChip, bid/offer variants
  end
  User->>Denom: Toggle denomination (wrapped → unwrapped)
  Denom->>Forms: Pass displayDenom prop
  Denom->>Table: Pass denomination prop
  Forms->>Display: displayAmount(value, denom, ratio)
  Display-->>Forms: scaled value
  Table->>Display: displayPrice, displaySymbol
  Display-->>Table: scaled rows
  Table-->>User: Updated cell text & symbols

Loading

Estimated Code Review Effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly Related PRs

• SARKEX/st0x#182: Registers wtSGOV token in shared TOKENS registry alongside this PR's token config changes.
• SARKEX/st0x#168: Also updates src/lib/config/tokens.ts by extending the TOKENS registry with new wrapped/unwrapped token entries.
• SARKEX/st0x#177: Overlaps on REST taker-trades payload shape; both PRs add ?? [] guards to tolerate missing trades arrays from the API.

Poem

🐰 A ratio chip now greets each share,
With wrapped-or-unwrapped on toggle's dare,
History charts trace the journey back,
While orders scale along the track—
One coin becomes another's song,
Display helpers sing all day long! 🎵

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 47.06% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: merging a feature branch that includes wrap-ratio UX (#189) and E2E testing infrastructure (phase-01) into main.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch integrate/phase-01-to-main

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: dependency version conflict. Check your lock file or package.json.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7ec89240ef

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Scale unwrapped limit prices before deployment

When the trade panel is toggled to unwrapped display for a non-1:1 wrapper such as wtSGOV, this label tells the user the limit price is per tSGOV, and the quantity input converts the entered share amount back to wt internally. However handleDeploy still uses selectedInitialRatio unchanged as the on-chain wt price when calculating settlementNeeded and ioRatio, so a user-entered per-share price is deployed as a lower per-wrapped-token price by roughly the wrap ratio. This underfunds buy orders and underprices sell orders whenever displayDenom === 'unwrapped'; the displayed/input price should be converted back to per-wt before deployment and price warnings.

Useful? React with 👍 / 👎.

[coderabbitai]

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

src/lib/components/orders/DcaOrder.svelte (1)

327-342: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Finish the sell-side denom switch in the summary.

The heading and input now use displayedAssetSymbol, but the summary block below still renders selectedInputToken.symbol for target amount, average per period, and min/max trade size. In unwrapped mode the DCA form ends up mixing t* and wt* for the same entered amount.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/orders/DcaOrder.svelte` around lines 327 - 342, The
summary still renders selectedInputToken.symbol instead of the sell-side display
symbol, causing mixed units; in the DcaOrder component update the summary
rendering for "target amount", "average per period", and "min/max trade size" to
use displayedAssetSymbol (or the unitOverride logic used by TradeAmountInput)
when orderSide !== 'Buy' (or when using the sell-side), replacing occurrences of
selectedInputToken.symbol so the heading, input and summary all show the same
unit.

src/lib/components/TradeAmountInput.svelte (1)

205-225: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Don't apply unitOverride/displayScale to the balance row unconditionally.

This now corrupts balances when balanceToken !== amountToken. In the buy-side limit flow, the input is asset-denominated but the balance is USDC, so this block scales the USDC balance by the wrap ratio and relabels it as the asset symbol. Split input-display props from balance-display props, or only reuse the override/scale when the balance token matches the amount token.

Suggested fix

- unit={showUnit ? unitOverride ?? amountToken.symbol : ''}
+ unit={showUnit ? unitOverride ?? amountToken.symbol : ''}

...

- {`@const` balanceFormatted =
- 	parseFloat(formatUnits(data.balance, data.decimals)) * activeScale()}
+ {`@const` shouldUseAmountDisplay =
+ 	getTokenFingerprint(balanceToken ?? amountToken) === amountTokenFingerprint}
+ {`@const` balanceFormatted =
+ 	parseFloat(formatUnits(data.balance, data.decimals)) *
+ 	(shouldUseAmountDisplay ? activeScale() : 1)}
  {`@const` balanceRounded = Math.round(balanceFormatted * 1000) / 1000}
  Balance: {balanceRounded.toFixed(3)}
- {unitOverride ?? (balanceToken ?? amountToken)?.symbol}
+ {shouldUseAmountDisplay ? unitOverride ?? amountToken?.symbol : (balanceToken ?? amountToken)?.symbol}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/TradeAmountInput.svelte` around lines 205 - 225, The
balance row incorrectly reuses input display props
(unitOverride/activeScale/displayScale) causing wrong values when balanceToken
!== amountToken; change the balance formatting and label to use balance-specific
values unless the tokens match: compute the displayed balance using
parseFloat(formatUnits(data.balance, data.decimals)) without applying
activeScale() unless balanceToken and amountToken are the same (compare e.g.
balanceToken?.address === amountToken?.address), and set the unit label to
(balanceToken ?? amountToken)?.symbol unless the tokens match and unitOverride
should apply; update the Balance: expression and the unit string accordingly in
the block that renders balancePromise so only same-token cases reuse
unitOverride/scale.

src/lib/queries/costBasis.ts (1)

85-94: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard response.pagination before reading hasMore in costBasis.ts.

src/lib/queries/costBasis.ts already defensively handles response.trades ?? [], but it reads response.pagination.hasMore unconditionally (lines 92 and 112). The REST client fetchJson just parses JSON without runtime schema validation, so if pagination is missing in a malformed payload the loop will throw.

🛡️ Proposed fix

-		makerHasMore = response.pagination.hasMore;
+		makerHasMore = response.pagination?.hasMore ?? false;
		makerPage++;

-		takerHasMore = response.pagination.hasMore;
+		takerHasMore = response.pagination?.hasMore ?? false;
		takerPage++;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/queries/costBasis.ts` around lines 85 - 94, The code reads
response.pagination.hasMore without guarding for a missing pagination object;
update the assignments that set makerHasMore and takerHasMore to safely handle
absent pagination by using optional chaining or a default (e.g.,
response.pagination?.hasMore ?? false) so the loop won't throw on malformed
responses; locate the assignments to makerHasMore and takerHasMore in
costBasis.ts and replace their unconditional reads of
response.pagination.hasMore with a guarded expression.

🧹 Nitpick comments (8)

src/routes/(main)/trade/[id]/+page.svelte (1)

186-203: ⚡ Quick win

Price scaling relies on upstream guards — consider defensive fallback.

The priceScale transformation (line 186) and its application to OHLC/orderbook data (lines 187-203) assume currentRatio is always a finite positive number. The logic is currently safe because:

1. resolveRatio returns 1 as a fallback when data is missing
2. hasRatio only becomes true when currentRatio is finite and ≠ 1
3. DenomToggle only renders when hasRatio is true (line 1317)

However, if future changes break this assumption (e.g., resolveRatio returns 0 or NaN), the chart data could become invalid (Infinity or NaN prices). Consider adding a defensive guard in denomPriceScale or at the call site:

$: priceScale = denomPriceScale(tableDenom, currentRatio);
$: displayOhlcData =
  priceScale === 1 || !Number.isFinite(priceScale)
    ? ohlcData
    : ohlcData.map((c) => ({
        x: c.x,
        o: c.o * priceScale,
        // ...
      }));

This would prevent chart breakage if the upstream guards are ever bypassed.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/`(main)/trade/[id]/+page.svelte around lines 186 - 203, Add a
defensive guard around the computed priceScale usage to avoid NaN/Infinity/zero
scaling: when computing priceScale with denomPriceScale(tableDenom,
currentRatio) and when deriving displayOhlcData/displayOrderbookDepth, treat any
non-finite or non-positive priceScale as 1 (no-op) instead of applying it;
update the reactive statements that set priceScale, displayOhlcData, and
displayOrderbookDepth to check Number.isFinite(priceScale) && priceScale > 0 (or
equivalent) and fall back to the original ohlcData/orderbookDepth when the check
fails.

src/lib/components/ui/TabNav.svelte (1)

69-75: 💤 Low value

Numeric 0 badge will render an empty-looking "0" pill.

The guard tab.badge != null && tab.badge !== '' lets a numeric 0 through (0 != null and 0 !== '' are both true), so a zero-count badge renders. If badges are intended as counts, hiding 0 is usually preferable. If non-count strings like "0" should still show, leave as-is.

♻️ Optional: suppress zero counts

-			{`#if` tab.badge != null && tab.badge !== ''}
+			{`#if` tab.badge != null && tab.badge !== '' && tab.badge !== 0}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/ui/TabNav.svelte` around lines 69 - 75, The current guard
in TabNav.svelte lets numeric 0 render a badge; update the conditional that
checks tab.badge so zero counts are suppressed when badges represent numeric
counts. For example, in the {`#if` ...} around tab.badge, replace the simple
null/empty checks with a conditional that also excludes numeric zero—e.g. check
tab.badge != null && tab.badge !== '' && (typeof tab.badge !== 'number' ||
tab.badge !== 0) — so string "0" still shows but numeric 0 does not.

src/lib/queries/exchangeRates.ts (1)

141-185: 💤 Low value

page/pageSize are part of the query key but never applied.

The queryFn always returns page: 1, totalPages: 1, all events, and never slices by pageSize. Distinct page values therefore create separate cache entries that resolve to identical data labeled page 1. It's harmless against the small fixture, but worth either slicing here or dropping the params from the key until the real paginated endpoint lands, so the swap-in stays transparent.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/queries/exchangeRates.ts` around lines 141 - 185, The query key
includes page/pageSize but queryFn always returns page:1 and unsliced events;
update createExchangeRateHistoryQuery so queryFn reads options?.page and
options?.pageSize, computes pageIndex and pageSize defaults, slices entry.events
(from FIXTURE.history[wrappedTokenAddress.toLowerCase()]) to return only that
page, and set pagination.page, pagination.pageSize, pagination.totalEvents,
pagination.totalPages and pagination.hasMore accordingly (use Math.ceil for
totalPages and ensure page bounds). This keeps the key/page semantics consistent
with the cached data.

src/lib/components/wrap/WrapExplainerModal.svelte (1)

33-52: ⚡ Quick win

Move focus into the dialog when it opens.

The modal sets role="dialog"/aria-modal and handles Escape, but focus is never moved into the dialog on open and there's no focus trap, so keyboard and screen-reader users retain focus on the page behind it and can Tab out of the modal. At minimum, focus a sensible element (e.g. the "Got it" button) when show becomes true.

♿ Minimal initial-focus approach

 	function onKeydown(event: KeyboardEvent) {
 		if (event.key === 'Escape' && show) onClose();
 	}
+
+	let dialogEl: HTMLDivElement;
+	$: if (show && dialogEl) dialogEl.focus();

Then bind and make the container focusable:

 		<div
 			role="dialog"
 			aria-modal="true"
 			aria-labelledby="wrap-explainer-title"
+			tabindex="-1"
+			bind:this={dialogEl}
 			data-testid="wrap-explainer-modal"

A full focus trap (cycling Tab within the dialog) would be the complete fix.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/wrap/WrapExplainerModal.svelte` around lines 33 - 52, When
the modal opens (when the reactive prop/variable show becomes true) move focus
into the dialog and make it focusable so keyboard/screen-reader users aren’t
left outside; add a focusable target (preferably the primary action, e.g. the
"Got it" button) or the dialog container (give the dialog element
tabindex="-1"), capture a reference (bind:this on the dialog or button), and in
the component lifecycle/reactive block (watching show) call focus() on that
element when show transitions to true; this ensures role="dialog" + aria-modal
works correctly and prevents tabbing from starting outside (implementing a full
focus trap is optional but recommended later).

src/lib/components/wrap/DenomToggle.svelte (1)

36-65: ⚡ Quick win

tablist/tab roles misapplied to a toggle, hurting screen-reader/keyboard UX.

These tabs control no tabpanel and don't implement the expected arrow-key navigation with roving tabindex, so assistive tech announces a tab widget that behaves like plain buttons. A two-state denomination switch maps more naturally onto a radiogroup/radio pattern (or buttons with aria-pressed).

♻️ Suggested ARIA mapping

 	<div
-		role="tablist"
+		role="radiogroup"
 		aria-label={ariaLabel}
 		class="inline-flex items-center rounded-lg border border-white/10 bg-white/5 p-0.5 text-xs"
 	>
 		<button
 			type="button"
-			role="tab"
-			aria-selected={value === 'unwrapped'}
+			role="radio"
+			aria-checked={value === 'unwrapped'}
 			on:click={() => set('unwrapped')}
 			...
 		>
 			Shares ({assetSymbol})
 		</button>
 		<button
 			type="button"
-			role="tab"
-			aria-selected={value === 'wrapped'}
+			role="radio"
+			aria-checked={value === 'wrapped'}
 			on:click={() => set('wrapped')}
 			...

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/wrap/DenomToggle.svelte` around lines 36 - 65, Replace the
incorrect tab semantics with radiogroup/radio semantics in DenomToggle.svelte:
change the container role from "tablist" to "radiogroup" (keep
aria-label={ariaLabel}), change each button role from "tab" to "radio" and
replace aria-selected with aria-checked={value === 'unwrapped'|'wrapped'} (use
the existing value and set functions and assetSymbol/wrappedSymbol labels),
implement roving tabindex by setting tabindex={value === 'unwrapped' ? 0 : -1}
(and the equivalent for the wrapped button) and add a simple on:keydown handler
on each button to handle ArrowLeft/ArrowRight (calling set('unwrapped' or
'wrapped')) plus Space/Enter to activate so keyboard users can toggle; keep
visual classes and on:click calls to set as-is.

src/lib/components/wrap/RatioStepChart.svelte (1)

176-176: 💤 Low value

Tooltip shows the unformatted raw rate.

p.rate is rendered directly, so a value like 1.0027000000001 would surface verbatim, inconsistent with the formatted axis labels. Consider reusing the same locale/precision formatting.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/wrap/RatioStepChart.svelte` at line 176, The tooltip title
currently injects the raw p.rate value directly (title
`{`${fmtDateShort(p.ev.blockTimestamp)} — 1 : ${p.rate}`}`) which can produce
long unformatted floats; change this to format p.rate with the same
locale/precision formatter used for the chart axis/ticks (the component’s number
formatting helper used elsewhere) so the tooltip matches axis labels—update the
title to call that formatter on p.rate (keeping fmtDateShort for the timestamp)
in RatioStepChart.svelte.

src/lib/components/wrap/RatioHistoryTab.svelte (2)

117-117: ⚡ Quick win

Make the Svelte each key robust against same-block events

In RatioHistoryTab.svelte, the list items are donations (so ev.txHash is present), but blockNumber isn’t inherently unique; swap the each key to use txHash-based uniqueness. (Current fixture data doesn’t show same-block donation duplicates, but real data could.)

🐛 Suggested key

-			{`#each` eventsDesc as ev, idx (ev.blockNumber)}
+			{`#each` eventsDesc as ev, idx (ev.txHash + ':' + ev.blockNumber)}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/wrap/RatioHistoryTab.svelte` at line 117, The Svelte each
block uses a non-unique key (ev.blockNumber); change the key to use the donation
transaction hash to ensure uniqueness: update the each directive in
RatioHistoryTab.svelte from using (ev.blockNumber) to (ev.txHash) (or (ev.txHash
?? idx) as a safe fallback) so list diffing for the eventsDesc iteration is
stable when multiple donations share a blockNumber.

---

23-23: createExchangeRateHistoryQuery is safe in the component reactive block; keying should be hardened for live data.

• createExchangeRateHistoryQuery(...) calls @tanstack/svelte-query’s createQuery(...), and RatioHistoryTab.svelte invokes it from within the component’s own $: (not module scope). The queryFn is fixture-only (no network), is gated by enabled: browser && Boolean(wrappedTokenAddress), and uses a queryKey that changes with wrappedTokenAddress/pageSize, so recreating the query object here is an acceptable/reactive usage.
• The {#each ... (ev.blockNumber)} keying is fine for the current wrapRatioFixture.json (no duplicate donation events share the same blockNumber), but it can break with live data if multiple donations occur in one block—key by a unique value (e.g., ${ev.blockNumber}-${ev.txHash}) to prevent duplicate-key issues.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/wrap/RatioHistoryTab.svelte` at line 23, The reactive use
of createExchangeRateHistoryQuery in RatioHistoryTab.svelte is acceptable, but
the {`#each` ... (ev.blockNumber)} key is fragile for live data—update the list
key to a unique per-event identifier (for example combine ev.blockNumber and
ev.txHash like `${ev.blockNumber}-${ev.txHash}` or use an event id property) so
the each block uses a stable unique key; locate the {`#each`} that iterates over
exchange rate or donation events in RatioHistoryTab.svelte and replace the plain
ev.blockNumber key with a composite unique key (ev.blockNumber + ev.txHash or
equivalent).

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/lib/components/orders/MarketOrder.svelte`:
- Around line 264-281: The spend-mode summary still shows wrapped
quantities/symbols because estimatedTradeResult is computed from raw asset
values rather than the display helpers; update the estimatedTradeResult
calculation in MarketOrder.svelte to use displayedAssetSymbol, displayScale (to
divide/multiply amounts), and displayedSpendingTokenSymbol so the summary shows
unwrapped "t" units in unwrapped mode; also use showShareEquivalent /
wtDecimalsForSummary when formatting decimals for the summary so the symbol and
precision match the other displayedMarketPrice/displayedBestOrderbookPrice
helpers.

In `@src/lib/components/orders/OrdersTable.svelte`:
- Around line 35-61: OrdersTable's single wrapRatio and unwrappedSymbolOverride
cannot correctly format mixed-token rows; change the API and helpers to use
per-token lookups instead: add a prop like wrapRatioMap: Record<string,number>
and unwrappedSymbolOverrideMap: Record<string,string> (keyed by tokenSymbol or
tokenAddress used in the row), then update the reactive helpers displaySymbol,
displayAmount, and displayPrice to accept an identifier (e.g., tokenSymbol or
tokenAddress) and call denomDisplaySymbol/denomDisplayAmount/denomDisplayPrice
with the per-token ratio/override looked up from the maps (with sensible
fallbacks to the existing wrapRatio/unwrappedSymbolOverride), and update all
call sites in OrdersTable to pass the token identifier so each row uses its own
ratio/symbol.

In `@src/lib/queries/tradeActivity.ts`:
- Around line 50-52: The loop concatenating response.trades into allTrades risks
a crash when response.pagination is missing; update the checks around pagination
(e.g., where response.pagination.hasMore is used in this function and in
createTakerTradesQuery) to safely default missing pagination to false (use the
equivalent of response.pagination?.hasMore ?? false) so the loop and related
logic never dereference an undefined pagination object; ensure both occurrences
(the while loop check and the check at Line 114 in createTakerTradesQuery) are
hardened consistently.

In `@src/routes/`(main)/dashboard/+page.svelte:
- Around line 945-948: displayUnwrappedSymbol currently rewrites every wt* label
when $holdingsDenom is 'unwrapped' regardless of whether that row actually has a
wrap ratio; change it to use the same per-row lookup used by
resolveHoldingRatio. Update displayUnwrappedSymbol to accept the holding
identifier (address or symbol key) or otherwise consult
holdingsRatesLookup/resolveRatio for that row, and only perform
sym.replace(/^wt/, 't') when $holdingsDenom === 'unwrapped' AND the per-row
resolveRatio(holdingsRatesLookup, address) returns a defined/non-default ratio
(i.e., the mapping exists or ratio !== 1/undefined as appropriate). Make the
identical guard edit where displayUnwrappedSymbol is duplicated (the other
occurrence referenced in the review) so labels are only relabeled when the
numeric conversion uses a wrap ratio.

In `@src/routes/`(main)/trade/[id]/+page.svelte:
- Around line 144-153: The strict check currentRatio !== 1 can misclassify
near-parity values; change the test to an epsilon comparison (e.g., use
Math.abs(currentRatio - 1) > EPSILON) where EPSILON is a small constant (like
1e-6) and still ensure Number.isFinite(currentRatio) before applying it; update
the reactive block that sets hasEverHadRatioForToken (referencing currentRatio,
hasEverHadRatioForToken, and addr/currentPythToken/currentToken) to use this
epsilon condition so near-1 floating values are treated as equal to 1.

---

Outside diff comments:
In `@src/lib/components/orders/DcaOrder.svelte`:
- Around line 327-342: The summary still renders selectedInputToken.symbol
instead of the sell-side display symbol, causing mixed units; in the DcaOrder
component update the summary rendering for "target amount", "average per
period", and "min/max trade size" to use displayedAssetSymbol (or the
unitOverride logic used by TradeAmountInput) when orderSide !== 'Buy' (or when
using the sell-side), replacing occurrences of selectedInputToken.symbol so the
heading, input and summary all show the same unit.

In `@src/lib/components/TradeAmountInput.svelte`:
- Around line 205-225: The balance row incorrectly reuses input display props
(unitOverride/activeScale/displayScale) causing wrong values when balanceToken
!== amountToken; change the balance formatting and label to use balance-specific
values unless the tokens match: compute the displayed balance using
parseFloat(formatUnits(data.balance, data.decimals)) without applying
activeScale() unless balanceToken and amountToken are the same (compare e.g.
balanceToken?.address === amountToken?.address), and set the unit label to
(balanceToken ?? amountToken)?.symbol unless the tokens match and unitOverride
should apply; update the Balance: expression and the unit string accordingly in
the block that renders balancePromise so only same-token cases reuse
unitOverride/scale.

In `@src/lib/queries/costBasis.ts`:
- Around line 85-94: The code reads response.pagination.hasMore without guarding
for a missing pagination object; update the assignments that set makerHasMore
and takerHasMore to safely handle absent pagination by using optional chaining
or a default (e.g., response.pagination?.hasMore ?? false) so the loop won't
throw on malformed responses; locate the assignments to makerHasMore and
takerHasMore in costBasis.ts and replace their unconditional reads of
response.pagination.hasMore with a guarded expression.

---

Nitpick comments:
In `@src/lib/components/ui/TabNav.svelte`:
- Around line 69-75: The current guard in TabNav.svelte lets numeric 0 render a
badge; update the conditional that checks tab.badge so zero counts are
suppressed when badges represent numeric counts. For example, in the {`#if` ...}
around tab.badge, replace the simple null/empty checks with a conditional that
also excludes numeric zero—e.g. check tab.badge != null && tab.badge !== '' &&
(typeof tab.badge !== 'number' || tab.badge !== 0) — so string "0" still shows
but numeric 0 does not.

In `@src/lib/components/wrap/DenomToggle.svelte`:
- Around line 36-65: Replace the incorrect tab semantics with radiogroup/radio
semantics in DenomToggle.svelte: change the container role from "tablist" to
"radiogroup" (keep aria-label={ariaLabel}), change each button role from "tab"
to "radio" and replace aria-selected with aria-checked={value ===
'unwrapped'|'wrapped'} (use the existing value and set functions and
assetSymbol/wrappedSymbol labels), implement roving tabindex by setting
tabindex={value === 'unwrapped' ? 0 : -1} (and the equivalent for the wrapped
button) and add a simple on:keydown handler on each button to handle
ArrowLeft/ArrowRight (calling set('unwrapped' or 'wrapped')) plus Space/Enter to
activate so keyboard users can toggle; keep visual classes and on:click calls to
set as-is.

In `@src/lib/components/wrap/RatioHistoryTab.svelte`:
- Line 117: The Svelte each block uses a non-unique key (ev.blockNumber); change
the key to use the donation transaction hash to ensure uniqueness: update the
each directive in RatioHistoryTab.svelte from using (ev.blockNumber) to
(ev.txHash) (or (ev.txHash ?? idx) as a safe fallback) so list diffing for the
eventsDesc iteration is stable when multiple donations share a blockNumber.
- Line 23: The reactive use of createExchangeRateHistoryQuery in
RatioHistoryTab.svelte is acceptable, but the {`#each` ... (ev.blockNumber)} key
is fragile for live data—update the list key to a unique per-event identifier
(for example combine ev.blockNumber and ev.txHash like
`${ev.blockNumber}-${ev.txHash}` or use an event id property) so the each block
uses a stable unique key; locate the {`#each`} that iterates over exchange rate or
donation events in RatioHistoryTab.svelte and replace the plain ev.blockNumber
key with a composite unique key (ev.blockNumber + ev.txHash or equivalent).

In `@src/lib/components/wrap/RatioStepChart.svelte`:
- Line 176: The tooltip title currently injects the raw p.rate value directly
(title `{`${fmtDateShort(p.ev.blockTimestamp)} — 1 : ${p.rate}`}`) which can
produce long unformatted floats; change this to format p.rate with the same
locale/precision formatter used for the chart axis/ticks (the component’s number
formatting helper used elsewhere) so the tooltip matches axis labels—update the
title to call that formatter on p.rate (keeping fmtDateShort for the timestamp)
in RatioStepChart.svelte.

In `@src/lib/components/wrap/WrapExplainerModal.svelte`:
- Around line 33-52: When the modal opens (when the reactive prop/variable show
becomes true) move focus into the dialog and make it focusable so
keyboard/screen-reader users aren’t left outside; add a focusable target
(preferably the primary action, e.g. the "Got it" button) or the dialog
container (give the dialog element tabindex="-1"), capture a reference
(bind:this on the dialog or button), and in the component lifecycle/reactive
block (watching show) call focus() on that element when show transitions to
true; this ensures role="dialog" + aria-modal works correctly and prevents
tabbing from starting outside (implementing a full focus trap is optional but
recommended later).

In `@src/lib/queries/exchangeRates.ts`:
- Around line 141-185: The query key includes page/pageSize but queryFn always
returns page:1 and unsliced events; update createExchangeRateHistoryQuery so
queryFn reads options?.page and options?.pageSize, computes pageIndex and
pageSize defaults, slices entry.events (from
FIXTURE.history[wrappedTokenAddress.toLowerCase()]) to return only that page,
and set pagination.page, pagination.pageSize, pagination.totalEvents,
pagination.totalPages and pagination.hasMore accordingly (use Math.ceil for
totalPages and ensure page bounds). This keeps the key/page semantics consistent
with the cached data.

In `@src/routes/`(main)/trade/[id]/+page.svelte:
- Around line 186-203: Add a defensive guard around the computed priceScale
usage to avoid NaN/Infinity/zero scaling: when computing priceScale with
denomPriceScale(tableDenom, currentRatio) and when deriving
displayOhlcData/displayOrderbookDepth, treat any non-finite or non-positive
priceScale as 1 (no-op) instead of applying it; update the reactive statements
that set priceScale, displayOhlcData, and displayOrderbookDepth to check
Number.isFinite(priceScale) && priceScale > 0 (or equivalent) and fall back to
the original ohlcData/orderbookDepth when the check fails.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f8e181ac-80bf-4f04-8cee-94ecc8dc241b

📥 Commits

Reviewing files that changed from the base of the PR and between cb597c3 and 7ec8924.

📒 Files selected for processing (35)

• src/lib/components/TradeAmountInput.svelte
• src/lib/components/orders/DcaOrder.svelte
• src/lib/components/orders/LimitOrder.svelte
• src/lib/components/orders/MarketOrder.svelte
• src/lib/components/orders/OrdersTable.svelte
• src/lib/components/ui/TabNav.svelte
• src/lib/components/wrap/DenomToggle.svelte
• src/lib/components/wrap/RatioHistoryTab.svelte
• src/lib/components/wrap/RatioStepChart.svelte
• src/lib/components/wrap/ReceiveGiveCallout.svelte
• src/lib/components/wrap/WrapExplainerModal.svelte
• src/lib/components/wrap/WrapRatioCard.svelte
• src/lib/components/wrap/WrapRatioChip.svelte
• src/lib/config/tokens.ts
• src/lib/config/wrapRatioFixture.json
• src/lib/queries/costBasis.ts
• src/lib/queries/exchangeRates.ts
• src/lib/queries/tradeActivity.ts
• src/lib/stores/panelDenomStore.ts
• src/lib/stores/wrapExplainerStore.ts
• src/lib/utils/wrapDenom.ts
• src/routes/(main)/dashboard/+page.svelte
• src/routes/(main)/trade/[id]/+page.svelte
• src/routes/api/st0x/[...path]/+server.ts
• tests/integration/ui/__fixtures__/goldsky-cache/08ed6007851ec35517a3f79386f42003.json
• tests/integration/ui/__fixtures__/goldsky-cache/389a73db892f1621e6a4d2e952d754b5.json
• tests/integration/ui/__fixtures__/goldsky-cache/5a4bb99c2ab22feeec5054cfff1d723f.json
• tests/integration/ui/__fixtures__/goldsky-cache/6f7df66ac045057a0fe54b16846b1381.json
• tests/integration/ui/__fixtures__/goldsky-cache/76e96fdd4740c654ea475d9c12e6de07.json
• tests/integration/ui/__fixtures__/goldsky-cache/a508c9a14dd3db2b5d793f2727a6f2f2.json
• tests/integration/ui/__fixtures__/goldsky-cache/a860276150c896f585624da73bd317f2.json
• tests/integration/ui/__fixtures__/goldsky-cache/b2ac3ef1a8da233fa50833a4674087b9.json
• tests/integration/ui/__fixtures__/goldsky-cache/dfbd6fd61cafd78ccac5b4626e0347d2.json
• tests/integration/ui/wrapRatio.spec.ts
• tests/lib/utils/wrapDenom.test.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Spend mode still reports wrapped receive amounts.

These helpers update the input label and market-price copy, but the spend-mode summary still uses wrapped quantity/symbol in estimatedTradeResult. In buy + unwrapped mode the user sees USDC per tX above and ~… wtX in the summary for the same trade.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/orders/MarketOrder.svelte` around lines 264 - 281, The
spend-mode summary still shows wrapped quantities/symbols because
estimatedTradeResult is computed from raw asset values rather than the display
helpers; update the estimatedTradeResult calculation in MarketOrder.svelte to
use displayedAssetSymbol, displayScale (to divide/multiply amounts), and
displayedSpendingTokenSymbol so the summary shows unwrapped "t" units in
unwrapped mode; also use showShareEquivalent / wtDecimalsForSummary when
formatting decimals for the summary so the symbol and precision match the other
displayedMarketPrice/displayedBestOrderbookPrice helpers.

[coderabbitai]

⚠️ Potential issue | 🟠 Major | 🏗️ Heavy lift

A single wrapRatio cannot format a mixed-token orders table correctly.

OrdersTable can render orders for many assets at once, but these helpers apply one ratio and one symbol override to every row. If a parent turns on unwrapped display for a multi-token list, only one token can be correct; the other rows' Remaining/Filled/Price values will be wrong. This needs a per-token lookup keyed by address/symbol instead of table-wide props.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/components/orders/OrdersTable.svelte` around lines 35 - 61,
OrdersTable's single wrapRatio and unwrappedSymbolOverride cannot correctly
format mixed-token rows; change the API and helpers to use per-token lookups
instead: add a prop like wrapRatioMap: Record<string,number> and
unwrappedSymbolOverrideMap: Record<string,string> (keyed by tokenSymbol or
tokenAddress used in the row), then update the reactive helpers displaySymbol,
displayAmount, and displayPrice to accept an identifier (e.g., tokenSymbol or
tokenAddress) and call denomDisplaySymbol/denomDisplayAmount/denomDisplayPrice
with the per-token ratio/override looked up from the maps (with sensible
fallbacks to the existing wrapRatio/unwrappedSymbolOverride), and update all
call sites in OrdersTable to pass the token identifier so each row uses its own
ratio/symbol.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Same pagination exposure as in costBasis.ts.

response.trades ?? [] is guarded, but response.pagination.hasMore (Line 51, and Line 114 in createTakerTradesQuery) remains unguarded. If a response is incomplete enough to omit trades, it may also omit pagination, throwing and breaking out of the loop. Apply the same ?? false hardening as suggested in costBasis.ts.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/lib/queries/tradeActivity.ts` around lines 50 - 52, The loop
concatenating response.trades into allTrades risks a crash when
response.pagination is missing; update the checks around pagination (e.g., where
response.pagination.hasMore is used in this function and in
createTakerTradesQuery) to safely default missing pagination to false (use the
equivalent of response.pagination?.hasMore ?? false) so the loop and related
logic never dereference an undefined pagination object; ensure both occurrences
(the while loop check and the check at Line 114 in createTakerTradesQuery) are
hardened consistently.

[coderabbitai]

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Only relabel holdings when that row actually has a wrap ratio.

resolveHoldingRatio() falls back to 1, but displayUnwrappedSymbol() rewrites every wt* symbol as soon as the toggle is on. With the current SGOV-only rate data, unsupported holdings will show t* labels while still rendering wrapped quantities and prices. Gate the symbol rewrite on the same per-row ratio/mapping used for the numeric conversion.

Also applies to: 1456-1457

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/`(main)/dashboard/+page.svelte around lines 945 - 948,
displayUnwrappedSymbol currently rewrites every wt* label when $holdingsDenom is
'unwrapped' regardless of whether that row actually has a wrap ratio; change it
to use the same per-row lookup used by resolveHoldingRatio. Update
displayUnwrappedSymbol to accept the holding identifier (address or symbol key)
or otherwise consult holdingsRatesLookup/resolveRatio for that row, and only
perform sym.replace(/^wt/, 't') when $holdingsDenom === 'unwrapped' AND the
per-row resolveRatio(holdingsRatesLookup, address) returns a defined/non-default
ratio (i.e., the mapping exists or ratio !== 1/undefined as appropriate). Make
the identical guard edit where displayUnwrappedSymbol is duplicated (the other
occurrence referenced in the review) so labels are only relabeled when the
numeric conversion uses a wrap ratio.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Consider epsilon comparison for floating-point ratio check.

Line 146 uses strict equality currentRatio !== 1 to determine if the wrap ratio chip and "Ratio History" tab should appear. If the exchange rate API can return ratios very close to 1.0 due to floating-point arithmetic (e.g., 0.9999999 or 1.0000001), this strict check might incorrectly classify near-parity wrappers as "non-one" and show the chip/tab unnecessarily.

If the API guarantees that parity wrappers return exactly 1.0 and non-parity wrappers differ significantly (e.g., 1.05, 0.95), the current logic is fine. Otherwise, consider using an epsilon comparison:

-const isNonOne = Number.isFinite(currentRatio) && currentRatio !== 1;
+const isNonOne = Number.isFinite(currentRatio) && Math.abs(currentRatio - 1) > 0.0001;

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	$: {
	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;
	$: {
	const addr = (currentPythToken?.address ?? currentToken?.address ?? '').toLowerCase();
	const isNonOne = Number.isFinite(currentRatio) && Math.abs(currentRatio - 1) > 0.0001;
	if (!hasEverHadRatioForToken || hasEverHadRatioForToken.address !== addr) {
	hasEverHadRatioForToken = { address: addr, value: isNonOne };
	} else if (isNonOne && !hasEverHadRatioForToken.value) {
	hasEverHadRatioForToken = { address: addr, value: true };
	}
	}
	$: hasRatio = hasEverHadRatioForToken?.value ?? false;

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/routes/`(main)/trade/[id]/+page.svelte around lines 144 - 153, The strict
check currentRatio !== 1 can misclassify near-parity values; change the test to
an epsilon comparison (e.g., use Math.abs(currentRatio - 1) > EPSILON) where
EPSILON is a small constant (like 1e-6) and still ensure
Number.isFinite(currentRatio) before applying it; update the reactive block that
sets hasEverHadRatioForToken (referencing currentRatio, hasEverHadRatioForToken,
and addr/currentPythToken/currentToken) to use this epsilon condition so near-1
floating values are treated as equal to 1.