> ## Documentation Index
> Fetch the complete documentation index at: https://blackswan-23965643.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Real-Time BlackSwan Credit Dashboard in React

> Learn how to build a complete credit dashboard displaying trust score, current APR, and loan history using the BlackSwan JavaScript SDK in React.

The BlackSwan credit dashboard brings together trust score, current APR, and loan history into a single view. This tutorial walks you through fetching that data from the BlackSwan SDK and rendering it in a React component.

## Prerequisites

Install the BlackSwan JavaScript SDK:

```bash theme={null}
npm install blackswan-sdk
```

## Overview

This tutorial shows how to build a credit dashboard displaying trust score, APR, and loan history.

## Using React

The example below creates a `CreditDashboard` component that fetches data in parallel using `getCreditDashboard` and `getCreditHistory`, then displays the results. APR values from the SDK are in basis points, so divide by `1000` to get a percentage.

```tsx theme={null}
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>
  );
}
```

## Understanding APR Values

The SDK returns APR as an integer in basis points. For example, a raw value of `142` represents `0.142%`, calculated as `142 / 1000`. Always divide by `1000` when displaying APR to your users.