MempoolAlert.tsx raw

   1  import { TriangleAlertIcon } from "lucide-react";
   2  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   3  import { useInfo } from "src/hooks/useInfo";
   4  import { useMempoolApi } from "src/hooks/useMempoolApi";
   5  import { ExternalLinkButton } from "./ui/custom/external-link-button";
   6  
   7  export function MempoolAlert({ className }: { className?: string }) {
   8    const { data: info } = useInfo();
   9    const { data: recommendedFees } = useMempoolApi<{ fastestFee: number }>(
  10      "/v1/fees/recommended",
  11      true
  12    );
  13  
  14    const fees = {
  15      "EXTREMELY HIGH": 200,
  16      "very high": 150,
  17      high: 100,
  18      "moderately high": 50,
  19    };
  20  
  21    const fee = recommendedFees?.fastestFee;
  22    const matchedFee =
  23      fee != null && Object.entries(fees).find((entry) => fee >= entry[1]);
  24  
  25    if (!info || !fee || !matchedFee) {
  26      return null;
  27    }
  28  
  29    return (
  30      <Alert className={className}>
  31        <TriangleAlertIcon className="h-4 w-4" />
  32        <AlertTitle>
  33          Mempool Fees are currently{" "}
  34          <span className="font-semibold">{matchedFee[0]}</span>
  35        </AlertTitle>
  36        <AlertDescription>
  37          <p>Bitcoin transactions may be uneconomical at this time.</p>
  38          <div className="flex gap-2 mt-2">
  39            <ExternalLinkButton
  40              to="https://guides.getalby.com/user-guide/alby-hub/faq/what-to-do-during-times-of-high-onchain-fees"
  41              size={"sm"}
  42            >
  43              Learn more
  44            </ExternalLinkButton>
  45            <ExternalLinkButton
  46              to={info.mempoolUrl}
  47              size={"sm"}
  48              variant="secondary"
  49            >
  50              View fees on mempool
  51            </ExternalLinkButton>
  52          </div>
  53        </AlertDescription>
  54      </Alert>
  55    );
  56  }
  57