ChannelWarning.tsx raw

   1  import { AlertTriangleIcon } from "lucide-react";
   2  import ExternalLink from "src/components/ExternalLink";
   3  import {
   4    Tooltip,
   5    TooltipContent,
   6    TooltipProvider,
   7    TooltipTrigger,
   8  } from "src/components/ui/tooltip";
   9  import { Channel } from "src/types";
  10  
  11  type ChannelWarningProps = {
  12    channel: Channel;
  13  };
  14  
  15  export function ChannelWarning({ channel }: ChannelWarningProps) {
  16    const capacityMsat = channel.localBalanceMsat + channel.remoteBalanceMsat;
  17    let channelWarning = null;
  18  
  19    if (channel.error) {
  20      channelWarning = <> {channel.error} </>;
  21    } else if (channel.status === "opening") {
  22      channelWarning = (
  23        <>
  24          {`Channel is currently being opened (${channel.confirmations} of ${channel.confirmationsRequired} confirmations). Once the required confirmation are reached, you will be able to send and receive on this channel.`}{" "}
  25        </>
  26      );
  27    } else if (channel.status === "offline") {
  28      channelWarning = (
  29        <>
  30          This channel is currently offline and cannot be used to send or receive
  31          payments.{" "}
  32          <ExternalLink
  33            to="https://guides.getalby.com/user-guide/alby-hub/faq/why-is-my-channel-offline-and-what-should-i-do-now"
  34            className="underline"
  35          >
  36            Learn more here.
  37          </ExternalLink>
  38        </>
  39      );
  40    } else if (
  41      channel.status === "online" &&
  42      channel.localSpendableBalanceMsat > capacityMsat * 0.9
  43    ) {
  44      channelWarning = (
  45        <>
  46          Receiving capacity low. You may have trouble receiving payments through
  47          this channel.{" "}
  48          <ExternalLink
  49            to="https://guides.getalby.com/user-guide/alby-hub/node#what-is-receiving-capacity-and-spending-balance-in-lightning-terminology"
  50            className="underline"
  51          >
  52            Learn more here.
  53          </ExternalLink>
  54        </>
  55      );
  56    }
  57  
  58    if (!channelWarning) {
  59      return null;
  60    }
  61  
  62    return (
  63      <TooltipProvider>
  64        <Tooltip>
  65          <TooltipTrigger>
  66            <AlertTriangleIcon className="size-4" />
  67          </TooltipTrigger>
  68          <TooltipContent>{channelWarning}</TooltipContent>
  69        </Tooltip>
  70      </TooltipProvider>
  71    );
  72  }
  73