DuplicateChannelAlert.tsx raw

   1  import { TriangleAlertIcon } from "lucide-react";
   2  import ExternalLink from "src/components/ExternalLink";
   3  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   4  import { useChannels } from "src/hooks/useChannels";
   5  
   6  type PeerAlertProps = {
   7    pubkey?: string;
   8    name?: string;
   9  };
  10  
  11  export function DuplicateChannelAlert({ pubkey, name }: PeerAlertProps) {
  12    const { data: channels } = useChannels();
  13  
  14    if (!pubkey) {
  15      return null;
  16    }
  17  
  18    const matchedPeer = channels?.find((p) => p.remotePubkey === pubkey);
  19  
  20    if (!matchedPeer) {
  21      return null;
  22    }
  23  
  24    return (
  25      <Alert>
  26        <TriangleAlertIcon />
  27        <AlertTitle>
  28          You already have a channel with{" "}
  29          {name && name !== "Custom" ? (
  30            <span className="font-semibold">{name}</span>
  31          ) : (
  32            "the selected peer"
  33          )}
  34        </AlertTitle>
  35        <AlertDescription>
  36          There are other options available rather than opening multiple channels
  37          with the same counterparty.{" "}
  38          <ExternalLink
  39            to="https://guides.getalby.com/user-guide/alby-hub/faq/should-i-open-multiple-channels-with-the-same-counterparty"
  40            className="underline"
  41          >
  42            Learn more
  43          </ExternalLink>
  44        </AlertDescription>
  45      </Alert>
  46    );
  47  }
  48