SwapAlert.tsx raw

   1  import { ArrowDownUpIcon, ExternalLinkIcon } from "lucide-react";
   2  import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
   3  import { useBalances } from "src/hooks/useBalances";
   4  import { useChannels } from "src/hooks/useChannels";
   5  import { ExternalLinkButton } from "../ui/custom/external-link-button";
   6  import { LinkButton } from "../ui/custom/link-button";
   7  
   8  type SwapAlertProps = {
   9    className?: string;
  10    minChannels?: number;
  11    swapType?: "in" | "out";
  12  };
  13  export function SwapAlert({
  14    className,
  15    minChannels = 2,
  16    swapType,
  17  }: SwapAlertProps) {
  18    const { data: channels } = useChannels();
  19    const { data: balances } = useBalances();
  20  
  21    if (!channels || !balances) {
  22      return null;
  23    }
  24    if (minChannels && channels.length < minChannels) {
  25      return null;
  26    }
  27  
  28    const isSwapOut = swapType
  29      ? swapType === "out"
  30      : balances.lightning.totalSpendableMsat >
  31        balances.lightning.totalReceivableMsat;
  32    const directionText = isSwapOut ? "out from" : "into";
  33  
  34    return (
  35      <Alert className={className}>
  36        <AlertTitle className="flex items-center gap-1">
  37          <ArrowDownUpIcon className="h-4 w-4" />
  38          Swap {directionText} existing channels
  39        </AlertTitle>
  40        <AlertDescription className="text-xs">
  41          <p>
  42            It can be more economic to swap funds {directionText} existing
  43            channels rather than opening new channels or closing existing ones.
  44          </p>
  45          <div className="flex items-center justify-end mt-2 gap-2">
  46            <ExternalLinkButton
  47              to="https://guides.getalby.com/user-guide/alby-hub/node/swap-in-and-out"
  48              variant="outline"
  49            >
  50              Learn more
  51              <ExternalLinkIcon className="size-4 ml-2" />
  52            </ExternalLinkButton>
  53            <LinkButton
  54              to={`/wallet/swap?type=${isSwapOut ? "out" : "in"}`}
  55              variant="secondary"
  56            >
  57              Swap {isSwapOut ? "Out" : "In"}
  58            </LinkButton>
  59          </div>
  60        </AlertDescription>
  61      </Alert>
  62    );
  63  }
  64