Feat/mechanism v08

apps/web/src/app/api/ref/spot/route.ts

@@ -0,0 +1,30 @@
+/**
+ * Display-only mainnet spot price, for networks without a market worth quoting (Sepolia: ETH / USD for WETH / USDC and,
+ * times wstETH's own rate, wstETH / USDC). GET /api/ref/spot?symbol=ETH_USD -> { price, source }. Asks Coinbase, then
+ * Kraken; each answer is cached for 30 s, and when both fail the route answers `{ price: null }` (status 502) so the
+ * screens simply show no reference. Never used on-chain.
+ */
+import { SPOT_PAIRS, coinbaseSpot, krakenLast } from "@/lib/spot";
+
+const TTL_S = 30;
+
+async function ask(url: string, parse: (j: unknown) => number | null): Promise<number | null> {
+  try {
+    const r = await fetch(url, { next: { revalidate: TTL_S }, signal: AbortSignal.timeout(4_000) });
+    return r.ok ? parse(await r.json()) : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function GET(req: Request) {
+  const symbol = new URL(req.url).searchParams.get("symbol") ?? "";
+  const pair = Object.hasOwn(SPOT_PAIRS, symbol) ? SPOT_PAIRS[symbol] : undefined; // not toString / __proto__
+  if (!pair) return Response.json({ price: null }, { status: 400 });
+  const cache = { "cache-control": `public, max-age=${TTL_S}` };
+  const cb = await ask(`https://api.coinbase.com/v2/prices/${pair.coinbase}/spot`, coinbaseSpot);
+  if (cb !== null) return Response.json({ price: cb, source: "coinbase" }, { headers: cache });
+  const kr = await ask(`https://api.kraken.com/0/public/Ticker?pair=${pair.kraken}`, krakenLast);
+  if (kr !== null) return Response.json({ price: kr, source: "kraken" }, { headers: cache });
+  return Response.json({ price: null }, { status: 502 });
+}

apps/web/src/app/specials/page.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+import { Suspense } from "react";
+import { SpecialsScreen } from "@/components/specials/SpecialsScreen";
+
+export const metadata: Metadata = { title: "Specials | Confluere" };
+
+export default function Page() {
+  return (
+    <Suspense>
+      <SpecialsScreen />
+    </Suspense>
+  );
+}

apps/web/src/components/borrow/LendForm.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 import { useState } from "react";
 import { useConnection } from "wagmi";
 import type { Hex } from "viem";
-import { quoteDown, scaleOf } from "@confluere/sdk";
+import { quoteDown, quoteUp, scaleOf, tradeFee } from "@confluere/sdk";
 import { useActiveChain } from "@/lib/activeChain";
 import { launchTokensOf } from "@/lib/chains";
 import { useAccountOrders, useMinNotional, usePools, useTokens, tokenOf, type PoolRow } from "@/lib/data";
@@ -134,10 +134,10 @@ function LendFormFor({ pool, onClose, embedded }: { pool: PoolRow; onClose?: ()
 
   // facts per 1 unit of collateral until an amount is typed (Pendle PT panel: rate, maturity, payout before input)
   const units = amt > 0n && q.units > 0n ? q.units : 10n ** BigInt(A.decimals);
-  const paid = amt > 0n ? amt : quoteDown(units, price, scale);
+  const fee = tradeFee(quoteUp(units, price, scale)); // v0.8: 0.015% on the lender's side, included in the amount
+  const paid = amt > 0n ? amt : quoteUp(units, price, scale) + fee;
   const payout = quoteDown(units, f.netPerUnit || bbPrice, scale);
   const per = amt > 0n ? "" : ` per 1 ${A.symbol}`;
-  const fee = (quoteDown(units, bbPrice, scale) - payout);
   const ft = positionName("ft", pool, A, Q, { all: allPools ?? [] });
 
   return (
@@ -164,12 +164,12 @@ function LendFormFor({ pool, onClose, embedded }: { pool: PoolRow; onClose?: ()
         <DetailRows
           rows={[
             amt > 0n && q.units > 0n && { k: "You receive", v: <span title={ft.symbol}>≈ {fmtToken(q.units, { symbol: ft.short, decimals: A.decimals })}</span>, hint: `1 C = 1 ${A.symbol} of backing`, testId: "lend-receive" },
-            { k: "Fixed rate", v: price > 0n ? rateText(f, pool.expiry - now) : "—", hint: "net of the protocol's share" },
+            { k: "Fixed rate", v: price > 0n ? rateText(f, pool.expiry - now) : "—", hint: "net of the 0.015% trade fee" },
             { k: `You pay${per}`, v: <>≈ {fmtToken(paid, Q)}</>, hint: price > 0n ? `${fmtPer(price, Q)} ${Q.symbol} per ${A.symbol}` : undefined },
             { k: `Paid back${per}`, v: fmtToken(payout, Q), hint: `on ${fmtChip(pool.expiry)} UTC, if repaid` },
             !own && { k: "Worst case", v: worst.priced ? rateText(worst, pool.expiry - now) : "—", hint: `you pay at most ${fmtPer(cap, Q)} per ${A.symbol}` },
             { k: "Collateral", v: `${A.symbol}, bought back at ${fmtPer(bbPrice, Q)}`, hint: refUnits ? `${pct(Number(bbPrice - refUnits) / Number(refUnits), 1)} vs market (reference)` : undefined },
-            { k: "Fee", v: fee > 0n ? fmtToken(fee, Q) : "None", hint: "share of the interest, only if repaid" },
+            { k: "Trade fee", v: fee > 0n ? fmtToken(fee, Q) : "None", hint: "0.015%, included in what you pay; the 5% share of the interest comes from the borrower's side", testId: "lend-fee" },
             { k: "Repayment", v: repaysAnyTime(pool) ? "Any time" : "At maturity", hint: repaysAnyTime(pool) ? "you may be paid back early" : undefined },
           ]}
         />

apps/web/src/components/borrow/LoopCard.tsx

@@ -117,8 +117,8 @@ export function LoopCard({ pool, A, Q, embedded = false, top }: { pool: PoolRow;
           onMax={address && spendable ? () => setStart(toInput(spendable, A.decimals)) : undefined}
         />
         {short && stake && (
-          <p className="flex flex-wrap items-center gap-2 rounded-[var(--radius-control)] bg-warn-soft px-3 py-2 text-caption text-warn">
-            You need {A.symbol}. Stake {deployment ? Q.symbol.replace(/^W/, "") : ""} at FastLane (opens their site).
+          <p className="flex flex-wrap items-center gap-2 rounded-[var(--radius-control)] bg-warn-soft px-3 py-2 text-caption text-warn [overflow-wrap:anywhere]">
+            You need {A.symbol}. {stake.href ? <>Stake {deployment ? Q.symbol.replace(/^W/, "") : ""} at {stake.provider} (opens their site).</> : stake.note}
             {stake.href && (
               <a href={stake.href} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 font-medium underline underline-offset-2">
                 Open <ArrowUpRight size={14} strokeWidth={1.75} aria-hidden />
@@ -189,7 +189,7 @@ export function LoopCard({ pool, A, Q, embedded = false, top }: { pool: PoolRow;
       <ol className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-caption text-ink-3" aria-label="Each round">
         <li>1 Borrow {Q.symbol}</li>
         <li>2 Withdraw it from Portfolio</li>
-        <li>{staking ? "3 Stake at FastLane (their site)" : `3 Turn it into ${P.symbol} where you usually trade`}</li>
+        <li>{staking ? (stake ? `3 Stake at ${stake.provider}${stake.href ? " (their site)" : `: send ${Q.symbol.replace(/^W/, "")} to the ${A.symbol} contract`}` : "3 Stake it (outside Confluere)") : `3 Turn it into ${P.symbol} where you usually trade`}</li>
       </ol>
             </SummaryDetails>
             {plan && <p className="mt-3 text-caption text-ink-3">If you don&apos;t repay: you keep the {Q.symbol}, lenders keep the {A.symbol} you sold. No liquidation.</p>}
@@ -258,7 +258,7 @@ export function LoopCard({ pool, A, Q, embedded = false, top }: { pool: PoolRow;
       <ol className="mt-4 flex flex-wrap gap-x-4 gap-y-1 text-caption text-ink-3" aria-label="Each round">
         <li>1 Borrow {Q.symbol}</li>
         <li>2 Withdraw it from Portfolio</li>
-        <li>{staking ? "3 Stake at FastLane (their site)" : `3 Turn it into ${P.symbol} where you usually trade`}</li>
+        <li>{staking ? (stake ? `3 Stake at ${stake.provider}${stake.href ? " (their site)" : `: send ${Q.symbol.replace(/^W/, "")} to the ${A.symbol} contract`}` : "3 Stake it (outside Confluere)") : `3 Turn it into ${P.symbol} where you usually trade`}</li>
       </ol>
       <div className="mt-3">
         {!open ? (

apps/web/src/components/borrow/borrowFlow.tsx

@@ -17,7 +17,7 @@ import { launchTokensOf } from "@/lib/chains";
 import { useAccountOrders, useBlockTime, useMinNotional, type PoolRow, type Token } from "@/lib/data";
 import { useBalances, usePending, usePositions } from "@/lib/position";
 import { useActionCtx, useChainClock } from "@/lib/useProduct";
-import { borrowQuote, defaultBorrowLimit, defaultMoveBps, minUnits, refToUnits, type BorrowQuote } from "@/lib/quote";
+import { borrowQuote, defaultBorrowLimit, defaultMoveBps, minUnits, netAtPrice, refToUnits, type BorrowQuote } from "@/lib/quote";
 import { repayDeadline, type Deadline } from "@/lib/deadline";
 import { borrowWrites } from "@/lib/actions";
 import { defaultTtl } from "@/lib/order";
@@ -115,7 +115,8 @@ export function useBorrowOrder({ pool, A, Q, amount, ref, payNative = false, rec
   const limitTooHigh = ownPrice && !!pool && limit >= bbPrice;
   const limitLow = ownPrice && !!anchor && limit > 0n && limit < (anchor * 9n) / 10n;
   const scale = pool ? scaleOf(pool.assetDecimals) : 1n;
-  const floor = q && pool && !ownPrice ? quoteDown(show, q.guard, scale) : undefined;
+  // net of the v0.8 fees at the guard price: 0.015% trade fee and 5% of (buy-back − price)
+  const floor = q && pool && !ownPrice ? netAtPrice(pool, show, q.guard) : undefined;
 
   const sym = payToken?.symbol ?? "";
   let label: string;
@@ -256,9 +257,9 @@ export function BorrowTerms({ o, testId = "borrow-terms", collapsible = false, t
         { k: `You receive${per}`, v: <>{o.ownPrice ? "at least " : "≈ "}{fmtToken(qs.receive, Q)}</>, hint: o.floor !== undefined && o.units > 0n ? `at least ${fmtToken(o.floor, Q)} (price may move ${o.move / 100}%)` : undefined },
         { k: `Repay${per}`, v: fmtToken(qs.repay, Q), testId: "row-repay" },
         { k: "Repay by", v: <DeadlineText o={o} />, hint: left > 0 ? `in ${fmtWait(left)}${repaysAnyTime(pool) ? ", any time before" : ", only after maturity"}` : undefined },
-        { k: "Interest", v: fmtToken(qs.repay - qs.receive > 0n ? qs.repay - qs.receive : 0n, Q) },
+        { k: "Interest", v: fmtToken(qs.repay - qs.receive > 0n ? qs.repay - qs.receive : 0n, Q), hint: "fees included" },
         vsMarket !== undefined && { k: "Buy-back price", v: `${fmtPer(o.bbPrice, Q)} ${Q.symbol}`, hint: `${vsMarket >= 0 ? "+" : ""}${pct(vsMarket, 1)} vs market (reference)` },
-        { k: "Fee", v: "None" },
+        { k: "Fees", v: fmtToken(qs.tradeFee + qs.spreadShare, Q), hint: `0.015% trade fee ${fmtToken(qs.tradeFee, Q)} + 5% of the interest ${fmtToken(qs.spreadShare, Q)}; nothing on repay`, testId: "row-fees" },
       ]}
     />
   );
@@ -333,7 +334,7 @@ export function BorrowReview({ o, onPlaced }: { o: BorrowOrder; onPlaced?: () =>
             { k: "Repay by", v: <DeadlineText o={o} />, hint: anyTime ? "any time before" : "only after maturity" },
             o.floor !== undefined && { k: "You receive at least", v: fmtToken(o.floor, Q), hint: "or the order waits for the next round" },
             { k: "Valid for", v: `${o.tries} round${o.tries > 1 ? "s" : ""}`, hint: `≈ ${fmtWait(o.tries * roundSeconds(pool))}` },
-            { k: "Fee", v: "None" },
+            { k: "Fees", v: fmtToken(q.tradeFee + q.spreadShare, Q), hint: "0.015% trade fee + 5% of the interest, taken from what you receive; nothing on repay" },
           ]}
         />
         <OutcomeStrip

apps/web/src/components/earn/EarnScreen.tsx

@@ -2,7 +2,7 @@
 
 /**
  * Earn (IA v3.1 item 4): vaults only. Lending into one maturity yourself means getting C on the Borrow market page.
- * A vault opens its drawer (?vault=, shareable). Rates are net of the protocol's share of the interest.
+ * A vault opens its drawer (?vault=, shareable). Rates are net of the 0.015% trade fee.
  */
 import Link from "next/link";
 import { useMemo } from "react";
@@ -60,7 +60,7 @@ export function EarnScreen() {
         <SectionTitle id="vaults-title">Vaults</SectionTitle>
         <VaultRows vaults={vaults.data} loading={(vaults.isLoading || metaMissing) && !vaults.data} failed={vaults.isError && !vaults.data} onRetry={retry} tokens={tokens} open={open} now={now} onOpen={(a, pay) => setVault(a, { pay })} />
         <p className="mt-3 text-caption text-ink-3">
-          Rates are what the vault would earn right now, after the protocol&apos;s share of the interest. Prefer to choose a maturity yourself?{" "}
+          Rates are what the vault would earn right now, after the 0.015% trade fee. Withdrawals are paid in the loan token: vaults lend only into auto-sell markets, so defaulted collateral is sold in the next maturity's rounds first. Prefer to choose a maturity yourself?{" "}
           <Link href="/borrow" className="link">
             Lend in one market
           </Link>

apps/web/src/components/earn/VaultDrawer.tsx

@@ -209,7 +209,7 @@ function VaultBody({ v, quote, asset, role, native, wrapped = false }: { v: Vaul
             }
           />
           {rw.picker}
-          <p className="text-caption text-ink-3">Withdrawals are requested now and paid at the end of this period ({periodEnd}), first come first served. If the vault&apos;s funds are out on loan, they are paid when those loans reach maturity.</p>
+          <p className="text-caption text-ink-3">Withdrawals are requested now and paid at the end of this period ({periodEnd}), first come first served. If the vault&apos;s funds are out on loan, they are paid when those loans reach maturity. You are paid in the loan token: the vault lends only into markets that auto-sell defaulted collateral in the next maturity's rounds; any small part that does not sell is claimable by share.</p>
           {me && me.pendingRedeem > 0n && <StatusPill tone="neutral">Withdrawal requested · payable after {ended ? "the next roll" : <DateTime ts={v.targetExpiry} />}.</StatusPill>}
           {me && me.claimAssets > 0n && (
             <Button variant="secondary" size="md" block loading={tx.busy} onClick={() => void collect("assets")}>

apps/web/src/components/layout/AppShell.tsx

@@ -12,6 +12,7 @@ import { NetworkStatus } from "../ui/NetworkStatus";
 import { ToastRegion } from "../ui/Toast";
 import { MoreMenu } from "./MoreMenu";
 import { NetworkMenu } from "./NetworkMenu";
+import { NotDeployed, worksUndeployed } from "./NotDeployed";
 import { WalletMenu, WalletPicker } from "./WalletMenu";
 import { GITHUB_URL, PRIMARY, TABS, inMore, needsBack } from "./nav";
 
@@ -144,6 +145,13 @@ export function Footer() {
   );
 }
 
+/** The page, or the calm "not deployed yet" state on a served network without contracts (components/layout/NotDeployed). */
+function Page({ children }: { children: ReactNode }) {
+  const { deployment } = useActiveChain();
+  const path = usePathname() ?? "/";
+  return !deployment && !worksUndeployed(path) ? <NotDeployed /> : <>{children}</>;
+}
+
 export function AppShell({ children }: { children: ReactNode }) {
   return (
     <>
@@ -154,7 +162,7 @@ export function AppShell({ children }: { children: ReactNode }) {
       <TestnetStrip />
       <main id="main" tabIndex={-1} className="mx-auto max-w-[1200px] px-4 pt-6 outline-none lg:px-6 lg:pt-10">
         <BackHeader />
-        {children}
+        <Page>{children}</Page>
       </main>
       <Footer />
       <TabBar />

apps/web/src/components/layout/NetworkMenu.tsx

@@ -23,6 +23,12 @@ const KNOWN: Record<number, string> = { 1: "Ethereum", 10: "OP Mainnet", 56: "BN
 /** Name of a common EVM chain id, for "Your wallet is on Ethereum" (no full chain list in the bundle). */
 const anyChainName = (id: number | undefined) => (id !== undefined && KNOWN[id]) || "another network";
 
+/** The menu's second line for a network: its open markets, or that it has no deployment yet. */
+export function marketLine(deployed: boolean, open: number | undefined): string {
+  if (!deployed) return "Not deployed yet";
+  return open === undefined ? "Checking markets…" : open > 0 ? `${open} market${open > 1 ? "s" : ""} open` : "No open markets";
+}
+
 /** Markets with a maturity still ahead, per chain, from the server index (no chain reads, so the menu opens instantly). */
 export function openMarketCount(idx: PoolIndex | undefined, nowS: number): number | undefined {
   if (!idx) return undefined;
@@ -45,7 +51,7 @@ function useMarketCounts(chains: ChainMeta[]) {
     })),
   });
   const now = Date.now() / 1000;
-  return chains.map((c, i) => ({ chain: c, open: openMarketCount(qs[i]?.data, now) }));
+  return chains.map((c, i) => ({ chain: c, deployed: !!deploymentOf(c.id), open: openMarketCount(qs[i]?.data, now) }));
 }
 
 /** Chain health in one line, for the bottom of the menu. */
@@ -64,13 +70,14 @@ function HealthLine() {
 }
 
 /**
- * Network switch: works without a wallet; with one, asks the wallet to follow. The pill itself carries the wallet's
+ * Network switch: works without a wallet; with one, asks the wallet to follow. Every served network is listed, one
+ * without a deployment yet (Sepolia before its deploy) too: picking it shows the "not deployed yet" page. The pill itself carries the wallet's
  * wrong-network state ("Wrong network", warn colour) and a spinner while the wallet is asked.
  */
 export function NetworkMenu({ compact }: { compact?: boolean }) {
   const { chainId, meta, walletOnOtherChain, walletChainId } = useActiveChain();
   const { switchNetwork, switching } = useSwitchNetwork();
-  const rows = useMarketCounts(ENABLED.filter((c) => !!deploymentOf(c.id)));
+  const rows = useMarketCounts(ENABLED);
   return (
     <Menu
       label="Network"
@@ -99,7 +106,7 @@ export function NetworkMenu({ compact }: { compact?: boolean }) {
     >
       {(close) => (
         <div className="w-[272px]">
-          {rows.map(({ chain: c, open }) => {
+          {rows.map(({ chain: c, deployed, open }) => {
             const on = c.id === chainId;
             return (
               <button
@@ -120,7 +127,7 @@ export function NetworkMenu({ compact }: { compact?: boolean }) {
                     {c.name}
                     {c.testnet && <span className="ml-1.5 text-caption font-normal text-ink-3">Testnet</span>}
                   </span>
-                  <span className="block text-caption text-ink-3">{open === undefined ? "Checking markets…" : open > 0 ? `${open} market${open > 1 ? "s" : ""} open` : "No open markets"}</span>
+                  <span className="block text-caption text-ink-3">{marketLine(deployed, open)}</span>
                 </span>
                 {on && <Check size={16} strokeWidth={1.75} className="text-brand" aria-hidden />}
               </button>