LDKChannelWithoutPeerAlert.tsx raw

   1  import { AlertTriangleIcon, ExternalLinkIcon } from "lucide-react";
   2  import { Link } from "react-router";
   3  import ExternalLink from "src/components/ExternalLink";
   4  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   5  import { useChannels } from "src/hooks/useChannels";
   6  import { useInfo } from "src/hooks/useInfo";
   7  import { useNodeDetails } from "src/hooks/useNodeDetails";
   8  import { usePeers } from "src/hooks/usePeers";
   9  import { Channel } from "src/types";
  10  
  11  export function LDKChannelWithoutPeerAlert() {
  12    const { data: info } = useInfo();
  13    const { data: peers } = usePeers();
  14    const { data: channels } = useChannels();
  15  
  16    if (info?.backendType !== "LDK") {
  17      // LND does not show disconnected peers
  18      return null;
  19    }
  20  
  21    const channelWithoutPeer = channels?.find(
  22      (channel) => !peers?.some((peer) => peer.nodeId === channel.remotePubkey)
  23    );
  24    if (!channelWithoutPeer) {
  25      return null;
  26    }
  27  
  28    return <ChannelWithoutPeerAlertInternal channel={channelWithoutPeer} />;
  29  }
  30  
  31  function ChannelWithoutPeerAlertInternal({ channel }: { channel: Channel }) {
  32    const { data: nodeDetails } = useNodeDetails(channel.remotePubkey);
  33    return (
  34      <Alert>
  35        <AlertTriangleIcon className="h-4 w-4" />
  36        <AlertTitle>
  37          Channel with peer{" "}
  38          {nodeDetails?.alias || channel.remotePubkey.substring(0, 8) + "..."} is
  39          not peered
  40        </AlertTitle>
  41        <AlertDescription className="gap-0">
  42          <p>
  43            Your channel will be offline until you manually reconnect to this
  44            peer.
  45          </p>
  46          <p>
  47            1. Copy the peer connection details from{" "}
  48            <ExternalLink
  49              to={`https://amboss.space/node/${channel.remotePubkey}`}
  50              className="font-semibold inline-flex gap-1"
  51            >
  52              <ExternalLinkIcon className="size-4" />
  53              amboss.space
  54            </ExternalLink>{" "}
  55          </p>
  56          <p>
  57            2. Open <span className="font-semibold">Advanced</span> and click{" "}
  58            <Link to="/peers" className="font-semibold">
  59              Connected Peers
  60            </Link>{" "}
  61            to reconnect the peer.
  62          </p>
  63        </AlertDescription>
  64      </Alert>
  65    );
  66  }
  67