Embed a compliance badge

// server: GET /api/compliance/:symbol
// An instrument id is a ticker with an optional exchange prefix:
// AAPL, BRK.B, LON:SGLN, NSE:M&M.
const INSTRUMENT_ID = /^[A-Za-z0-9][A-Za-z0-9.:&*\/-]{0,19}$/;

app.get("/api/compliance/:symbol", async (req, res) => {
  const { symbol } = req.params;
  // Refuse anything else: a symbol forwarded as sent (`..%2Fme`) would let
  // anyone call other endpoints with your key.
  if (!INSTRUMENT_ID.test(symbol)) {
    return res.status(400).json({ error: { code: "bad_request", message: "Invalid symbol." } });
  }
  const response = await fetch(
    `https://api.halal.sh/v1/instruments/${encodeURIComponent(symbol)}/compliance`,
    { headers: { "X-API-Key": process.env.HALALSH_API_KEY } }
  );
  const json = await response.json();
  res.json(json);
});

{
  "data": {
    "determination": { "status": "compliant" },
    "screens": {
      "debt_to_market_cap": { "result": "pass", "value": 0.037, "threshold": 0.30 },
      "cash_to_market_cap": { "result": "pass", "value": 0.221, "threshold": 0.30 },
      "prohibited_revenue": { "result": "pass", "value": 0.012, "threshold": 0.05 }
    }
  }
}

import { useEffect, useState } from "react";

const BADGE = {
  "compliant": { label: "Compliant", className: "bg-emerald-100 text-emerald-800" },
  "non-compliant": { label: "Non-compliant", className: "bg-rose-100 text-rose-800" },
  "pending": { label: "Pending", className: "bg-gray-100 text-gray-800" },
};

function ComplianceBadge({ symbol }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Hits your backend proxy, never api.halal.sh directly.
    fetch(`/api/compliance/${encodeURIComponent(symbol)}`)
      .then((res) => res.json())
      .then(({ data }) => setData(data));
  }, [symbol]);

  if (!data) return null;

  // A status this client does not know yet reads as pending.
  const { label, className } = BADGE[data.determination.status] ?? BADGE.pending;

  return (
    <span className="inline-flex items-center gap-2">
      <span className={`px-2 py-1 rounded-full text-sm font-medium ${className}`}>
        {label}
      </span>
      <a href="https://halal.sh" className="text-xs text-gray-500 underline">
        Screening by halal.sh
      </a>
    </span>
  );
}

function ComplianceDetail({ data }) {
  const { screens, purification } = data;

  const rows = [
    { label: "Debt / market cap", screen: screens.debt_to_market_cap },
    { label: "Cash / market cap", screen: screens.cash_to_market_cap },
    { label: "Prohibited revenue", screen: screens.prohibited_revenue },
  ];

  return (
    <div>
      <h3>Screening results</h3>
      <ul>
        {rows.map(({ label, screen }) => (
          <li key={label}>
            {label}:{" "}
            {screen.result === "not_applicable"
              ? "Not applicable"
              : `${(screen.value * 100).toFixed(1)}% (limit ${(screen.threshold * 100).toFixed(0)}%), ${screen.result === "pass" ? "Pass" : "Fail"}`}
          </li>
        ))}
      </ul>

      {purification?.required && (
        <p>Prohibited income: {purification.percentage}% of revenue. Purification applies per share.</p>
      )}
    </div>
  );
}