Lightning.tsx raw

   1  import { AlertTriangleIcon, ArrowDownIcon, ArrowUpIcon } from "lucide-react";
   2  import { Link } from "react-router";
   3  import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
   4  import FormattedFiatAmount from "src/components/FormattedFiatAmount";
   5  import LowReceivingCapacityAlert from "src/components/LowReceivingCapacityAlert";
   6  import TransactionsList from "src/components/TransactionsList";
   7  import {
   8    Alert,
   9    AlertDescription,
  10    AlertTitle,
  11  } from "src/components/ui/alert.tsx";
  12  import { LinkButton } from "src/components/ui/custom/link-button";
  13  import { BalanceSwitcher } from "src/components/wallet/BalanceSwitcher";
  14  import { useBalances } from "src/hooks/useBalances";
  15  import { useChannels } from "src/hooks/useChannels";
  16  import { useInfo } from "src/hooks/useInfo";
  17  
  18  export default function Lightning() {
  19    const { data: info, hasChannelManagement } = useInfo();
  20    const { data: balances } = useBalances(true);
  21    const { data: channels } = useChannels();
  22  
  23    if (!balances) {
  24      return null;
  25    }
  26  
  27    const hasChannelsOpen = !!channels?.length;
  28    const allChannelsBelowReserve =
  29      hasChannelsOpen &&
  30      channels?.every(
  31        (channel) =>
  32          channel.localBalanceMsat <
  33          channel.unspendablePunishmentReserveSat * 1000
  34      );
  35    const lowReceivingCapacity =
  36      hasChannelsOpen &&
  37      balances.lightning.totalReceivableMsat <
  38        balances.lightning.totalSpendableMsat * 0.1;
  39    const showOpenFirstChannel =
  40      hasChannelManagement &&
  41      channels &&
  42      !hasChannelsOpen &&
  43      !(info?.jitChannelsEnabled && info?.jitChannelsLiquiditySource);
  44  
  45    return (
  46      <>
  47        {hasChannelManagement && allChannelsBelowReserve && (
  48          <Alert>
  49            <AlertTriangleIcon className="h-4 w-4" />
  50            <AlertTitle>Channel Reserves Unmet</AlertTitle>
  51            <AlertDescription>
  52              You won't be able to make payments until you fill your channel
  53              reserve.{" "}
  54              <Link to="/channels" className="underline">
  55                View channel reserves
  56              </Link>
  57            </AlertDescription>
  58          </Alert>
  59        )}
  60        {hasChannelManagement && lowReceivingCapacity && (
  61          <LowReceivingCapacityAlert />
  62        )}
  63        {showOpenFirstChannel && (
  64          <Alert>
  65            <AlertTriangleIcon className="h-4 w-4" />
  66            <AlertTitle>Open Your First Channel</AlertTitle>
  67            <AlertDescription className="inline">
  68              You won't be able to receive or send payments until you{" "}
  69              <Link className="underline" to="/channels/first">
  70                open your first channel
  71              </Link>
  72              .
  73            </AlertDescription>
  74          </Alert>
  75        )}
  76        <div className="flex w-full flex-col items-center gap-8 pt-12 pb-16 text-center">
  77          <div className="flex flex-col items-center gap-8">
  78            {hasChannelManagement && <BalanceSwitcher active="lightning" />}
  79            <div className="flex flex-col items-center gap-3">
  80              <div className="text-5xl md:text-6xl font-medium balance sensitive slashed-zero leading-none">
  81                <FormattedBitcoinAmount
  82                  amountMsat={balances.lightning.totalSpendableMsat}
  83                />
  84              </div>
  85              <FormattedFiatAmount
  86                className="text-3xl font-normal leading-9 text-muted-foreground"
  87                amountSat={balances.lightning.totalSpendableSat}
  88              />
  89            </div>
  90          </div>
  91          <div className="grid w-full max-w-100 grid-cols-2 items-center gap-3">
  92            <LinkButton to="/wallet/receive" size="lg">
  93              <ArrowDownIcon />
  94              Receive
  95            </LinkButton>
  96            <LinkButton to="/wallet/send" size="lg">
  97              <ArrowUpIcon />
  98              Send
  99            </LinkButton>
 100          </div>
 101        </div>
 102        <TransactionsList />
 103      </>
 104    );
 105  }
 106