fix(gitignore): add start.sh to the ignored files list

.gitignore

@@ -11,3 +11,4 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 .DS_Store
+start.sh

README.md

@@ -13,8 +13,9 @@ Modern currency and crypto converter built with Next.js 14, TypeScript, Tailwind
 - Currency icons in selectors and conversion summary:
   - Crypto icons from `cryptocurrency-icons`
   - Fiat flags from `currency-flags`
-- Default pair: `USD -> EUR`
+- Default pair: `USD -> BTC`
 - Instant conversion with swap action
+- Shareable conversion links via query params (`amount`, `from`, `to`)
 - Current rate, inverse rate, and last update timestamp
 - Client-side validation for invalid/negative amounts
 - Loading, error, and empty states
@@ -166,6 +167,22 @@ If empty, the app uses the local default (`/api/rates`).
   - Supported ranges: `24h`, `7d`, `30d`, `1y`, `all`.
   - Example response fields: `priceUsd`, `change24hPct`, `marketCapUsd`, `volume24hUsd`, `priceHistoryRange`, `priceHistory`, `updatedAt`.
 
+## Shareable Links
+
+You can share the current converter state using URL query params:
+
+- `amount`
+- `from`
+- `to`
+
+Example:
+
+```text
+/?amount=100&from=USD&to=BTC
+```
+
+The app safely parses these params on load and falls back to defaults when values are invalid or unsupported.
+
 ## Architecture Notes
 
 - `app/api/rates/route.ts` is the single internal market endpoint for the frontend.

app/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { ConverterCard } from "@/components/converter/converter-card";
 import { Hero } from "@/components/sections/hero";
 import { InsightsSection } from "@/components/sections/insights-section";
+import { parseConversionShareParams } from "@/lib/share-link";
 
 const DEFAULT_FROM = "USD";
 const DEFAULT_TO = "BTC";
@@ -12,6 +13,29 @@ const DEFAULT_TO = "BTC";
 export default function HomePage() {
   const [selectedFromCode, setSelectedFromCode] = useState(DEFAULT_FROM);
   const [selectedToCode, setSelectedToCode] = useState(DEFAULT_TO);
+  const [forcedAmount, setForcedAmount] = useState<string | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const parsed = parseConversionShareParams(
+      new URLSearchParams(window.location.search),
+    );
+
+    if (parsed.fromCode) {
+      setSelectedFromCode(parsed.fromCode);
+    }
+
+    if (parsed.toCode) {
+      setSelectedToCode(parsed.toCode);
+    }
+
+    setForcedAmount(parsed.amount);
+  }, []);
 
   const handleSelectPopularPair = useCallback(
     (fromCode: string, toCode: string) => {
@@ -34,6 +58,7 @@ export default function HomePage() {
           <ConverterCard
             forcedFromCode={selectedFromCode}
             forcedToCode={selectedToCode}
+            forcedAmount={forcedAmount}
             onPairChange={handlePairChange}
           />
           <InsightsSection

components/converter/converter-card-amount-input.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface ConverterCardAmountInputProps {
+  amountInput: string;
+  amountPrefix?: string;
+  amountInputPaddingLeft?: string;
+  amountError: string | null;
+  quickAmounts: readonly number[];
+  activeQuickAmount: number | null;
+  onAmountChange: (nextValue: string) => void;
+  onQuickAmountSelect: (value: number) => void;
+}
+
+export function ConverterCardAmountInput({
+  amountInput,
+  amountPrefix,
+  amountInputPaddingLeft,
+  amountError,
+  quickAmounts,
+  activeQuickAmount,
+  onAmountChange,
+  onQuickAmountSelect,
+}: ConverterCardAmountInputProps) {
+  return (
+    <div className="space-y-2">
+      <label
+        htmlFor="amount"
+        className="text-xs uppercase tracking-[0.14em] text-muted-foreground"
+      >
+        Amount
+      </label>
+      <div className="relative">
+        {amountPrefix ? (
+          <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-sm text-muted-foreground/80">
+            {amountPrefix}
+          </span>
+        ) : null}
+        <Input
+          id="amount"
+          type="text"
+          inputMode="decimal"
+          value={amountInput}
+          onChange={(event) => onAmountChange(event.target.value)}
+          placeholder="Enter amount"
+          className="h-14 rounded-xl bg-background/70 px-4 text-lg"
+          style={amountInputPaddingLeft ? { paddingLeft: amountInputPaddingLeft } : undefined}
+          aria-invalid={Boolean(amountError)}
+          aria-describedby={amountError ? "amount-error" : undefined}
+        />
+      </div>
+      <div className="flex flex-wrap items-center gap-2 pt-1">
+        {quickAmounts.map((quickAmount) => (
+          <Button
+            key={quickAmount}
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => onQuickAmountSelect(quickAmount)}
+            className={cn(
+              "h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground transition-colors hover:text-foreground",
+              activeQuickAmount === quickAmount
+                ? "border-cyan-300/50 bg-cyan-500/15 text-cyan-100"
+                : "",
+            )}
+            aria-label={`Set amount to ${quickAmount}`}
+          >
+            {quickAmount}
+          </Button>
+        ))}
+      </div>
+      {amountError ? (
+        <p id="amount-error" className="text-sm text-red-300">
+          {amountError}
+        </p>
+      ) : null}
+    </div>
+  );
+}

components/converter/converter-card-converted-value.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Check, Copy, Link2 } from "lucide-react";
+
+import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { Button } from "@/components/ui/button";
+import type { RateAsset } from "@/lib/rates";
+
+interface ConverterCardConvertedValueProps {
+  shouldReduceMotion: boolean;
+  fromAsset?: RateAsset;
+  toAsset?: RateAsset;
+  pairTransitionKey: string;
+  convertedDisplay: string;
+  forAmountDisplay: string;
+  isShareLinkCopied: boolean;
+  isCopied: boolean;
+  canCopyConvertedValue: boolean;
+  onCopyShareLink: () => void;
+  onCopyConvertedValue: () => void;
+}
+
+export function ConverterCardConvertedValue({
+  shouldReduceMotion,
+  fromAsset,
+  toAsset,
+  pairTransitionKey,
+  convertedDisplay,
+  forAmountDisplay,
+  isShareLinkCopied,
+  isCopied,
+  canCopyConvertedValue,
+  onCopyShareLink,
+  onCopyConvertedValue,
+}: ConverterCardConvertedValueProps) {
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/50 p-4">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          Converted value
+        </p>
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onCopyShareLink}
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            aria-label={isShareLinkCopied ? "Share link copied" : "Copy share link"}
+          >
+            {isShareLinkCopied ? (
+              <Check className="h-3.5 w-3.5 text-cyan-200" />
+            ) : (
+              <Link2 className="h-3.5 w-3.5" />
+            )}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onCopyConvertedValue}
+            disabled={!canCopyConvertedValue}
+            className="h-7 w-7 text-muted-foreground hover:text-foreground"
+            aria-label={
+              isCopied
+                ? "Converted value copied"
+                : "Copy converted value to clipboard"
+            }
+          >
+            {isCopied ? (
+              <Check className="h-3.5 w-3.5 text-cyan-200" />
+            ) : (
+              <Copy className="h-3.5 w-3.5" />
+            )}
+          </Button>
+        </div>
+      </div>
+      {fromAsset && toAsset ? (
+        <AnimatePresence initial={false} mode="wait">
+          <motion.div
+            key={pairTransitionKey}
+            className="mt-2 flex items-center gap-2 text-xs text-muted-foreground"
+            initial={
+              shouldReduceMotion ? false : { opacity: 0, y: 4, filter: "blur(2px)" }
+            }
+            animate={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 1, y: 0, filter: "blur(0px)" }
+            }
+            exit={
+              shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -4, filter: "blur(2px)" }
+            }
+            transition={{ duration: shouldReduceMotion ? 0.01 : 0.16 }}
+          >
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
+              <CurrencyIcon
+                code={fromAsset.code}
+                type={fromAsset.type}
+                size="sm"
+              />
+              {fromAsset.code}
+            </span>
+            <span>to</span>
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
+              <CurrencyIcon code={toAsset.code} type={toAsset.type} size="sm" />
+              {toAsset.code}
+            </span>
+          </motion.div>
+        </AnimatePresence>
+      ) : null}
+      <p className="mt-2 break-all text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
+        <AnimatePresence initial={false} mode="wait">
+          <motion.span
+            key={convertedDisplay}
+            className="inline-block"
+            initial={
+              shouldReduceMotion ? false : { opacity: 0, y: 6, filter: "blur(2px)" }
+            }
+            animate={
+              shouldReduceMotion
+                ? { opacity: 1 }
+                : { opacity: 1, y: 0, filter: "blur(0px)" }
+            }
+            exit={
+              shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: -6, filter: "blur(2px)" }
+            }
+            transition={{ duration: shouldReduceMotion ? 0.01 : 0.18 }}
+          >
+            {convertedDisplay}
+          </motion.span>
+        </AnimatePresence>
+      </p>
+      {fromAsset ? (
+        <p className="mt-2 text-sm text-muted-foreground">
+          for {forAmountDisplay} {fromAsset.code}
+        </p>
+      ) : null}
+    </div>
+  );
+}

components/converter/converter-card-header.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function ConverterCardHeader({
+  fiatSource,
+  cryptoSource,
+}: {
+  fiatSource: string;
+  cryptoSource: string;
+}) {
+  return (
+    <CardHeader className="relative isolate z-10 overflow-hidden rounded-t-2xl border-b border-white/5 bg-[linear-gradient(115deg,rgba(16,39,62,0.9)_0%,rgba(14,32,50,0.95)_46%,rgba(14,50,54,0.88)_100%)] pb-4 sm:pb-5 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(140%_120%_at_0%_0%,rgba(56,189,248,0.12)_0%,rgba(56,189,248,0)_45%),radial-gradient(120%_100%_at_100%_0%,rgba(16,185,129,0.1)_0%,rgba(16,185,129,0)_45%)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <CardTitle className="text-2xl font-semibold tracking-tight">
+          Currency Converter
+        </CardTitle>
+        <Badge
+          variant="outline"
+          className="max-w-full border-border/70 bg-background/50 text-[11px] sm:text-xs"
+        >
+          <span className="inline-flex items-center gap-1 whitespace-nowrap sm:hidden">
+            <span className="text-muted-foreground">Data sources:</span>
+            <a
+              href="https://frankfurter.dev/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {fiatSource}
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a
+              href="https://www.coingecko.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {cryptoSource}
+            </a>
+          </span>
+
+          <span className="hidden items-center gap-1 whitespace-nowrap sm:inline-flex">
+            <span className="text-muted-foreground">Data sources:</span>
+            <a
+              href="https://frankfurter.dev/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {fiatSource}
+            </a>
+            <span className="text-muted-foreground">•</span>
+            <a
+              href="https://www.coingecko.com/"
+              target="_blank"
+              rel="noreferrer"
+              className="text-foreground transition-colors hover:text-cyan-100"
+            >
+              {cryptoSource}
+            </a>
+          </span>
+        </Badge>
+      </div>
+      <CardDescription className="pr-1 text-base/7 sm:text-sm">
+        Convert fiat currencies and cryptocurrencies using live exchange rates.
+      </CardDescription>
+    </CardHeader>
+  );
+}

components/converter/converter-card-market-data.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { BarChart3 } from "lucide-react";
+
+import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { PriceSparkline } from "@/components/converter/price-sparkline";
+import { Button } from "@/components/ui/button";
+import { type CryptoMarketResponse, MARKET_CHART_RANGES, type MarketChartRange } from "@/lib/market";
+import { formatSignedPercent, formatTimestamp, formatUsdCompact, formatUsdPrice } from "@/lib/format";
+import type { RateAsset } from "@/lib/rates";
+import { cn } from "@/lib/utils";
+
+interface ConverterCardMarketDataProps {
+  marketAsset: RateAsset | null;
+  marketData: CryptoMarketResponse | null;
+  marketError: string | null;
+  isMarketLoading: boolean;
+  marketRange: MarketChartRange;
+  marketRangeLabels: Record<MarketChartRange, string>;
+  marketRangeChangePct: number | null;
+  onMarketRangeChange: (range: MarketChartRange) => void;
+}
+
+export function ConverterCardMarketData({
+  marketAsset,
+  marketData,
+  marketError,
+  isMarketLoading,
+  marketRange,
+  marketRangeLabels,
+  marketRangeChangePct,
+  onMarketRangeChange,
+}: ConverterCardMarketDataProps) {
+  if (!marketAsset) {
+    return null;
+  }
+
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/40 p-4">
+      <div className="flex items-center justify-between gap-2">
+        <p className="inline-flex items-center gap-1.5 text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          <BarChart3 className="h-3.5 w-3.5" />
+          Market data
+        </p>
+        <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-xs text-foreground">
+          <CurrencyIcon
+            code={marketAsset.code}
+            type={marketAsset.type}
+            size="sm"
+          />
+          {marketAsset.code}
+        </span>
+      </div>
+
+      <div className="mt-3 flex flex-wrap gap-1.5">
+        {MARKET_CHART_RANGES.map((range) => {
+          const isActive = marketRange === range;
+
+          return (
+            <Button
+              key={range}
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onMarketRangeChange(range)}
+              className={cn(
+                "h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground hover:text-foreground",
+                isActive ? "border-cyan-300/50 bg-cyan-500/15 text-cyan-100" : "",
+              )}
+              aria-pressed={isActive}
+              aria-label={`Show ${marketRangeLabels[range]} chart`}
+            >
+              {marketRangeLabels[range]}
+            </Button>
+          );
+        })}
+      </div>
+
+      {marketError && !marketData ? (
+        <p className="mt-3 text-xs text-red-300/90">
+          Unable to load market data right now.
+        </p>
+      ) : null}
+
+      <PriceSparkline
+        points={marketData?.priceHistory ?? []}
+        rangeLabel={marketRangeLabels[marketRange]}
+        isLoading={isMarketLoading && !marketData}
+        className="mt-3"
+      />
+
+      <div className="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+        <div className="rounded-lg border border-border/60 bg-background/60 p-3">
+          <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
+            Price
+          </p>
+          <p className="mt-1 text-base font-medium text-foreground">
+            {marketData ? formatUsdPrice(marketData.priceUsd) : "-"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-border/60 bg-background/60 p-3">
+          <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
+            {marketRangeLabels[marketRange]}
+          </p>
+          <p
+            className={cn(
+              "mt-1 text-base font-medium text-foreground",
+              marketRangeChangePct !== null
+                ? marketRangeChangePct > 0
+                  ? "text-emerald-300"
+                  : marketRangeChangePct < 0
+                    ? "text-red-300"
+                    : "text-foreground"
+                : "text-foreground",
+            )}
+          >
+            {marketData ? formatSignedPercent(marketRangeChangePct) : "-"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-border/60 bg-background/60 p-3">
+          <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
+            Market cap
+          </p>
+          <p className="mt-1 text-base font-medium text-foreground">
+            {marketData ? formatUsdCompact(marketData.marketCapUsd) : "-"}
+          </p>
+        </div>
+        <div className="rounded-lg border border-border/60 bg-background/60 p-3">
+          <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
+            Volume (24h)
+          </p>
+          <p className="mt-1 text-base font-medium text-foreground">
+            {marketData ? formatUsdCompact(marketData.volume24hUsd) : "-"}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-3 flex min-h-4 items-center justify-between gap-2 text-xs text-muted-foreground">
+        <span>
+          {marketData
+            ? `Updated ${formatTimestamp(marketData.updatedAt)}`
+            : isMarketLoading
+              ? "Updating market data..."
+              : ""}
+        </span>
+        {marketData ? <span>Source: {marketData.source}</span> : null}
+      </div>
+    </div>
+  );
+}

components/converter/converter-card-multi-conversion.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Loader2 } from "lucide-react";
+
+import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { formatAmount } from "@/lib/format";
+import type { RateAsset } from "@/lib/rates";
+
+type AmountValidationResult =
+  | { ok: true; value: number }
+  | { ok: false; error: string };
+
+interface MultiConversionItem {
+  asset: RateAsset;
+  value: number;
+}
+
+interface ConverterCardMultiConversionProps {
+  shouldReduceMotion: boolean;
+  debouncedValidation: AmountValidationResult;
+  fromAsset?: RateAsset;
+  multiConversions: MultiConversionItem[];
+  isRatesLoading: boolean;
+}
+
+export function ConverterCardMultiConversion({
+  shouldReduceMotion,
+  debouncedValidation,
+  fromAsset,
+  multiConversions,
+  isRatesLoading,
+}: ConverterCardMultiConversionProps) {
+  return (
+    <div className="rounded-xl border border-border/70 bg-background/40 p-4">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          Multi conversion
+        </p>
+        {fromAsset && debouncedValidation.ok ? (
+          <span className="text-xs text-muted-foreground">
+            for {formatAmount(debouncedValidation.value, fromAsset)} {fromAsset.code}
+          </span>
+        ) : null}
+      </div>
+
+      {!debouncedValidation.ok ? (
+        <p className="mt-3 text-sm text-red-300">{debouncedValidation.error}</p>
+      ) : null}
+
+      {debouncedValidation.ok && multiConversions.length === 0 ? (
+        <p className="mt-3 text-sm text-muted-foreground">
+          No additional assets available for multi conversion.
+        </p>
+      ) : null}
+
+      {debouncedValidation.ok && multiConversions.length > 0 ? (
+        <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
+          {multiConversions.map(({ asset, value }) => (
+            <div
+              key={asset.code}
+              className="rounded-lg border border-border/60 bg-background/60 p-3"
+            >
+              <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                <CurrencyIcon code={asset.code} type={asset.type} size="sm" />
+                {asset.code}
+              </div>
+              <p className="mt-1 text-base font-medium text-foreground">
+                <AnimatePresence initial={false} mode="wait">
+                  <motion.span
+                    key={`${asset.code}-${formatAmount(value, asset)}`}
+                    className="inline-block"
+                    initial={
+                      shouldReduceMotion
+                        ? false
+                        : { opacity: 0, y: 4, filter: "blur(1px)" }
+                    }
+                    animate={
+                      shouldReduceMotion
+                        ? { opacity: 1 }
+                        : { opacity: 1, y: 0, filter: "blur(0px)" }
+                    }
+                    exit={
+                      shouldReduceMotion
+                        ? { opacity: 0 }
+                        : { opacity: 0, y: -4, filter: "blur(1px)" }
+                    }
+                    transition={{ duration: shouldReduceMotion ? 0.01 : 0.15 }}
+                  >
+                    {formatAmount(value, asset)} {asset.code}
+                  </motion.span>
+                </AnimatePresence>
+              </p>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      {isRatesLoading ? (
+        <div className="mt-3 inline-flex items-center gap-2 text-xs text-muted-foreground">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" />
+          Updating multi conversion...
+        </div>
+      ) : null}
+    </div>
+  );
+}

components/converter/converter-card-pair-selection.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ArrowUpDown } from "lucide-react";
+
+import { CurrencySelect } from "@/components/converter/currency-select";
+import { Button } from "@/components/ui/button";
+import type { RateAsset } from "@/lib/rates";
+
+interface ConverterCardPairSelectionProps {
+  assets: RateAsset[];
+  fromCode: string;
+  toCode: string;
+  shouldReduceMotion: boolean;
+  swapAnimationStep: number;
+  onFromChange: (code: string) => void;
+  onToChange: (code: string) => void;
+  onSwap: () => void;
+}
+
+export function ConverterCardPairSelection({
+  assets,
+  fromCode,
+  toCode,
+  shouldReduceMotion,
+  swapAnimationStep,
+  onFromChange,
+  onToChange,
+  onSwap,
+}: ConverterCardPairSelectionProps) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
+      <CurrencySelect
+        label="From"
+        value={fromCode}
+        onChange={onFromChange}
+        assets={assets}
+      />
+      <Button
+        type="button"
+        size="icon"
+        variant="outline"
+        className="mx-auto mb-0.5 rounded-full border-border/70 bg-background/50"
+        onClick={onSwap}
+        aria-label="Swap currencies"
+      >
+        <motion.span
+          className="inline-flex"
+          animate={
+            shouldReduceMotion
+              ? { scale: 1 }
+              : { rotate: swapAnimationStep * 180, scale: [1, 1.08, 1] }
+          }
+          transition={{
+            rotate: {
+              duration: shouldReduceMotion ? 0.01 : 0.28,
+              ease: [0.22, 1, 0.36, 1],
+            },
+            scale: {
+              duration: shouldReduceMotion ? 0.01 : 0.22,
+              times: [0, 0.35, 1],
+            },
+          }}
+        >
+          <ArrowUpDown className="h-4 w-4" />
+        </motion.span>
+      </Button>
+      <CurrencySelect
+        label="To"
+        value={toCode}
+        onChange={onToChange}
+        assets={assets}
+      />
+    </div>
+  );
+}

components/converter/converter-card-pinned-pairs.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { MoveRight, Star, X } from "lucide-react";
+
+import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { Button } from "@/components/ui/button";
+import { type PinnedPair } from "@/hooks/use-pinned-pairs";
+import type { RateAsset } from "@/lib/rates";
+import { cn } from "@/lib/utils";
+
+interface PinnedPairItem {
+  pair: PinnedPair;
+  fromAsset: RateAsset;
+  toAsset: RateAsset;
+}
+
+interface ConverterCardPinnedPairsProps {
+  shouldReduceMotion: boolean;
+  isCurrentPairPinned: boolean;
+  hasReachedPinnedPairsLimit: boolean;
+  pinStarAnimationStep: number;
+  pinnedPairItems: PinnedPairItem[];
+  fromCode: string;
+  toCode: string;
+  isPinnedPairsReady: boolean;
+  maxPinnedPairs: number;
+  onTogglePinnedCurrentPair: () => void;
+  onSelectPinnedPair: (pair: PinnedPair) => void;
+  onRemovePinnedPair: (pair: PinnedPair) => void;
+}
+
+export function ConverterCardPinnedPairs({
+  shouldReduceMotion,
+  isCurrentPairPinned,
+  hasReachedPinnedPairsLimit,
+  pinStarAnimationStep,
+  pinnedPairItems,
+  fromCode,
+  toCode,
+  isPinnedPairsReady,
+  maxPinnedPairs,
+  onTogglePinnedCurrentPair,
+  onSelectPinnedPair,
+  onRemovePinnedPair,
+}: ConverterCardPinnedPairsProps) {
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          Pinned pairs
+        </p>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onTogglePinnedCurrentPair}
+          disabled={hasReachedPinnedPairsLimit}
+          aria-pressed={isCurrentPairPinned}
+          aria-label={
+            isCurrentPairPinned
+              ? "Remove current pair from pinned pairs"
+              : "Add current pair to pinned pairs"
+          }
+          className={cn(
+            "h-8 rounded-full border-border/70 px-3 text-xs transition-colors",
+            isCurrentPairPinned
+              ? "border-amber-300/50 bg-amber-400/10 text-amber-100 hover:border-amber-300/60 hover:bg-amber-400/15"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+        >
+          <motion.span
+            key={`${pinStarAnimationStep}-${isCurrentPairPinned ? "on" : "off"}`}
+            className="mr-1.5 inline-flex"
+            initial={
+              shouldReduceMotion
+                ? false
+                : { scale: 0.95, rotate: 0, opacity: 0.9 }
+            }
+            animate={
+              shouldReduceMotion
+                ? { scale: 1, rotate: 0, opacity: 1 }
+                : {
+                    scale: [1, 1.18, 1],
+                    rotate: isCurrentPairPinned ? [0, -12, 8, 0] : [0, 12, -8, 0],
+                    opacity: [1, 1, 1],
+                  }
+            }
+            transition={{
+              duration: shouldReduceMotion ? 0.01 : 0.24,
+              ease: [0.22, 1, 0.36, 1],
+            }}
+          >
+            <Star
+              className={cn(
+                "h-3.5 w-3.5",
+                isCurrentPairPinned ? "fill-amber-300 text-amber-300" : "",
+              )}
+            />
+          </motion.span>
+          {isCurrentPairPinned ? "Pinned" : "Pin current pair"}
+        </Button>
+      </div>
+
+      {pinnedPairItems.length > 0 ? (
+        <div className="flex flex-wrap gap-2">
+          {pinnedPairItems.map(({ pair, fromAsset, toAsset }) => {
+            const isActive = pair.fromCode === fromCode && pair.toCode === toCode;
+
+            return (
+              <div
+                key={`${pair.fromCode}-${pair.toCode}`}
+                className={cn(
+                  "inline-flex items-center rounded-full border border-border/70 bg-background/45 pr-0.5",
+                  isActive ? "border-cyan-300/40 bg-cyan-500/10" : "",
+                )}
+              >
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => onSelectPinnedPair(pair)}
+                  className={cn(
+                    "h-8 rounded-full px-2.5 text-xs text-muted-foreground hover:text-foreground",
+                    isActive ? "text-cyan-100 hover:text-cyan-100" : "",
+                  )}
+                  aria-label={`Set pair ${pair.fromCode} to ${pair.toCode}`}
+                >
+                  <span className="inline-flex items-center gap-1.5">
+                    <CurrencyIcon
+                      code={fromAsset.code}
+                      type={fromAsset.type}
+                      size="sm"
+                    />
+                    <span>{pair.fromCode}</span>
+                    <MoveRight className="h-3.5 w-3.5 text-cyan-300/90" />
+                    <CurrencyIcon
+                      code={toAsset.code}
+                      type={toAsset.type}
+                      size="sm"
+                    />
+                    <span>{pair.toCode}</span>
+                  </span>
+                </Button>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onRemovePinnedPair(pair)}
+                  className="h-7 w-7 rounded-full text-muted-foreground hover:text-red-300 focus-visible:text-red-200"
+                  aria-label={`Remove pinned pair ${pair.fromCode} to ${pair.toCode}`}
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+
+      {isPinnedPairsReady && pinnedPairItems.length === 0 ? (
+        <p className="text-xs text-muted-foreground">
+          Pin your most-used pairs for one-click access.
+        </p>
+      ) : null}
+
+      {hasReachedPinnedPairsLimit ? (
+        <p className="text-xs text-amber-200/90">
+          Pinned pairs limit reached ({maxPinnedPairs}). Remove one to add a new
+          pair.
+        </p>
+      ) : null}
+    </div>
+  );
+}

components/converter/converter-card-rates-summary.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { formatTimestamp } from "@/lib/format";
+import type { RateAsset } from "@/lib/rates";
+
+interface ConverterCardRatesSummaryProps {
+  fromAsset?: RateAsset;
+  toAsset?: RateAsset;
+  currentRate: string | null;
+  inverseRate: string | null;
+  updatedAt: string;
+}
+
+export function ConverterCardRatesSummary({
+  fromAsset,
+  toAsset,
+  currentRate,
+  inverseRate,
+  updatedAt,
+}: ConverterCardRatesSummaryProps) {
+  return (
+    <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-3">
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Current rate</p>
+        <p className="mt-1 text-sm text-foreground">
+          {fromAsset && toAsset && currentRate
+            ? `1 ${fromAsset.code} = ${currentRate} ${toAsset.code}`
+            : "-"}
+        </p>
+      </div>
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Inverse rate</p>
+        <p className="mt-1 text-sm text-foreground">
+          {fromAsset && toAsset && inverseRate
+            ? `1 ${toAsset.code} = ${inverseRate} ${fromAsset.code}`
+            : "-"}
+        </p>
+      </div>
+      <div>
+        <p className="text-xs uppercase tracking-[0.12em]">Last updated</p>
+        <p className="mt-1 text-sm text-foreground">{formatTimestamp(updatedAt)}</p>
+      </div>
+    </div>
+  );
+}

components/converter/converter-card-states.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { AlertTriangle, RefreshCcw } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ConverterSkeleton() {
+  return (
+    <Card className="border-border/70">
+      <CardHeader>
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="h-4 w-72" />
+      </CardHeader>
+      <CardContent className="space-y-5">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-14 w-full rounded-xl" />
+        </div>
+        <div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
+          <Skeleton className="h-20 w-full rounded-xl" />
+          <Skeleton className="mx-auto h-10 w-10 rounded-full" />
+          <Skeleton className="h-20 w-full rounded-xl" />
+        </div>
+        <Skeleton className="h-28 w-full rounded-xl" />
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ConverterErrorState({
+  message,
+  onRetry,
+}: {
+  message: string;
+  onRetry: () => void;
+}) {
+  return (
+    <Card className="border-red-500/30 bg-red-500/5">
+      <CardContent className="flex flex-col gap-4 p-6">
+        <div className="flex items-start gap-3">
+          <AlertTriangle className="mt-0.5 h-5 w-5 text-red-300" />
+          <div>
+            <p className="text-sm font-medium text-red-200">
+              Unable to load market rates
+            </p>
+            <p className="mt-1 text-sm text-red-200/80">{message}</p>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          onClick={onRetry}
+          className="w-fit border-red-300/30"
+        >
+          <RefreshCcw className="mr-2 h-4 w-4" />
+          Retry
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ConverterEmptyState() {
+  return (
+    <Card className="border-border/70">
+      <CardContent className="p-6">
+        <p className="text-sm text-muted-foreground">
+          No assets are currently available. Please try again shortly.
+        </p>
+      </CardContent>
+    </Card>
+  );
+}

components/converter/converter-card.constants.ts

@@ -0,0 +1,22 @@
+import type { MarketChartRange } from "@/lib/market";
+
+export const DEFAULT_FROM = "USD";
+export const DEFAULT_TO = "BTC";
+export const QUICK_AMOUNTS = [10, 50, 100, 500, 1000] as const;
+export const DEFAULT_MULTI_CONVERSION_CODES = [
+  "USD",
+  "EUR",
+  "BTC",
+  "ETH",
+  "SOL",
+] as const;
+export const MAX_MULTI_CONVERSIONS = 4;
+export const MAX_PINNED_PAIRS = 6;
+
+export const MARKET_RANGE_LABELS: Record<MarketChartRange, string> = {
+  "24h": "24h",
+  "7d": "7d",
+  "30d": "30d",
+  "1y": "1y",
+  all: "all",
+};

components/converter/converter-card.tsx

@@ -1,155 +1,113 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
-import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import { useReducedMotion } from "framer-motion";
-import {
+import { AlertTriangle, Loader2, RefreshCcw } from "lucide-react";
-  AlertTriangle,
-  ArrowUpDown,
-  BarChart3,
-  Check,
-  Copy,
-  Loader2,
-  RefreshCcw,
-} from "lucide-react";
 
-import { CurrencyIcon } from "@/components/converter/currency-icon";
+import { ConverterCardAmountInput } from "@/components/converter/converter-card-amount-input";
-import { PriceSparkline } from "@/components/converter/price-sparkline";
+import { ConverterCardConvertedValue } from "@/components/converter/converter-card-converted-value";
-import { CurrencySelect } from "@/components/converter/currency-select";
+import { ConverterCardHeader } from "@/components/converter/converter-card-header";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
 import {
-  Card,
+  DEFAULT_FROM,
-  CardContent,
+  DEFAULT_MULTI_CONVERSION_CODES,
-  CardDescription,
+  DEFAULT_TO,
-  CardHeader,
+  MARKET_RANGE_LABELS,
-  CardTitle,
+  MAX_MULTI_CONVERSIONS,
-} from "@/components/ui/card";
+  MAX_PINNED_PAIRS,
-import { Input } from "@/components/ui/input";
+  QUICK_AMOUNTS,
+} from "@/components/converter/converter-card.constants";
+import { ConverterCardMarketData } from "@/components/converter/converter-card-market-data";
+import { ConverterCardMultiConversion } from "@/components/converter/converter-card-multi-conversion";
+import { ConverterCardPairSelection } from "@/components/converter/converter-card-pair-selection";
+import { ConverterCardPinnedPairs } from "@/components/converter/converter-card-pinned-pairs";
+import { ConverterCardRatesSummary } from "@/components/converter/converter-card-rates-summary";
+import {
+  ConverterEmptyState,
+  ConverterErrorState,
+  ConverterSkeleton,
+} from "@/components/converter/converter-card-states";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useCryptoMarket } from "@/hooks/use-crypto-market";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
-import { getDisplaySymbol } from "@/lib/currency-display";
+import { type PinnedPair, usePinnedPairs } from "@/hooks/use-pinned-pairs";
-import {
-  MARKET_CHART_RANGES,
-  type MarketChartRange,
-} from "@/lib/market";
 import { useMarketRates } from "@/hooks/use-market-rates";
-import {
+import { getDisplaySymbol } from "@/lib/currency-display";
-  formatAmount,
+import { formatAmount, formatInverseRate, formatRate } from "@/lib/format";
-  formatInverseRate,
+import { type MarketChartRange } from "@/lib/market";
-  formatRate,
-  formatSignedPercent,
-  formatTimestamp,
-  formatUsdCompact,
-  formatUsdPrice,
-} from "@/lib/format";
 import { buildRateMap, convertAmount } from "@/lib/rates";
-import { cn } from "@/lib/utils";
+import { buildConversionShareUrl } from "@/lib/share-link";
 import { validateAmount } from "@/lib/validation";
 
-const DEFAULT_FROM = "USD";
-const DEFAULT_TO = "BTC";
-const QUICK_AMOUNTS = [10, 50, 100, 500, 1000] as const;
-const DEFAULT_MULTI_CONVERSION_CODES = ["USD", "EUR", "BTC", "ETH", "SOL"] as const;
-const MAX_MULTI_CONVERSIONS = 4;
-const MARKET_RANGE_LABELS: Record<MarketChartRange, string> = {
-  "24h": "24h",
-  "7d": "7d",
-  "30d": "30d",
-  "1y": "1y",
-  all: "all",
-};
-
 interface ConverterCardProps {
   forcedFromCode?: string;
   forcedToCode?: string;
+  forcedAmount?: string;
   onPairChange?: (fromCode: string, toCode: string) => void;
   multiConversionCodes?: string[];
 }
 
-function ConverterSkeleton() {
+async function copyTextToClipboard(text: string): Promise<boolean> {
-  return (
+  if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-    <Card className="border-border/70">
+    try {
-      <CardHeader>
+      await navigator.clipboard.writeText(text);
-        <Skeleton className="h-6 w-40" />
+      return true;
-        <Skeleton className="h-4 w-72" />
+    } catch {
-      </CardHeader>
+      // Fallback below.
-      <CardContent className="space-y-5">
+    }
-        <div className="space-y-2">
+  }
-          <Skeleton className="h-4 w-20" />
-          <Skeleton className="h-14 w-full rounded-xl" />
-        </div>
-        <div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
-          <Skeleton className="h-20 w-full rounded-xl" />
-          <Skeleton className="mx-auto h-10 w-10 rounded-full" />
-          <Skeleton className="h-20 w-full rounded-xl" />
-        </div>
-        <Skeleton className="h-28 w-full rounded-xl" />
-      </CardContent>
-    </Card>
-  );
-}
 
-function ErrorState({
+  if (typeof document === "undefined") {
-  message,
+    return false;
-  onRetry,
+  }
-}: {
-  message: string;
-  onRetry: () => void;
-}) {
-  return (
-    <Card className="border-red-500/30 bg-red-500/5">
-      <CardContent className="flex flex-col gap-4 p-6">
-        <div className="flex items-start gap-3">
-          <AlertTriangle className="mt-0.5 h-5 w-5 text-red-300" />
-          <div>
-            <p className="text-sm font-medium text-red-200">
-              Unable to load market rates
-            </p>
-            <p className="mt-1 text-sm text-red-200/80">{message}</p>
-          </div>
-        </div>
-        <Button
-          variant="outline"
-          onClick={onRetry}
-          className="w-fit border-red-300/30"
-        >
-          <RefreshCcw className="mr-2 h-4 w-4" />
-          Retry
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
 
-function EmptyState() {
+  const textArea = document.createElement("textarea");
-  return (
+  textArea.value = text;
-    <Card className="border-border/70">
+  textArea.setAttribute("readonly", "");
-      <CardContent className="p-6">
+  textArea.style.position = "fixed";
-        <p className="text-sm text-muted-foreground">
+  textArea.style.opacity = "0";
-          No assets are currently available. Please try again shortly.
+  textArea.style.pointerEvents = "none";
-        </p>
+  textArea.style.left = "-9999px";
-      </CardContent>
+  document.body.appendChild(textArea);
-    </Card>
+  textArea.select();
-  );
+  textArea.setSelectionRange(0, textArea.value.length);
+
+  try {
+    return document.execCommand("copy");
+  } finally {
+    document.body.removeChild(textArea);
+  }
 }
 
 export function ConverterCard({
   forcedFromCode,
   forcedToCode,
+  forcedAmount,
   onPairChange,
   multiConversionCodes,
 }: ConverterCardProps) {
   const shouldReduceMotion = useReducedMotion();
+  const prefersReducedMotion = shouldReduceMotion ?? false;
   const { data, error, isLoading, refresh } = useMarketRates();
 
   const [amountInput, setAmountInput] = useState("1");
   const [fromCode, setFromCode] = useState(DEFAULT_FROM);
   const [toCode, setToCode] = useState(DEFAULT_TO);
   const [isCopied, setIsCopied] = useState(false);
+  const [isShareLinkCopied, setIsShareLinkCopied] = useState(false);
   const [marketRange, setMarketRange] = useState<MarketChartRange>("24h");
   const [swapAnimationStep, setSwapAnimationStep] = useState(0);
+  const [pinStarAnimationStep, setPinStarAnimationStep] = useState(0);
+
+  const {
+    pinnedPairs,
+    isReady: isPinnedPairsReady,
+    isLimitReached: isPinnedPairsLimitReached,
+    isPinnedPair,
+    removePinnedPair,
+    togglePinnedPair,
+  } = usePinnedPairs(MAX_PINNED_PAIRS);
 
   const debouncedAmount = useDebouncedValue(amountInput, 120);
 
@@ -168,8 +126,7 @@ export function ConverterCard({
     if (!rateMap.has(toCode)) {
       const fallback = rateMap.has(DEFAULT_TO)
         ? DEFAULT_TO
-        : (assets.find((asset) => asset.code !== fromCode)?.code ??
+        : (assets.find((asset) => asset.code !== fromCode)?.code ?? assets[0].code);
-          assets[0].code);
 
       setToCode(fallback);
     }
@@ -193,6 +150,18 @@ export function ConverterCard({
     onPairChange?.(fromCode, toCode);
   }, [fromCode, toCode, onPairChange]);
 
+  useEffect(() => {
+    if (!forcedAmount) {
+      return;
+    }
+
+    const parsed = validateAmount(forcedAmount);
+
+    if (parsed.ok) {
+      setAmountInput(forcedAmount);
+    }
+  }, [forcedAmount]);
+
   const inputValidation = validateAmount(amountInput);
   const debouncedValidation = validateAmount(debouncedAmount);
 
@@ -293,6 +262,30 @@ export function ConverterCard({
     }
   };
 
+  const handleCopyShareLink = async () => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const link = buildConversionShareUrl({
+      origin: window.location.origin,
+      pathname: window.location.pathname,
+      amount: amountInput,
+      fromCode,
+      toCode,
+    });
+
+    const copied = await copyTextToClipboard(link);
+
+    if (!copied) {
+      setIsShareLinkCopied(false);
+      return;
+    }
+
+    setIsShareLinkCopied(true);
+    window.setTimeout(() => setIsShareLinkCopied(false), 1400);
+  };
+
   const displayUpdatedAt = useMemo(() => {
     if (!data) {
       return null;
@@ -350,16 +343,55 @@ export function ConverterCard({
     return `calc(1rem + ${prefixWidthCh}ch + 0.85rem)`;
   }, [amountPrefix]);
 
+  const currentPair = useMemo(() => ({ fromCode, toCode }), [fromCode, toCode]);
+  const isCurrentPairPinned = isPinnedPair(currentPair);
+  const hasReachedPinnedPairsLimit =
+    isPinnedPairsLimitReached && !isCurrentPairPinned;
+
+  const handleTogglePinnedCurrentPair = () => {
+    setPinStarAnimationStep((current) => current + 1);
+    togglePinnedPair(currentPair);
+  };
+
+  const pinnedPairItems = useMemo(
+    () =>
+      pinnedPairs
+        .map((pair) => {
+          const fromAssetEntry = rateMap.get(pair.fromCode);
+          const toAssetEntry = rateMap.get(pair.toCode);
+
+          if (!fromAssetEntry || !toAssetEntry || fromAssetEntry.code === toAssetEntry.code) {
+            return null;
+          }
+
+          return {
+            pair,
+            fromAsset: fromAssetEntry,
+            toAsset: toAssetEntry,
+          };
+        })
+        .filter(
+          (
+            item,
+          ): item is {
+            pair: PinnedPair;
+            fromAsset: (typeof assets)[number];
+            toAsset: (typeof assets)[number];
+          } => Boolean(item),
+        ),
+    [pinnedPairs, rateMap],
+  );
+
   if (isLoading && !data) {
     return <ConverterSkeleton />;
   }
 
   if (!data && error) {
-    return <ErrorState message={error} onRetry={() => void refresh()} />;
+    return <ConverterErrorState message={error} onRetry={() => void refresh()} />;
   }
 
   if (!data || assets.length === 0) {
-    return <EmptyState />;
+    return <ConverterEmptyState />;
   }
 
   const convertedDisplay =
@@ -368,493 +400,111 @@ export function ConverterCard({
       : "--";
 
   const amountError = inputValidation.ok ? null : inputValidation.error;
+  const activeQuickAmount = inputValidation.ok ? inputValidation.value : null;
+  const forAmountDisplay =
+    fromAsset && inputValidation.ok
+      ? formatAmount(inputValidation.value, fromAsset)
+      : "-";
   const pairTransitionKey =
     fromAsset && toAsset ? `${fromAsset.code}-${toAsset.code}` : "empty";
 
   return (
     <Card className="relative overflow-hidden border-border/70 bg-card/90">
-      <CardHeader className="relative isolate z-10 overflow-hidden rounded-t-2xl border-b border-white/5 bg-[linear-gradient(115deg,rgba(16,39,62,0.9)_0%,rgba(14,32,50,0.95)_46%,rgba(14,50,54,0.88)_100%)] pb-4 sm:pb-5 before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(140%_120%_at_0%_0%,rgba(56,189,248,0.12)_0%,rgba(56,189,248,0)_45%),radial-gradient(120%_100%_at_100%_0%,rgba(16,185,129,0.1)_0%,rgba(16,185,129,0)_45%)] after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-white/10">
+      <ConverterCardHeader
-        <div className="flex flex-wrap items-center justify-between gap-2">
+        fiatSource={data.sources.fiat}
-          <CardTitle className="text-2xl font-semibold tracking-tight">
+        cryptoSource={data.sources.crypto}
-            Currency Converter
+      />
-          </CardTitle>
-          <Badge
-            variant="outline"
-            className="max-w-full border-border/70 bg-background/50 text-[11px] sm:text-xs"
-          >
-            <span className="inline-flex items-center gap-1 whitespace-nowrap sm:hidden">
-              <span className="text-muted-foreground">Data sources:</span>
-              <a
-                href="https://frankfurter.dev/"
-                target="_blank"
-                rel="noreferrer"
-                className="text-foreground transition-colors hover:text-cyan-100"
-              >
-                {data.sources.fiat}
-              </a>
-              <span className="text-muted-foreground">•</span>
-              <a
-                href="https://www.coingecko.com/"
-                target="_blank"
-                rel="noreferrer"
-                className="text-foreground transition-colors hover:text-cyan-100"
-              >
-                {data.sources.crypto}
-              </a>
-            </span>
 
-            <span className="hidden items-center gap-1 whitespace-nowrap sm:inline-flex">
-              <span className="text-muted-foreground">Data sources:</span>
-              <a
-                href="https://frankfurter.dev/"
-                target="_blank"
-                rel="noreferrer"
-                className="text-foreground transition-colors hover:text-cyan-100"
-              >
-                {data.sources.fiat}
-              </a>
-              <span className="text-muted-foreground">•</span>
-              <a
-                href="https://www.coingecko.com/"
-                target="_blank"
-                rel="noreferrer"
-                className="text-foreground transition-colors hover:text-cyan-100"
-              >
-                {data.sources.crypto}
-              </a>
-            </span>
-          </Badge>
-        </div>
-        <CardDescription className="pr-1 text-base/7 sm:text-sm">
-          Convert fiat currencies and cryptocurrencies using live exchange
-          rates.
-        </CardDescription>
-      </CardHeader>
       <CardContent className="relative z-10 space-y-5 pt-4 sm:pt-5">
         {error ? (
           <div className="flex items-center gap-2 rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-200">
             <AlertTriangle className="h-4 w-4" />
-            <span>
+            <span>Using last successful data. Latest refresh failed: {error}</span>
-              Using last successful data. Latest refresh failed: {error}
-            </span>
           </div>
         ) : null}
 
-        <div className="space-y-2">
+        <ConverterCardAmountInput
-          <label
+          amountInput={amountInput}
-            htmlFor="amount"
+          amountPrefix={amountPrefix}
-            className="text-xs uppercase tracking-[0.14em] text-muted-foreground"
+          amountInputPaddingLeft={amountInputPaddingLeft}
-          >
+          amountError={amountError}
-            Amount
+          quickAmounts={QUICK_AMOUNTS}
-          </label>
+          activeQuickAmount={activeQuickAmount}
-          <div className="relative">
+          onAmountChange={setAmountInput}
-            {amountPrefix ? (
+          onQuickAmountSelect={(value) => setAmountInput(String(value))}
-              <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-sm text-muted-foreground/80">
+        />
-                {amountPrefix}
-              </span>
-            ) : null}
-            <Input
-              id="amount"
-              type="text"
-              inputMode="decimal"
-              value={amountInput}
-              onChange={(event) => setAmountInput(event.target.value)}
-              placeholder="Enter amount"
-              className="h-14 rounded-xl bg-background/70 px-4 text-lg"
-              style={amountInputPaddingLeft ? { paddingLeft: amountInputPaddingLeft } : undefined}
-              aria-invalid={Boolean(amountError)}
-              aria-describedby={amountError ? "amount-error" : undefined}
-            />
-          </div>
-          <div className="flex flex-wrap items-center gap-2 pt-1">
-            {QUICK_AMOUNTS.map((quickAmount) => {
-              const isActive =
-                inputValidation.ok && inputValidation.value === quickAmount;
 
-              return (
+        <ConverterCardPairSelection
-                <Button
+          assets={assets}
-                  key={quickAmount}
+          fromCode={fromCode}
-                  type="button"
+          toCode={toCode}
-                  variant="outline"
+          shouldReduceMotion={prefersReducedMotion}
-                  size="sm"
+          swapAnimationStep={swapAnimationStep}
-                  onClick={() => setAmountInput(String(quickAmount))}
+          onFromChange={setFromCode}
-                  className={cn(
+          onToChange={setToCode}
-                    "h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground transition-colors hover:text-foreground",
+          onSwap={handleSwap}
-                    isActive ? "border-cyan-300/50 bg-cyan-500/15 text-cyan-100" : ""
+        />
-                  )}
-                  aria-label={`Set amount to ${quickAmount}`}
-                >
-                  {quickAmount}
-                </Button>
-              );
-            })}
-          </div>
-          {amountError ? (
-            <p id="amount-error" className="text-sm text-red-300">
-              {amountError}
-            </p>
-          ) : null}
-        </div>
 
-        <div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
+        <ConverterCardPinnedPairs
-          <CurrencySelect
+          shouldReduceMotion={prefersReducedMotion}
-            label="From"
+          isCurrentPairPinned={isCurrentPairPinned}
-            value={fromCode}
+          hasReachedPinnedPairsLimit={hasReachedPinnedPairsLimit}
-            onChange={setFromCode}
+          pinStarAnimationStep={pinStarAnimationStep}
-            assets={assets}
+          pinnedPairItems={pinnedPairItems}
-          />
+          fromCode={fromCode}
-          <Button
+          toCode={toCode}
-            type="button"
+          isPinnedPairsReady={isPinnedPairsReady}
-            size="icon"
+          maxPinnedPairs={MAX_PINNED_PAIRS}
-            variant="outline"
+          onTogglePinnedCurrentPair={handleTogglePinnedCurrentPair}
-            className="mx-auto mb-0.5 rounded-full border-border/70 bg-background/50"
+          onSelectPinnedPair={(pair) => {
-            onClick={handleSwap}
+            setFromCode(pair.fromCode);
-            aria-label="Swap currencies"
+            setToCode(pair.toCode);
-          >
+          }}
-            <motion.span
+          onRemovePinnedPair={removePinnedPair}
-              className="inline-flex"
+        />
-              animate={
-                shouldReduceMotion
-                  ? { scale: 1 }
-                  : { rotate: swapAnimationStep * 180, scale: [1, 1.08, 1] }
-              }
-              transition={{
-                rotate: {
-                  duration: shouldReduceMotion ? 0.01 : 0.28,
-                  ease: [0.22, 1, 0.36, 1],
-                },
-                scale: {
-                  duration: shouldReduceMotion ? 0.01 : 0.22,
-                  times: [0, 0.35, 1],
-                },
-              }}
-            >
-              <ArrowUpDown className="h-4 w-4" />
-            </motion.span>
-          </Button>
-          <CurrencySelect
-            label="To"
-            value={toCode}
-            onChange={setToCode}
-            assets={assets}
-          />
-        </div>
 
-        <div className="rounded-xl border border-border/70 bg-background/50 p-4">
+        <ConverterCardConvertedValue
-          <div className="flex items-center justify-between gap-2">
+          shouldReduceMotion={prefersReducedMotion}
-            <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          fromAsset={fromAsset}
-              Converted value
+          toAsset={toAsset}
-            </p>
+          pairTransitionKey={pairTransitionKey}
-            <Button
+          convertedDisplay={convertedDisplay}
-              type="button"
+          forAmountDisplay={forAmountDisplay}
-              variant="ghost"
+          isShareLinkCopied={isShareLinkCopied}
-              size="icon"
+          isCopied={isCopied}
-              onClick={() => void handleCopyConvertedValue()}
+          canCopyConvertedValue={convertedValue !== null && Boolean(toAsset)}
-              disabled={convertedValue === null || !toAsset}
+          onCopyShareLink={() => void handleCopyShareLink()}
-              className="h-7 w-7 text-muted-foreground hover:text-foreground"
+          onCopyConvertedValue={() => void handleCopyConvertedValue()}
-              aria-label={
+        />
-                isCopied
-                  ? "Converted value copied"
-                  : "Copy converted value to clipboard"
-              }
-            >
-              {isCopied ? (
-                <Check className="h-3.5 w-3.5 text-cyan-200" />
-              ) : (
-                <Copy className="h-3.5 w-3.5" />
-              )}
-            </Button>
-          </div>
-          {fromAsset && toAsset ? (
-            <AnimatePresence initial={false} mode="wait">
-              <motion.div
-                key={pairTransitionKey}
-                className="mt-2 flex items-center gap-2 text-xs text-muted-foreground"
-                initial={
-                  shouldReduceMotion
-                    ? false
-                    : { opacity: 0, y: 4, filter: "blur(2px)" }
-                }
-                animate={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 1, y: 0, filter: "blur(0px)" }
-                }
-                exit={
-                  shouldReduceMotion
-                    ? { opacity: 0 }
-                    : { opacity: 0, y: -4, filter: "blur(2px)" }
-                }
-                transition={{ duration: shouldReduceMotion ? 0.01 : 0.16 }}
-              >
-                <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
-                  <CurrencyIcon
-                    code={fromAsset.code}
-                    type={fromAsset.type}
-                    size="sm"
-                  />
-                  {fromAsset.code}
-                </span>
-                <span>to</span>
-                <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/60 px-2 py-1">
-                  <CurrencyIcon
-                    code={toAsset.code}
-                    type={toAsset.type}
-                    size="sm"
-                  />
-                  {toAsset.code}
-                </span>
-              </motion.div>
-            </AnimatePresence>
-          ) : null}
-          <p className="mt-2 break-all text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
-            <AnimatePresence initial={false} mode="wait">
-              <motion.span
-                key={convertedDisplay}
-                className="inline-block"
-                initial={
-                  shouldReduceMotion
-                    ? false
-                    : { opacity: 0, y: 6, filter: "blur(2px)" }
-                }
-                animate={
-                  shouldReduceMotion
-                    ? { opacity: 1 }
-                    : { opacity: 1, y: 0, filter: "blur(0px)" }
-                }
-                exit={
-                  shouldReduceMotion
-                    ? { opacity: 0 }
-                    : { opacity: 0, y: -6, filter: "blur(2px)" }
-                }
-                transition={{ duration: shouldReduceMotion ? 0.01 : 0.18 }}
-              >
-                {convertedDisplay}
-              </motion.span>
-            </AnimatePresence>
-          </p>
-          {fromAsset ? (
-            <p className="mt-2 text-sm text-muted-foreground">
-              for{" "}
-              {inputValidation.ok
-                ? formatAmount(inputValidation.value, fromAsset)
-                : "-"}{" "}
-              {fromAsset.code}
-            </p>
-          ) : null}
-        </div>
 
-        <div className="rounded-xl border border-border/70 bg-background/40 p-4">
+        <ConverterCardMultiConversion
-          <div className="flex items-center justify-between gap-2">
+          shouldReduceMotion={prefersReducedMotion}
-            <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          debouncedValidation={debouncedValidation}
-              Multi conversion
+          fromAsset={fromAsset}
-            </p>
+          multiConversions={multiConversions}
-            {fromAsset && debouncedValidation.ok ? (
+          isRatesLoading={isLoading}
-              <span className="text-xs text-muted-foreground">
+        />
-                for {formatAmount(debouncedValidation.value, fromAsset)} {fromAsset.code}
-              </span>
-            ) : null}
-          </div>
-
-          {!debouncedValidation.ok ? (
-            <p className="mt-3 text-sm text-red-300">{debouncedValidation.error}</p>
-          ) : null}
-
-          {debouncedValidation.ok && multiConversions.length === 0 ? (
-            <p className="mt-3 text-sm text-muted-foreground">
-              No additional assets available for multi conversion.
-            </p>
-          ) : null}
-
-          {debouncedValidation.ok && multiConversions.length > 0 ? (
-            <div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2">
-              {multiConversions.map(({ asset, value }) => (
-                <div
-                  key={asset.code}
-                  className="rounded-lg border border-border/60 bg-background/60 p-3"
-                >
-                  <div className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
-                    <CurrencyIcon code={asset.code} type={asset.type} size="sm" />
-                    {asset.code}
-                  </div>
-                  <p className="mt-1 text-base font-medium text-foreground">
-                    <AnimatePresence initial={false} mode="wait">
-                      <motion.span
-                        key={`${asset.code}-${formatAmount(value, asset)}`}
-                        className="inline-block"
-                        initial={
-                          shouldReduceMotion
-                            ? false
-                            : { opacity: 0, y: 4, filter: "blur(1px)" }
-                        }
-                        animate={
-                          shouldReduceMotion
-                            ? { opacity: 1 }
-                            : { opacity: 1, y: 0, filter: "blur(0px)" }
-                        }
-                        exit={
-                          shouldReduceMotion
-                            ? { opacity: 0 }
-                            : { opacity: 0, y: -4, filter: "blur(1px)" }
-                        }
-                        transition={{ duration: shouldReduceMotion ? 0.01 : 0.15 }}
-                      >
-                        {formatAmount(value, asset)} {asset.code}
-                      </motion.span>
-                    </AnimatePresence>
-                  </p>
-                </div>
-              ))}
-            </div>
-          ) : null}
-
-          {isLoading ? (
-            <div className="mt-3 inline-flex items-center gap-2 text-xs text-muted-foreground">
-              <Loader2 className="h-3.5 w-3.5 animate-spin" />
-              Updating multi conversion...
-            </div>
-          ) : null}
-        </div>
 
         <Separator className="bg-border/70" />
 
-        <div className="grid gap-3 text-sm text-muted-foreground sm:grid-cols-3">
+        <ConverterCardRatesSummary
-          <div>
+          fromAsset={fromAsset}
-            <p className="text-xs uppercase tracking-[0.12em]">Current rate</p>
+          toAsset={toAsset}
-            <p className="mt-1 text-sm text-foreground">
+          currentRate={currentRate}
-              {fromAsset && toAsset && currentRate
+          inverseRate={inverseRate}
-                ? `1 ${fromAsset.code} = ${currentRate} ${toAsset.code}`
+          updatedAt={displayUpdatedAt ?? data.updatedAt}
-                : "-"}
+        />
-            </p>
-          </div>
-          <div>
-            <p className="text-xs uppercase tracking-[0.12em]">Inverse rate</p>
-            <p className="mt-1 text-sm text-foreground">
-              {fromAsset && toAsset && inverseRate
-                ? `1 ${toAsset.code} = ${inverseRate} ${fromAsset.code}`
-                : "-"}
-            </p>
-          </div>
-          <div>
-            <p className="text-xs uppercase tracking-[0.12em]">Last updated</p>
-            <p className="mt-1 text-sm text-foreground">
-              {formatTimestamp(displayUpdatedAt ?? data.updatedAt)}
-            </p>
-          </div>
-        </div>
 
-        {marketAsset ? (
+        <ConverterCardMarketData
-          <div className="rounded-xl border border-border/70 bg-background/40 p-4">
+          marketAsset={marketAsset}
-            <div className="flex items-center justify-between gap-2">
+          marketData={marketData}
-              <p className="inline-flex items-center gap-1.5 text-xs uppercase tracking-[0.12em] text-muted-foreground">
+          marketError={marketError}
-                <BarChart3 className="h-3.5 w-3.5" />
+          isMarketLoading={isMarketLoading}
-                Market data
+          marketRange={marketRange}
-              </p>
+          marketRangeLabels={MARKET_RANGE_LABELS}
-              <span className="inline-flex items-center gap-1.5 rounded-full border border-border/70 bg-background/70 px-2 py-1 text-xs text-foreground">
+          marketRangeChangePct={marketRangeChangePct}
-                <CurrencyIcon
+          onMarketRangeChange={setMarketRange}
-                  code={marketAsset.code}
+        />
-                  type={marketAsset.type}
-                  size="sm"
-                />
-                {marketAsset.code}
-              </span>
-            </div>
-
-            <div className="mt-3 flex flex-wrap gap-1.5">
-              {MARKET_CHART_RANGES.map((range) => {
-                const isActive = marketRange === range;
-
-                return (
-                  <Button
-                    key={range}
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setMarketRange(range)}
-                    className={cn(
-                      "h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground hover:text-foreground",
-                      isActive ? "border-cyan-300/50 bg-cyan-500/15 text-cyan-100" : "",
-                    )}
-                    aria-pressed={isActive}
-                    aria-label={`Show ${MARKET_RANGE_LABELS[range]} chart`}
-                  >
-                    {MARKET_RANGE_LABELS[range]}
-                  </Button>
-                );
-              })}
-            </div>
-
-            {marketError && !marketData ? (
-              <p className="mt-3 text-xs text-red-300/90">
-                Unable to load market data right now.
-              </p>
-            ) : null}
-
-            <PriceSparkline
-              points={marketData?.priceHistory ?? []}
-              rangeLabel={MARKET_RANGE_LABELS[marketRange]}
-              isLoading={isMarketLoading && !marketData}
-              className="mt-3"
-            />
-
-            <div className="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
-              <div className="rounded-lg border border-border/60 bg-background/60 p-3">
-                <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
-                  Price
-                </p>
-                <p className="mt-1 text-base font-medium text-foreground">
-                  {marketData ? formatUsdPrice(marketData.priceUsd) : "-"}
-                </p>
-              </div>
-              <div className="rounded-lg border border-border/60 bg-background/60 p-3">
-                <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
-                  {MARKET_RANGE_LABELS[marketRange]}
-                </p>
-                <p
-                  className={cn(
-                    "mt-1 text-base font-medium text-foreground",
-                    marketRangeChangePct !== null
-                      ? marketRangeChangePct > 0
-                        ? "text-emerald-300"
-                        : marketRangeChangePct < 0
-                          ? "text-red-300"
-                          : "text-foreground"
-                      : "text-foreground",
-                  )}
-                >
-                  {marketData ? formatSignedPercent(marketRangeChangePct) : "-"}
-                </p>
-              </div>
-              <div className="rounded-lg border border-border/60 bg-background/60 p-3">
-                <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
-                  Market cap
-                </p>
-                <p className="mt-1 text-base font-medium text-foreground">
-                  {marketData ? formatUsdCompact(marketData.marketCapUsd) : "-"}
-                </p>
-              </div>
-              <div className="rounded-lg border border-border/60 bg-background/60 p-3">
-                <p className="text-xs uppercase tracking-[0.1em] text-muted-foreground">
-                  Volume (24h)
-                </p>
-                <p className="mt-1 text-base font-medium text-foreground">
-                  {marketData ? formatUsdCompact(marketData.volume24hUsd) : "-"}
-                </p>
-              </div>
-            </div>
-
-            <div className="mt-3 flex min-h-4 items-center justify-between gap-2 text-xs text-muted-foreground">
-              <span>
-                {marketData
-                  ? `Updated ${formatTimestamp(marketData.updatedAt)}`
-                  : isMarketLoading
-                    ? "Updating market data..."
-                    : ""}
-              </span>
-              {marketData ? <span>Source: {marketData.source}</span> : null}
-            </div>
-          </div>
-        ) : null}
 
         <div className="flex items-center justify-end">
           <Button

components/sections/hero.tsx

@@ -1,4 +1,17 @@
-import { Github } from "lucide-react";
+function GiteaIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" />
+    </svg>
+  );
+}
 
 export function Hero() {
   return (
@@ -11,14 +24,14 @@ export function Hero() {
             <span className="text-foreground">MIT License</span>
             <span className="text-muted-foreground/70">•</span>
             <a
-              href="https://github.com/zvspany/nexcurrency"
+              href="https://git.zvcloud.net/zv/nexcurrency"
               target="_blank"
               rel="noreferrer"
-              aria-label="View on GitHub"
+              aria-label="View on Gitea"
-              title="View on GitHub"
+              title="View on Gitea"
               className="inline-flex items-center text-cyan-200 transition-colors hover:text-cyan-100"
             >
-              <Github className="h-4 w-4" />
+              <GiteaIcon className="h-4 w-4" />
             </a>
           </div>
         </div>

hooks/use-pinned-pairs.ts

@@ -0,0 +1,196 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+export interface PinnedPair {
+  fromCode: string;
+  toCode: string;
+}
+
+const PINNED_PAIRS_STORAGE_KEY = "nexcurrency:pinned-pairs:v1";
+const CODE_PATTERN = /^[A-Z0-9]{2,12}$/;
+
+function normalizeCode(value: unknown): string | null {
+  if (typeof value !== "string") {
+    return null;
+  }
+
+  const normalized = value.trim().toUpperCase();
+
+  if (!CODE_PATTERN.test(normalized)) {
+    return null;
+  }
+
+  return normalized;
+}
+
+function normalizePair(value: unknown): PinnedPair | null {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  const record = value as Record<string, unknown>;
+  const fromCode = normalizeCode(record.fromCode);
+  const toCode = normalizeCode(record.toCode);
+
+  if (!fromCode || !toCode || fromCode === toCode) {
+    return null;
+  }
+
+  return { fromCode, toCode };
+}
+
+function toPairKey(pair: PinnedPair): string {
+  return `${pair.fromCode}:${pair.toCode}`;
+}
+
+function dedupeAndClampPairs(pairs: PinnedPair[], limit: number): PinnedPair[] {
+  const keys = new Set<string>();
+  const normalized: PinnedPair[] = [];
+
+  for (const pair of pairs) {
+    const key = toPairKey(pair);
+
+    if (keys.has(key)) {
+      continue;
+    }
+
+    keys.add(key);
+    normalized.push(pair);
+
+    if (normalized.length >= limit) {
+      break;
+    }
+  }
+
+  return normalized;
+}
+
+export function usePinnedPairs(limit = 6) {
+  const [pinnedPairs, setPinnedPairs] = useState<PinnedPair[]>([]);
+  const [isReady, setIsReady] = useState(false);
+  const isLimitReached = pinnedPairs.length >= limit;
+
+  useEffect(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      const raw = window.localStorage.getItem(PINNED_PAIRS_STORAGE_KEY);
+
+      if (!raw) {
+        setPinnedPairs([]);
+        setIsReady(true);
+        return;
+      }
+
+      const parsed = JSON.parse(raw) as unknown;
+      const parsedPairs = Array.isArray(parsed)
+        ? parsed.map(normalizePair).filter((pair): pair is PinnedPair => pair !== null)
+        : [];
+
+      setPinnedPairs(dedupeAndClampPairs(parsedPairs, limit));
+    } catch {
+      setPinnedPairs([]);
+    } finally {
+      setIsReady(true);
+    }
+  }, [limit]);
+
+  useEffect(() => {
+    if (!isReady || typeof window === "undefined") {
+      return;
+    }
+
+    try {
+      window.localStorage.setItem(
+        PINNED_PAIRS_STORAGE_KEY,
+        JSON.stringify(pinnedPairs),
+      );
+    } catch {
+      // Intentionally ignored: localStorage may be unavailable.
+    }
+  }, [isReady, pinnedPairs]);
+
+  const isPinnedPair = useCallback(
+    (pair: PinnedPair) => pinnedPairs.some((entry) => toPairKey(entry) === toPairKey(pair)),
+    [pinnedPairs],
+  );
+
+  const addPinnedPair = useCallback(
+    (pair: PinnedPair) => {
+      const normalized = normalizePair(pair);
+
+      if (!normalized) {
+        return;
+      }
+
+      setPinnedPairs((current) => {
+        const exists = current.some(
+          (entry) => toPairKey(entry) === toPairKey(normalized),
+        );
+
+        if (!exists && current.length >= limit) {
+          return current;
+        }
+
+        return dedupeAndClampPairs(
+          [
+            normalized,
+            ...current.filter((entry) => toPairKey(entry) !== toPairKey(normalized)),
+          ],
+          limit,
+        );
+      });
+    },
+    [limit],
+  );
+
+  const removePinnedPair = useCallback((pair: PinnedPair) => {
+    const normalized = normalizePair(pair);
+
+    if (!normalized) {
+      return;
+    }
+
+    setPinnedPairs((current) =>
+      current.filter((entry) => toPairKey(entry) !== toPairKey(normalized)),
+    );
+  }, []);
+
+  const togglePinnedPair = useCallback(
+    (pair: PinnedPair) => {
+      if (isPinnedPair(pair)) {
+        removePinnedPair(pair);
+        return;
+      }
+
+      addPinnedPair(pair);
+    },
+    [addPinnedPair, isPinnedPair, removePinnedPair],
+  );
+
+  return useMemo(
+    () => ({
+      pinnedPairs,
+      isReady,
+      isLimitReached,
+      isPinnedPair,
+      addPinnedPair,
+      removePinnedPair,
+      togglePinnedPair,
+      limit,
+    }),
+    [
+      pinnedPairs,
+      isReady,
+      isLimitReached,
+      isPinnedPair,
+      addPinnedPair,
+      removePinnedPair,
+      togglePinnedPair,
+      limit,
+    ],
+  );
+}

lib/share-link.ts

@@ -0,0 +1,84 @@
+import { validateAmount } from "@/lib/validation";
+
+interface QueryParamReader {
+  get(name: string): string | null;
+}
+
+interface ConversionShareParams {
+  amount?: string;
+  fromCode?: string;
+  toCode?: string;
+}
+
+const CODE_PATTERN = /^[A-Z0-9]{2,12}$/;
+
+function normalizeCurrencyCode(value: string | null): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  const normalized = value.trim().toUpperCase();
+
+  if (!CODE_PATTERN.test(normalized)) {
+    return undefined;
+  }
+
+  return normalized;
+}
+
+function normalizeAmount(value: string | null): string | undefined {
+  if (!value) {
+    return undefined;
+  }
+
+  const trimmed = value.trim().replace(/\s+/g, "");
+
+  if (!trimmed || trimmed.length > 64) {
+    return undefined;
+  }
+
+  return validateAmount(trimmed).ok ? trimmed : undefined;
+}
+
+export function parseConversionShareParams(
+  searchParams: QueryParamReader,
+): ConversionShareParams {
+  const amount = normalizeAmount(searchParams.get("amount"));
+  const fromCode = normalizeCurrencyCode(searchParams.get("from"));
+  let toCode = normalizeCurrencyCode(searchParams.get("to"));
+
+  if (fromCode && toCode && fromCode === toCode) {
+    toCode = undefined;
+  }
+
+  return {
+    amount,
+    fromCode,
+    toCode,
+  };
+}
+
+export function buildConversionShareUrl(input: {
+  origin: string;
+  pathname: string;
+  amount: string;
+  fromCode: string;
+  toCode: string;
+}): string {
+  const url = new URL(input.pathname, input.origin);
+  const amount = normalizeAmount(input.amount) ?? "1";
+  const fromCode = normalizeCurrencyCode(input.fromCode);
+  const toCode = normalizeCurrencyCode(input.toCode);
+
+  url.searchParams.set("amount", amount);
+
+  if (fromCode) {
+    url.searchParams.set("from", fromCode);
+  }
+
+  if (toCode && toCode !== fromCode) {
+    url.searchParams.set("to", toCode);
+  }
+
+  return url.toString();
+}

package-lock.json

@@ -377,9 +377,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -396,9 +393,6 @@
       "cpu": [
         "arm64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -415,9 +409,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -434,9 +425,6 @@
       "cpu": [
         "x64"
       ],
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1553,9 +1541,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1570,9 +1555,6 @@
         "arm64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1587,9 +1569,6 @@
         "ppc64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1604,9 +1583,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1621,9 +1597,6 @@
         "riscv64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1638,9 +1611,6 @@
         "s390x"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1655,9 +1625,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "glibc"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1672,9 +1639,6 @@
         "x64"
       ],
       "dev": true,
-      "libc": [
-        "musl"
-      ],
       "license": "MIT",
       "optional": true,
       "os": [