1159 lines
39 KiB
TypeScript
1159 lines
39 KiB
TypeScript
"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 { 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 {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
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 { useMarketRates } from "@/hooks/use-market-rates";
|
|
import {
|
|
formatAmount,
|
|
formatInverseRate,
|
|
formatRate,
|
|
formatSignedPercent,
|
|
formatTimestamp,
|
|
formatUsdCompact,
|
|
formatUsdPrice,
|
|
} from "@/lib/format";
|
|
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;
|
|
forcedAmount?: string;
|
|
onPairChange?: (fromCode: string, toCode: string) => void;
|
|
multiConversionCodes?: string[];
|
|
}
|
|
|
|
async function copyTextToClipboard(text: string): Promise<boolean> {
|
|
if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
return true;
|
|
} catch {
|
|
// Fallback below.
|
|
}
|
|
}
|
|
|
|
if (typeof document === "undefined") {
|
|
return false;
|
|
}
|
|
|
|
const textArea = document.createElement("textarea");
|
|
textArea.value = text;
|
|
textArea.setAttribute("readonly", "");
|
|
textArea.style.position = "fixed";
|
|
textArea.style.opacity = "0";
|
|
textArea.style.pointerEvents = "none";
|
|
textArea.style.left = "-9999px";
|
|
document.body.appendChild(textArea);
|
|
textArea.select();
|
|
textArea.setSelectionRange(0, textArea.value.length);
|
|
|
|
try {
|
|
return document.execCommand("copy");
|
|
} finally {
|
|
document.body.removeChild(textArea);
|
|
}
|
|
}
|
|
|
|
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,
|
|
forcedAmount,
|
|
onPairChange,
|
|
multiConversionCodes,
|
|
}: ConverterCardProps) {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
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);
|
|
|
|
const assets = useMemo(() => data?.assets ?? [], [data]);
|
|
const rateMap = useMemo(() => buildRateMap(assets), [assets]);
|
|
|
|
useEffect(() => {
|
|
if (!assets.length) {
|
|
return;
|
|
}
|
|
|
|
if (!rateMap.has(fromCode)) {
|
|
setFromCode(rateMap.has(DEFAULT_FROM) ? DEFAULT_FROM : assets[0].code);
|
|
}
|
|
|
|
if (!rateMap.has(toCode)) {
|
|
const fallback = rateMap.has(DEFAULT_TO)
|
|
? DEFAULT_TO
|
|
: (assets.find((asset) => asset.code !== fromCode)?.code ??
|
|
assets[0].code);
|
|
|
|
setToCode(fallback);
|
|
}
|
|
}, [assets, fromCode, toCode, rateMap]);
|
|
|
|
useEffect(() => {
|
|
if (!assets.length) {
|
|
return;
|
|
}
|
|
|
|
if (forcedFromCode && rateMap.has(forcedFromCode)) {
|
|
setFromCode(forcedFromCode);
|
|
}
|
|
|
|
if (forcedToCode && rateMap.has(forcedToCode)) {
|
|
setToCode(forcedToCode);
|
|
}
|
|
}, [assets, forcedFromCode, forcedToCode, rateMap]);
|
|
|
|
useEffect(() => {
|
|
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);
|
|
|
|
const fromAsset = rateMap.get(fromCode);
|
|
const toAsset = rateMap.get(toCode);
|
|
|
|
const convertedValue = useMemo(() => {
|
|
if (!fromAsset || !toAsset || !debouncedValidation.ok) {
|
|
return null;
|
|
}
|
|
|
|
return convertAmount(debouncedValidation.value, fromAsset, toAsset);
|
|
}, [fromAsset, toAsset, debouncedValidation]);
|
|
|
|
const resolvedMultiConversionCodes = useMemo(() => {
|
|
const configuredCodes =
|
|
multiConversionCodes && multiConversionCodes.length > 0
|
|
? multiConversionCodes
|
|
: [...DEFAULT_MULTI_CONVERSION_CODES];
|
|
|
|
return Array.from(
|
|
new Set(
|
|
[toCode, ...configuredCodes]
|
|
.map((code) => code.trim().toUpperCase())
|
|
.filter(Boolean),
|
|
),
|
|
).slice(0, MAX_MULTI_CONVERSIONS);
|
|
}, [multiConversionCodes, toCode]);
|
|
|
|
const multiConversions = useMemo(() => {
|
|
if (!fromAsset || !debouncedValidation.ok) {
|
|
return [];
|
|
}
|
|
|
|
return resolvedMultiConversionCodes
|
|
.map((code) => rateMap.get(code))
|
|
.filter((asset): asset is NonNullable<typeof asset> => Boolean(asset))
|
|
.map((asset) => ({
|
|
asset,
|
|
value: convertAmount(debouncedValidation.value, fromAsset, asset),
|
|
}));
|
|
}, [fromAsset, debouncedValidation, resolvedMultiConversionCodes, rateMap]);
|
|
|
|
const currentRate = useMemo(() => {
|
|
if (!fromAsset || !toAsset) {
|
|
return null;
|
|
}
|
|
|
|
return formatRate(fromAsset, toAsset);
|
|
}, [fromAsset, toAsset]);
|
|
|
|
const inverseRate = useMemo(() => {
|
|
if (!fromAsset || !toAsset) {
|
|
return null;
|
|
}
|
|
|
|
return formatInverseRate(fromAsset, toAsset);
|
|
}, [fromAsset, toAsset]);
|
|
|
|
const handleSwap = () => {
|
|
setSwapAnimationStep((current) => current + 1);
|
|
setFromCode(toCode);
|
|
setToCode(fromCode);
|
|
};
|
|
|
|
const marketAsset = useMemo(() => {
|
|
if (toAsset?.type === "crypto") {
|
|
return toAsset;
|
|
}
|
|
|
|
if (fromAsset?.type === "crypto") {
|
|
return fromAsset;
|
|
}
|
|
|
|
return null;
|
|
}, [fromAsset, toAsset]);
|
|
|
|
const {
|
|
data: marketData,
|
|
error: marketError,
|
|
isLoading: isMarketLoading,
|
|
refresh: refreshMarket,
|
|
} = useCryptoMarket(marketAsset?.code ?? null, marketRange);
|
|
|
|
const handleCopyConvertedValue = async () => {
|
|
if (convertedValue === null || !toAsset) {
|
|
return;
|
|
}
|
|
|
|
const text = `${formatAmount(convertedValue, toAsset)} ${toAsset.code}`;
|
|
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setIsCopied(true);
|
|
window.setTimeout(() => setIsCopied(false), 1400);
|
|
} catch {
|
|
setIsCopied(false);
|
|
}
|
|
};
|
|
|
|
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;
|
|
}
|
|
|
|
const timestamps = [new Date(data.updatedAt).getTime()];
|
|
|
|
if (marketData?.updatedAt) {
|
|
timestamps.push(new Date(marketData.updatedAt).getTime());
|
|
}
|
|
|
|
const latest = Math.max(
|
|
...timestamps.filter((timestamp) => Number.isFinite(timestamp)),
|
|
);
|
|
|
|
return Number.isFinite(latest) ? new Date(latest).toISOString() : data.updatedAt;
|
|
}, [data, marketData?.updatedAt]);
|
|
|
|
const marketRangeChangePct = useMemo(() => {
|
|
if (!marketData) {
|
|
return null;
|
|
}
|
|
|
|
const points = marketData.priceHistory;
|
|
|
|
if (points.length >= 2) {
|
|
const first = points[0]?.priceUsd;
|
|
const last = points[points.length - 1]?.priceUsd;
|
|
|
|
if (
|
|
typeof first === "number" &&
|
|
typeof last === "number" &&
|
|
Number.isFinite(first) &&
|
|
Number.isFinite(last) &&
|
|
first > 0
|
|
) {
|
|
return ((last - first) / first) * 100;
|
|
}
|
|
}
|
|
|
|
if (marketRange === "24h") {
|
|
return marketData.change24hPct;
|
|
}
|
|
|
|
return null;
|
|
}, [marketData, marketRange]);
|
|
|
|
const amountPrefix = getDisplaySymbol(fromAsset);
|
|
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: { fromCode: string; toCode: string };
|
|
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()} />;
|
|
}
|
|
|
|
if (!data || assets.length === 0) {
|
|
return <EmptyState />;
|
|
}
|
|
|
|
const convertedDisplay =
|
|
convertedValue !== null && toAsset
|
|
? `${formatAmount(convertedValue, toAsset)} ${toAsset.code}`
|
|
: "--";
|
|
|
|
const amountError = inputValidation.ok ? null : inputValidation.error;
|
|
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>
|
|
|
|
<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>
|
|
</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;
|
|
|
|
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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
{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>
|
|
|
|
<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>
|
|
|
|
{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}
|
|
|
|
<div className="flex items-center justify-end">
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
void refresh();
|
|
void refreshMarket();
|
|
}}
|
|
className="text-muted-foreground"
|
|
>
|
|
<RefreshCcw className="mr-2 h-4 w-4" />
|
|
Refresh rates
|
|
</Button>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-end gap-2 text-xs text-muted-foreground">
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
Updating market rates...
|
|
</div>
|
|
) : null}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|