Build a Real-Time BlackSwan Credit Dashboard in React

npm install blackswan-sdk

import { BlackSwanClient } from "blackswan-sdk";
import { useEffect, useState } from "react";

const client = new BlackSwanClient({
  network: "amoy",
  rpcUrl: process.env.NEXT_PUBLIC_RPC_URL!
});

export function CreditDashboard({ wallet }: { wallet: string }) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const [dashboard, history] = await Promise.all([
          client.getCreditDashboard(wallet),
          client.getCreditHistory(wallet)
        ]);
        setData({ dashboard, history });
      } catch (err) {
        setError(err instanceof Error ? err : new Error("Failed to load credit data"));
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [wallet]);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h2>Trust Score: {data.dashboard.trustRatio}</h2>
      <p>Tier: {data.dashboard.trustTierScore}</p>
      <p>APR: {(data.dashboard.currentApr / 1000).toFixed(3)}%</p>
      <p>Loans: {data.history.successfulLoans} successful</p>
      <p>Defaults: {data.history.defaults}</p>
    </div>
  );
}