feat: lightning channel flows

frontend/package.json

@@ -26,7 +26,8 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",

frontend/src/components/FormattedFiatAmount.tsx

@@ -20,7 +20,7 @@ export default function FormattedFiatAmount({
   }
 
   return (
-    <div className={cn("text-sm text-muted-foreground", className)}>
+    <div className={cn("text-sm", className)}>
       {!bitcoinRate ? (
         <Skeleton className="w-20">&nbsp;</Skeleton>
       ) : (

frontend/src/components/MempoolAlert.tsx

@@ -1,4 +1,4 @@
-import { TriangleAlertIcon } from "lucide-react";
+import { AlertCircleIcon } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { ExternalLinkButton } from "src/components/ui/button";
 import { useMempoolApi } from "src/hooks/useMempoolApi";
@@ -27,7 +27,7 @@ export function MempoolAlert() {
   }
   return (
     <Alert>
-      <TriangleAlertIcon className="h-4 w-4" />
+      <AlertCircleIcon className="h-4 w-4" />
       <AlertTitle>
         Mempool Fees are currently{" "}
         <span className="font-semibold">{matchedFee[0]}</span>
@@ -41,13 +41,6 @@ export function MempoolAlert() {
           >
             Learn more
           </ExternalLinkButton>
-          <ExternalLinkButton
-            to="https://mempool.space"
-            size={"sm"}
-            variant="secondary"
-          >
-            View fees on mempool
-          </ExternalLinkButton>
         </div>
       </AlertDescription>
     </Alert>

frontend/src/components/PayLightningInvoice.tsx

@@ -1,12 +1,16 @@
 import { Invoice, fiat } from "@getalby/lightning-tools";
 import { CopyIcon, LightbulbIcon } from "lucide-react";
-import React from "react";
+import React, { useState } from "react";
 import { LightningIcon } from "src/components/icons/Lightning";
 import Loading from "src/components/Loading";
 import QRCode from "src/components/QRCode";
 import { Button, ExternalLinkButton } from "src/components/ui/button";
+import { LoadingButton } from "src/components/ui/loading-button";
 import { useToast } from "src/components/ui/use-toast";
+import { useChannels } from "src/hooks/useChannels";
 import { copyToClipboard } from "src/lib/clipboard";
+import useChannelOrderStore from "src/state/ChannelOrderStore";
+import { request } from "src/utils/request";
 
 type PayLightningInvoiceProps = {
   invoice: string;
@@ -17,6 +21,8 @@ export function PayLightningInvoice({ invoice }: PayLightningInvoiceProps) {
     pr: invoice,
   }).satoshi;
   const [fiatAmount, setFiatAmount] = React.useState(0);
+  const { data: channels, mutate: reloadChannels } = useChannels();
+
   React.useEffect(() => {
     fiat
       .getFiatValue({ satoshi: amount, currency: "USD" })
@@ -27,11 +33,48 @@ export function PayLightningInvoice({ invoice }: PayLightningInvoiceProps) {
     copyToClipboard(invoice, toast);
   };
 
+  const [isPaying, setPaying] = useState(false);
+
+  const handlePayment = async () => {
+    try {
+      setPaying(true);
+
+      await request(`/api/payments/${invoice}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+
+      useChannelOrderStore.getState().updateOrder({
+        status: "paid",
+      });
+
+      reloadChannels();
+
+      toast({
+        title: "Channel successfully requested",
+      });
+    } catch (e) {
+      toast({
+        variant: "destructive",
+        title: "Failed to send: " + e,
+      });
+      console.error(e);
+    } finally {
+      setPaying(false);
+    }
+  };
+
+  const canPayInternally =
+    channels &&
+    channels.some((channel) => channel.localSpendableBalance / 1000 > amount);
+
   return (
-    <div className="w-96 flex flex-col gap-6 p-6 items-center justify-center">
-      <div className="flex items-center justify-center gap-2 text-muted-foreground">
+    <div className="w-80 flex flex-col gap-6 px-8 py-6 items-center justify-center border rounded-xl">
+      <div className="flex items-center justify-center gap-2">
         <Loading variant="loader" />
-        <p>Waiting for lightning payment...</p>
+        <p className="text-secondary-foreground">Waiting for payment...</p>
       </div>
       <div className="w-full relative flex items-center justify-center">
         <QRCode value={invoice} className="w-full" />
@@ -43,7 +86,7 @@ export function PayLightningInvoice({ invoice }: PayLightningInvoiceProps) {
         <p className="text-lg font-semibold">
           {new Intl.NumberFormat().format(amount)} sats
         </p>
-        <p className="flex flex-col items-center justify-center">
+        <p className="flex flex-col items-center justify-center text-muted-foreground">
           {new Intl.NumberFormat("en-US", {
             currency: "USD",
             style: "currency",
@@ -54,18 +97,33 @@ export function PayLightningInvoice({ invoice }: PayLightningInvoiceProps) {
         <Button
           onClick={copy}
           variant="outline"
+          size={"sm"}
           className="flex-1 flex gap-2 items-center justify-center"
         >
           <CopyIcon className="w-4 h-4 mr-2" />
-          Copy Invoice
+          Copy
         </Button>
-        <ExternalLinkButton
-          to="https://guides.getalby.com/user-guide/alby-account-and-browser-extension/alby-hub/wallet/open-your-first-channel"
-          variant="secondary"
-          className="flex-1 flex gap-2 items-center justify-center"
-        >
-          <LightbulbIcon className="w-4 h-4" /> How to pay
-        </ExternalLinkButton>
+        <>
+          {canPayInternally ? (
+            <LoadingButton
+              loading={isPaying}
+              className="whitespace-nowrap"
+              size={"sm"}
+              onClick={handlePayment}
+            >
+              Pay and open channel
+            </LoadingButton>
+          ) : (
+            <ExternalLinkButton
+              to="https://guides.getalby.com/user-guide/alby-account-and-browser-extension/alby-hub/wallet/open-your-first-channel"
+              variant="secondary"
+              className="flex-1 flex gap-2 items-center justify-center"
+            >
+              <LightbulbIcon className="w-4 h-4" />
+              How to pay
+            </ExternalLinkButton>
+          )}
+        </>
       </div>
     </div>
   );

frontend/src/components/TransactionItem.tsx

@@ -169,7 +169,10 @@ function TransactionItem({ tx }: Props) {
                 </p>
               </div>
 
-              <FormattedFiatAmount amount={Math.floor(tx.amount / 1000)} />
+              <FormattedFiatAmount
+                amount={Math.floor(tx.amount / 1000)}
+                className="text-muted-foreground"
+              />
             </div>
           </div>
         </div>
@@ -192,7 +195,10 @@ function TransactionItem({ tx }: Props) {
                   {new Intl.NumberFormat().format(Math.floor(tx.amount / 1000))}{" "}
                   {Math.floor(tx.amount / 1000) == 1 ? "sat" : "sats"}
                 </p>
-                <FormattedFiatAmount amount={Math.floor(tx.amount / 1000)} />
+                <FormattedFiatAmount
+                  amount={Math.floor(tx.amount / 1000)}
+                  className="text-muted-foreground"
+                />
               </div>
             </div>
             {app && (

frontend/src/components/channels/ChannelPeerNote.tsx

@@ -8,7 +8,7 @@ type ChannelPeerNoteProps = {
 
 export function ChannelPeerNote({ peer }: ChannelPeerNoteProps) {
   return (
-    <Alert>
+    <Alert variant={"destructive"}>
       <AlertCircleIcon className="h-4 w-4" />
       <AlertTitle>
         Please note when opening a channel with {peer.name}

frontend/src/components/channels/ChannelPublicPrivateAlert.tsx

@@ -4,7 +4,7 @@ import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 
 export function ChannelPublicPrivateAlert() {
   return (
-    <Alert>
+    <Alert variant={"destructive"}>
       <AlertCircleIcon className="h-4 w-4" />
       <AlertTitle>Conflicting Private / Public Channels</AlertTitle>
       <AlertDescription>

frontend/src/components/channels/ChannelWaitingForConfirmations.tsx

@@ -1,5 +1,5 @@
-import { Footprints } from "lucide-react";
-import EmptyState from "src/components/EmptyState";
+import Lottie from "react-lottie";
+import animationData from "src/assets/lotties/loading.json";
 import Loading from "src/components/Loading";
 import {
   Card,
@@ -20,31 +20,37 @@ export function ChannelWaitingForConfirmations({
     return <Loading />;
   }
 
+  const defaultOptions = {
+    loop: true,
+    autoplay: true,
+    animationData: animationData,
+    rendererSettings: {
+      preserveAspectRatio: "xMidYMid slice",
+    },
+  };
+
   return (
-    <div className="flex flex-col justify-center gap-2">
-      <Card>
-        <CardHeader>
-          <CardTitle>Your channel is being opened</CardTitle>
-          <CardDescription>
-            Waiting for {channel.confirmationsRequired} confirmations
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-row gap-2">
-            <Loading />
-            {channel.confirmations ?? "0"} /{" "}
-            {channel.confirmationsRequired ?? "unknown"} confirmations
-          </div>
-        </CardContent>
-      </Card>
-      <div className="w-full mt-40 flex flex-col items-center justify-center">
-        <EmptyState
-          icon={Footprints}
-          title="Browse While You Wait"
-          description="Feel free to leave this page or browse around Alby Hub! We'll send you an email as soon as your channel is active."
-          buttonText="Explore Apps"
-          buttonLink="/appstore"
-        />
+    <div className="flex flex-col gap-4">
+      <p className="text-muted-foreground ">
+        You can now leave this page.We’ll notify your by email once your channel
+        is active.
+      </p>
+      <div className="w-80 flex justify-center">
+        <Card className="text-center">
+          <CardHeader>
+            <CardTitle>Opening new lightning channel...</CardTitle>
+            <CardDescription>
+              Waiting for {channel.confirmationsRequired} confirmations
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-col gap-5 justify-center text-center">
+              <Lottie options={defaultOptions} height={256} width={256} />
+              {channel.confirmations ?? "0"} /{" "}
+              {channel.confirmationsRequired ?? "unknown"} confirmations
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );

frontend/src/components/channels/DuplicateChannelAlert.tsx

@@ -1,4 +1,4 @@
-import { TriangleAlertIcon } from "lucide-react";
+import { AlertCircleIcon } from "lucide-react";
 import ExternalLink from "src/components/ExternalLink";
 import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { useChannels } from "src/hooks/useChannels";
@@ -22,8 +22,8 @@ export function DuplicateChannelAlert({ pubkey, name }: PeerAlertProps) {
   }
 
   return (
-    <Alert>
-      <TriangleAlertIcon className="h-4 w-4" />
+    <Alert variant={"destructive"}>
+      <AlertCircleIcon className="h-4 w-4" />
       <AlertTitle>
         You already have a channel with{" "}
         {name && name !== "Custom" ? (