AnchorReserveAlert.tsx raw

   1  import { AlertTriangleIcon } from "lucide-react";
   2  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   3  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   4  import { useBalances } from "src/hooks/useBalances";
   5  import { useChannels } from "src/hooks/useChannels";
   6  
   7  export function AnchorReserveAlert({
   8    amountSat,
   9    className,
  10  }: {
  11    amountSat: number;
  12    className?: string;
  13  }) {
  14    const { data: balances } = useBalances();
  15    const { data: channels } = useChannels();
  16  
  17    if (!balances || !channels) {
  18      return null;
  19    }
  20  
  21    const showAlert =
  22      amountSat &&
  23      !!channels.length &&
  24      +amountSat > balances.onchain.spendableSat - channels.length * 25000;
  25  
  26    if (!showAlert) {
  27      return null;
  28    }
  29  
  30    return (
  31      <Alert className={className} variant="warning">
  32        <AlertTriangleIcon className="h-4 w-4" />
  33        <AlertTitle>Channel Anchor Reserves will be depleted</AlertTitle>
  34        <AlertDescription>
  35          <p>
  36            You have channels open and by spending your entire on-chain balance
  37            including your anchor reserves may put your node at risk of unable to
  38            reclaim funds in your channel after a force-closure. To prevent this,
  39            set aside at least{" "}
  40            <FormattedBitcoinAmount amountMsat={channels.length * 25000 * 1000} />{" "}
  41            on-chain.
  42          </p>
  43        </AlertDescription>
  44      </Alert>
  45    );
  46  }
  47