OnchainFeesWidget.tsx raw

   1  import {
   2    Card,
   3    CardContent,
   4    CardHeader,
   5    CardTitle,
   6  } from "src/components/ui/card";
   7  import { useMempoolApi } from "src/hooks/useMempoolApi";
   8  
   9  export function OnchainFeesWidget() {
  10    const { data: recommendedFees } = useMempoolApi<{
  11      fastestFee: number;
  12      halfHourFee: number;
  13      economyFee: number;
  14      minimumFee: number;
  15    }>("/v1/fees/recommended");
  16  
  17    if (!recommendedFees) {
  18      return null;
  19    }
  20  
  21    const entries = [
  22      {
  23        title: "No priority",
  24        value: recommendedFees.minimumFee,
  25      },
  26      {
  27        title: "Low priority",
  28        value: recommendedFees.economyFee,
  29      },
  30      {
  31        title: "Medium priority",
  32        value: recommendedFees.halfHourFee,
  33      },
  34      {
  35        title: "High priority",
  36        value: recommendedFees.fastestFee,
  37      },
  38    ];
  39  
  40    return (
  41      <Card>
  42        <CardHeader>
  43          <CardTitle>On-Chain Fees</CardTitle>
  44        </CardHeader>
  45        <CardContent className="grid grid-cols-2 gap-6">
  46          {entries.map((entry) => (
  47            <div key={entry.title}>
  48              <p className="text-muted-foreground text-xs">{entry.title}</p>
  49              <p className="text-xl font-semibold">{entry.value} sat/vB</p>
  50            </div>
  51          ))}
  52        </CardContent>
  53      </Card>
  54    );
  55  }
  56