Merge pull request #93 from sktbrd/feat/swap-editorial-strip

feat(swap): editorial full-width strip layout (Remix C)

Author: sktbrd

src/app/api/0x/price/route.ts

@@ -1,13 +1,11 @@
 import { NextResponse, type NextRequest } from "next/server";
-import { DAO_ADDRESSES, SWAP_FEE_BPS } from "@/lib/config";
+import { getSwapFeeRecipient, SWAP_FEE_BPS } from "@/lib/config";
 
 // Server-only API key — never leaked to the client bundle.
 const ZEROX_API_KEY = process.env.ZEROX_API_KEY ?? "";
 
-// Fee recipient + rate live in src/lib/config.ts so they ship with the code
-// (the DAO treasury is canonical and overridable via NEXT_PUBLIC_TREASURY_ADDRESS
-// alongside every other DAO address).
-const FEE_RECIPIENT = DAO_ADDRESSES.treasury;
+// Fee recipient is chain-aware: Base → DAO treasury, others → multichain
+// custody address. See `getSwapFeeRecipient` in src/lib/config.ts.
 const FEE_BPS = String(SWAP_FEE_BPS);
 
 const ZEROX_HEADERS: HeadersInit = {
@@ -41,8 +39,9 @@ export async function GET(request: NextRequest) {
 
   if (wantsFee) {
     const buyToken = params.get("buyToken") ?? "";
-    if (buyToken) {
-      params.set("swapFeeRecipient", FEE_RECIPIENT);
+    const chainId = Number(params.get("chainId") ?? "0");
+    if (buyToken && Number.isFinite(chainId) && chainId > 0) {
+      params.set("swapFeeRecipient", getSwapFeeRecipient(chainId));
       params.set("swapFeeBps", FEE_BPS);
       params.set("swapFeeToken", buyToken);
     }

src/app/api/0x/quote/route.ts

@@ -1,12 +1,11 @@
 import { NextResponse, type NextRequest } from "next/server";
-import { DAO_ADDRESSES, SWAP_FEE_BPS } from "@/lib/config";
+import { getSwapFeeRecipient, SWAP_FEE_BPS } from "@/lib/config";
 
 // Server-only API key — never leaked to the client bundle.
 const ZEROX_API_KEY = process.env.ZEROX_API_KEY ?? "";
 
-// Fee recipient + rate live in src/lib/config.ts; the recipient is the DAO
-// treasury (overridable via NEXT_PUBLIC_TREASURY_ADDRESS).
-const FEE_RECIPIENT = DAO_ADDRESSES.treasury;
+// Fee recipient is chain-aware: Base → DAO treasury, others → multichain
+// custody address. See `getSwapFeeRecipient` in src/lib/config.ts.
 const FEE_BPS = String(SWAP_FEE_BPS);
 
 const ZEROX_HEADERS: HeadersInit = {
@@ -36,8 +35,9 @@ export async function GET(request: NextRequest) {
 
   if (wantsFee) {
     const buyToken = params.get("buyToken") ?? "";
-    if (buyToken) {
-      params.set("swapFeeRecipient", FEE_RECIPIENT);
+    const chainId = Number(params.get("chainId") ?? "0");
+    if (buyToken && Number.isFinite(chainId) && chainId > 0) {
+      params.set("swapFeeRecipient", getSwapFeeRecipient(chainId));
       params.set("swapFeeBps", FEE_BPS);
       params.set("swapFeeToken", buyToken);
     }

src/app/swap/ChainSelector.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Check, ChevronDown } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SWAP_CHAINS } from "./chains";
+import { useSwapChain } from "./SwapChainContext";
+
+export function ChainSelector() {
+  const { chain, setChainId } = useSwapChain();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className="inline-flex items-center gap-1.5 rounded-md bg-blue-100 px-2 py-1 text-xs font-semibold tracking-wide text-blue-800 transition-colors hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400 dark:bg-blue-900/30 dark:text-blue-200 dark:hover:bg-blue-900/50"
+        aria-label="Select chain"
+      >
+        {chain.shortName}
+        <ChevronDown className="h-3 w-3" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-[10rem]">
+        {SWAP_CHAINS.map((c) => (
+          <DropdownMenuItem key={c.id} onSelect={() => setChainId(c.id)} className="gap-2 text-sm">
+            <Check
+              className={c.id === chain.id ? "h-3.5 w-3.5 opacity-100" : "h-3.5 w-3.5 opacity-0"}
+            />
+            {c.name}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/app/swap/SwapChainContext.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import { DEFAULT_SWAP_CHAIN, getSwapChain, type SwapChain } from "./chains";
+
+interface SwapChainContextValue {
+  chain: SwapChain;
+  setChainId: (id: number) => void;
+}
+
+const SwapChainContext = React.createContext<SwapChainContextValue | null>(null);
+
+/**
+ * Holds the chain currently selected in the swap UI. ChainSelector writes
+ * to it; SwapWidget reads from it. The wallet's *active* chain is separate
+ * (driven by thirdweb) — wrong-network UI compares the two.
+ */
+export function SwapChainProvider({ children }: { children: React.ReactNode }) {
+  const [chainId, setChainId] = React.useState<number>(DEFAULT_SWAP_CHAIN.id);
+  const chain = React.useMemo(() => getSwapChain(chainId), [chainId]);
+  const value = React.useMemo<SwapChainContextValue>(() => ({ chain, setChainId }), [chain]);
+  return <SwapChainContext.Provider value={value}>{children}</SwapChainContext.Provider>;
+}
+
+export function useSwapChain(): SwapChainContextValue {
+  const ctx = React.useContext(SwapChainContext);
+  if (!ctx) throw new Error("useSwapChain must be used inside <SwapChainProvider>");
+  return ctx;
+}