React Currency Converter for Live Toman Rates, with a Secure Backend Proxy

// app/api/rates/route.ts
export const revalidate = 60; // cache for 60 s

export async function GET() {
  const r = await fetch(
    "https://api.ezrate.me/v1/rates?symbols=usd,eur,aed,try,usdt&lang=en",
    { headers: { "X-API-Key": process.env.EZRATE_KEY! }, next: { revalidate: 60 } },
  );
  if (!r.ok) return new Response("upstream error", { status: 502 });
  const { data, meta } = await r.json();
  const slim = data.map((x: any) => ({ s: x.symbol, n: x.name, b: x.buy, v: x.sell, t: x.updated_at }));
  return Response.json({ rates: slim, as_of: meta.as_of, unit: meta.quote });
}

// useRates.ts
import { useEffect, useState } from "react";

export type Rate = { s: string; n: string; b: number; v: number; t: string };
type State = { rates: Rate[]; asOf?: string; unit?: string; error?: string };

export function useRates(): State {
  const [st, setSt] = useState<State>({ rates: [] });
  useEffect(() => {
    let alive = true;
    const load = () => fetch("/api/rates").then(r => r.json())
      .then(d => alive && setSt({ rates: d.rates, asOf: d.as_of, unit: d.unit }))
      .catch(() => alive && setSt(s => ({ ...s, error: "Rates unavailable" })));
    load();
    const id = setInterval(load, 60_000);
    return () => { alive = false; clearInterval(id); };
  }, []);
  return st;
}

// Converter.tsx
import { useMemo, useState } from "react";
import { useRates } from "./useRates";

const fmt = (n: number, fa: boolean) =>
  new Intl.NumberFormat(fa ? "fa-IR" : "en-US", { maximumFractionDigits: 2 }).format(n);

export default function Converter({ fa = false }: { fa?: boolean }) {
  const { rates, asOf, unit, error } = useRates();
  const [sym, setSym] = useState("usd");
  const [amount, setAmount] = useState("100");
  const [side, setSide] = useState<"buy" | "sell">("sell");
  const r = rates.find(x => x.s === sym);
  const toman = useMemo(() => (r ? Number(amount || 0) * (side === "sell" ? r.v : r.b) : 0), [r, amount, side]);

  if (error) return <p role="alert">{error}</p>;
  return (
    <div className="ez-conv" dir={fa ? "rtl" : "ltr"}>
      <input inputMode="decimal" value={amount} onChange={e => setAmount(e.target.value.replace(/[^\d.]/g, ""))} />
      <select value={sym} onChange={e => setSym(e.target.value)}>
        {rates.map(x => <option key={x.s} value={x.s}>{x.n}</option>)}
      </select>
      <select value={side} onChange={e => setSide(e.target.value as any)}>
        <option value="sell">I buy (sell rate)</option>
        <option value="buy">I sell (buy rate)</option>
      </select>
      <output dir="ltr">{fmt(toman, fa)} {unit === "IRR" ? "Rial" : "Toman"}</output>
      {asOf && <small>Updated {new Date(asOf).toLocaleTimeString()}</small>}
    </div>
  );
}