zv/nexcurrency
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(converter): split converter card into modular section components

Browse Source
This commit is contained in:
zvspany
2026-03-30 19:26:18 +02:00
parent a45393ac00
commit 24f21d25bc
11 changed files with 1075 additions and 755 deletions
Download Patch File Download Diff File Expand all files Collapse all files

886
components/converter/converter-card.tsx
View File

@@ -1,73 +1,45 @@
"use client";
import { useEffect, useMemo, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import {
AlertTriangle,
ArrowUpDown,
BarChart3,
Check,
Copy,
Link2,
Loader2,
MoveRight,
RefreshCcw,
Star,
X,
} from "lucide-react";
import { useReducedMotion } from "framer-motion";
import { AlertTriangle, Loader2, RefreshCcw } from "lucide-react";
import { CurrencyIcon } from "@/components/converter/currency-icon";
import { PriceSparkline } from "@/components/converter/price-sparkline";
import { CurrencySelect } from "@/components/converter/currency-select";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ConverterCardAmountInput } from "@/components/converter/converter-card-amount-input";
import { ConverterCardConvertedValue } from "@/components/converter/converter-card-converted-value";
import { ConverterCardHeader } from "@/components/converter/converter-card-header";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
DEFAULT_FROM,
DEFAULT_MULTI_CONVERSION_CODES,
DEFAULT_TO,
MARKET_RANGE_LABELS,
MAX_MULTI_CONVERSIONS,
MAX_PINNED_PAIRS,
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 { usePinnedPairs } from "@/hooks/use-pinned-pairs";
import { getDisplaySymbol } from "@/lib/currency-display";
import {
MARKET_CHART_RANGES,
type MarketChartRange,
} from "@/lib/market";
import { type PinnedPair, usePinnedPairs } from "@/hooks/use-pinned-pairs";
import { useMarketRates } from "@/hooks/use-market-rates";
import {
formatAmount,
formatInverseRate,
formatRate,
formatSignedPercent,
formatTimestamp,
formatUsdCompact,
formatUsdPrice,
} from "@/lib/format";
import { getDisplaySymbol } from "@/lib/currency-display";
import { formatAmount, formatInverseRate, formatRate } from "@/lib/format";
import { type MarketChartRange } from "@/lib/market";
import { buildRateMap, convertAmount } from "@/lib/rates";
import { buildConversionShareUrl } from "@/lib/share-link";
import { cn } from "@/lib/utils";
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 MAX_PINNED_PAIRS = 6;
const MARKET_RANGE_LABELS: Record<MarketChartRange, string> = {
"24h": "24h",
"7d": "7d",
"30d": "30d",
"1y": "1y",
all: "all",
};
interface ConverterCardProps {
forcedFromCode?: string;
forcedToCode?: string;
@@ -108,73 +80,6 @@ async function copyTextToClipboard(text: string): Promise<boolean> {
}
}
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>
);
}
function ErrorState({
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>
);
}
function EmptyState() {
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>
);
}
export function ConverterCard({
forcedFromCode,
forcedToCode,
@@ -183,6 +88,7 @@ export function ConverterCard({
multiConversionCodes,
}: ConverterCardProps) {
const shouldReduceMotion = useReducedMotion();
const prefersReducedMotion = shouldReduceMotion ?? false;
const { data, error, isLoading, refresh } = useMarketRates();
const [amountInput, setAmountInput] = useState("1");
@@ -193,6 +99,7 @@ export function ConverterCard({
const [marketRange, setMarketRange] = useState<MarketChartRange>("24h");
const [swapAnimationStep, setSwapAnimationStep] = useState(0);
const [pinStarAnimationStep, setPinStarAnimationStep] = useState(0);
const {
pinnedPairs,
isReady: isPinnedPairsReady,
@@ -219,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[0].code);
: (assets.find((asset) => asset.code !== fromCode)?.code ?? assets[0].code);
setToCode(fallback);
}
@@ -428,17 +334,25 @@ export function ConverterCard({
}, [marketData, marketRange]);
const amountPrefix = getDisplaySymbol(fromAsset);
const currentPair = useMemo(
() => ({ fromCode, toCode }),
[fromCode, toCode],
);
const amountInputPaddingLeft = useMemo(() => {
if (!amountPrefix) {
return undefined;
}
const prefixWidthCh = Math.max(amountPrefix.length, 1);
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
@@ -460,32 +374,24 @@ export function ConverterCard({
(
item,
): item is {
pair: { fromCode: string; toCode: string };
pair: PinnedPair;
fromAsset: (typeof assets)[number];
toAsset: (typeof assets)[number];
} => Boolean(item),
),
[pinnedPairs, rateMap],
);
const amountInputPaddingLeft = useMemo(() => {
if (!amountPrefix) {
return undefined;
}
const prefixWidthCh = Math.max(amountPrefix.length, 1);
return `calc(1rem + ${prefixWidthCh}ch + 0.85rem)`;
}, [amountPrefix]);
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 =
@@ -494,641 +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">
<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"
>
{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>
<ConverterCardHeader
fiatSource={data.sources.fiat}
cryptoSource={data.sources.crypto}
/>
<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>
Using last successful data. Latest refresh failed: {error}
</span>
<span>Using last successful data. Latest refresh failed: {error}</span>
</div>
) : null}
<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) => 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;
<ConverterCardAmountInput
amountInput={amountInput}
amountPrefix={amountPrefix}
amountInputPaddingLeft={amountInputPaddingLeft}
amountError={amountError}
quickAmounts={QUICK_AMOUNTS}
activeQuickAmount={activeQuickAmount}
onAmountChange={setAmountInput}
onQuickAmountSelect={(value) => setAmountInput(String(value))}
/>
return (
<Button
key={quickAmount}
type="button"
variant="outline"
size="sm"
onClick={() => setAmountInput(String(quickAmount))}
className={cn(
"h-7 rounded-full border-border/70 px-3 text-xs text-muted-foreground transition-colors hover:text-foreground",
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>
<ConverterCardPairSelection
assets={assets}
fromCode={fromCode}
toCode={toCode}
shouldReduceMotion={prefersReducedMotion}
swapAnimationStep={swapAnimationStep}
onFromChange={setFromCode}
onToChange={setToCode}
onSwap={handleSwap}
/>
<div className="grid gap-3 sm:grid-cols-[1fr_auto_1fr] sm:items-end">
<CurrencySelect
label="From"
value={fromCode}
onChange={setFromCode}
assets={assets}
/>
<Button
type="button"
size="icon"
variant="outline"
className="mx-auto mb-0.5 rounded-full border-border/70 bg-background/50"
onClick={handleSwap}
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={setToCode}
assets={assets}
/>
</div>
<ConverterCardPinnedPairs
shouldReduceMotion={prefersReducedMotion}
isCurrentPairPinned={isCurrentPairPinned}
hasReachedPinnedPairsLimit={hasReachedPinnedPairsLimit}
pinStarAnimationStep={pinStarAnimationStep}
pinnedPairItems={pinnedPairItems}
fromCode={fromCode}
toCode={toCode}
isPinnedPairsReady={isPinnedPairsReady}
maxPinnedPairs={MAX_PINNED_PAIRS}
onTogglePinnedCurrentPair={handleTogglePinnedCurrentPair}
onSelectPinnedPair={(pair) => {
setFromCode(pair.fromCode);
setToCode(pair.toCode);
}}
onRemovePinnedPair={removePinnedPair}
/>
<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={handleTogglePinnedCurrentPair}
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>
<ConverterCardConvertedValue
shouldReduceMotion={prefersReducedMotion}
fromAsset={fromAsset}
toAsset={toAsset}
pairTransitionKey={pairTransitionKey}
convertedDisplay={convertedDisplay}
forAmountDisplay={forAmountDisplay}
isShareLinkCopied={isShareLinkCopied}
isCopied={isCopied}
canCopyConvertedValue={convertedValue !== null && Boolean(toAsset)}
onCopyShareLink={() => void handleCopyShareLink()}
onCopyConvertedValue={() => void handleCopyConvertedValue()}
/>
{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={() => {
setFromCode(pair.fromCode);
setToCode(pair.toCode);
}}
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={() => removePinnedPair(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 ({MAX_PINNED_PAIRS}). Remove one to add a new pair.
</p>
) : null}
</div>
<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={() => void handleCopyShareLink()}
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={() => void handleCopyConvertedValue()}
disabled={convertedValue === null || !toAsset}
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{" "}
{inputValidation.ok
? formatAmount(inputValidation.value, fromAsset)
: "-"}{" "}
{fromAsset.code}
</p>
) : null}
</div>
<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}
{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>
<ConverterCardMultiConversion
shouldReduceMotion={prefersReducedMotion}
debouncedValidation={debouncedValidation}
fromAsset={fromAsset}
multiConversions={multiConversions}
isRatesLoading={isLoading}
/>
<Separator className="bg-border/70" />
<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(displayUpdatedAt ?? data.updatedAt)}
</p>
</div>
</div>
<ConverterCardRatesSummary
fromAsset={fromAsset}
toAsset={toAsset}
currentRate={currentRate}
inverseRate={inverseRate}
updatedAt={displayUpdatedAt ?? data.updatedAt}
/>
{marketAsset ? (
<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={() => 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}
<ConverterCardMarketData
marketAsset={marketAsset}
marketData={marketData}
marketError={marketError}
isMarketLoading={isMarketLoading}
marketRange={marketRange}
marketRangeLabels={MARKET_RANGE_LABELS}
marketRangeChangePct={marketRangeChangePct}
onMarketRangeChange={setMarketRange}
/>
<div className="flex items-center justify-end">
<Button