feat: add jit first payment fee alert on receive via lightning address

frontend/src/components/FirstChannelJitAlert.tsx

@@ -0,0 +1,48 @@
+import { InfoIcon } from "lucide-react";
+import ExternalLink from "src/components/ExternalLink";
+import { FormattedBitcoinAmount } from "src/components/FormattedBitcoinAmount";
+import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
+import { useChannels } from "src/hooks/useChannels";
+import { useInfo } from "src/hooks/useInfo";
+
+export default function FirstChannelJitAlert() {
+  const { data: info } = useInfo();
+  const { data: channels } = useChannels();
+
+  // a JIT channel only opens when the feature is enabled AND an LSPS2 liquidity
+  // source is actually configured (jitChannelsEnabled alone is just a settings
+  // toggle and can be true on backends without an LSPS2 source).
+  const lsps2Source = info?.jitChannelsEnabled
+    ? info.jitChannelsLiquiditySource
+    : undefined;
+
+  // only relevant when the user has no channels yet - their first received
+  // payment will open the channel.
+  if (!lsps2Source || !channels || channels.length > 0) {
+    return null;
+  }
+
+  const minPaymentSizeMsat = info?.jitChannelsMinPaymentSizeMsat;
+
+  return (
+    <Alert>
+      <InfoIcon className="h-4 w-4" />
+      <AlertTitle>First payment opens a channel</AlertTitle>
+      <AlertDescription className="inline">
+        A channel fee applies.{" "}
+        {!!minPaymentSizeMsat && (
+          <>
+            Minimum payment{" "}
+            <FormattedBitcoinAmount amountMsat={minPaymentSizeMsat} />.{" "}
+          </>
+        )}
+        <ExternalLink
+          to="https://guides.getalby.com/user-guide/alby-hub/faq/what-are-just-in-time-channels"
+          className="underline"
+        >
+          Learn more
+        </ExternalLink>
+      </AlertDescription>
+    </Alert>
+  );
+}

frontend/src/components/ReceiveToLightning.tsx

@@ -1,4 +1,5 @@
 import { CopyIcon, LinkIcon, ReceiptTextIcon, ZapIcon } from "lucide-react";
+import FirstChannelJitAlert from "src/components/FirstChannelJitAlert";
 import Loading from "src/components/Loading";
 import QRCode from "src/components/QRCode";
 import { Button } from "src/components/ui/button";
@@ -18,43 +19,46 @@ export function ReceiveToLightning() {
   }
 
   return (
-    <Card>
-      <CardContent className="flex flex-col items-center gap-6">
-        <QRCode value={me.lightning_address} className="w-full h-auto" />
-        <p className="text-center font-medium text-lg break-all">
-          {me.lightning_address}
-        </p>
-      </CardContent>
-      <CardFooter className="flex flex-col gap-2 pt-2">
-        <Button
-          variant="secondary"
-          onClick={() => {
-            copyToClipboard(me.lightning_address);
-          }}
-          className="w-full"
-        >
-          <CopyIcon className="size-4" /> Copy Lightning Address
-        </Button>
-        <Separator className="my-4" />
-        <LinkButton to="invoice" variant="outline" className="w-full">
-          <ZapIcon className="w-4 h-4 mr-2" />
-          Create Invoice
-        </LinkButton>
-        {info.supportsBolt12 && (
-          <LinkButton
-            to="/wallet/receive/offer"
-            variant="outline"
+    <div className="grid gap-2">
+      <FirstChannelJitAlert />
+      <Card>
+        <CardContent className="flex flex-col items-center gap-6">
+          <QRCode value={me.lightning_address} className="w-full h-auto" />
+          <p className="text-center font-medium text-lg break-all">
+            {me.lightning_address}
+          </p>
+        </CardContent>
+        <CardFooter className="flex flex-col gap-2 pt-2">
+          <Button
+            variant="secondary"
+            onClick={() => {
+              copyToClipboard(me.lightning_address);
+            }}
             className="w-full"
           >
-            <ReceiptTextIcon className="h-4 w-4 mr-2" />
-            Lightning Offer
+            <CopyIcon className="size-4" /> Copy Lightning Address
+          </Button>
+          <Separator className="my-4" />
+          <LinkButton to="invoice" variant="outline" className="w-full">
+            <ZapIcon className="w-4 h-4 mr-2" />
+            Create Invoice
           </LinkButton>
-        )}
-        <LinkButton to="onchain" variant="outline" className="w-full">
-          <LinkIcon className="w-4 h-4 mr-2" />
-          Receive from On-chain / Other Cryptocurrency
-        </LinkButton>
-      </CardFooter>
-    </Card>
+          {info.supportsBolt12 && (
+            <LinkButton
+              to="/wallet/receive/offer"
+              variant="outline"
+              className="w-full"
+            >
+              <ReceiptTextIcon className="h-4 w-4 mr-2" />
+              Lightning Offer
+            </LinkButton>
+          )}
+          <LinkButton to="onchain" variant="outline" className="w-full">
+            <LinkIcon className="w-4 h-4 mr-2" />
+            Receive from On-chain / Other Cryptocurrency
+          </LinkButton>
+        </CardFooter>
+      </Card>
+    </div>
   );
 }