feat: add mempool fee alerts

frontend/src/components/CloseChannelDialogContent.tsx

@@ -1,6 +1,7 @@
 import { AlertTriangleIcon, CopyIcon, ExternalLinkIcon } from "lucide-react";
 import React from "react";
 import ExternalLink from "src/components/ExternalLink";
+import { MempoolAlert } from "src/components/MempoolAlert";
 import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
 import { Button } from "src/components/ui/button";
 import { Label } from "src/components/ui/label";
@@ -127,6 +128,9 @@ export function CloseChannelDialogContent({ alias, channel }: Props) {
           <AlertDialogHeader>
             <AlertDialogTitle>Select mode of channel closure</AlertDialogTitle>
             <AlertDialogDescription className="text-left">
+              <div className="mb-4">
+                <MempoolAlert />
+              </div>
               {closeType === "force" && (
                 <Alert className="mb-4">
                   <AlertTriangleIcon className="h-4 w-4" />

frontend/src/components/MempoolAlert.tsx

@@ -0,0 +1,55 @@
+import { TriangleAlertIcon } 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";
+
+export function MempoolAlert() {
+  const { data: recommendedFees } = useMempoolApi<{ fastestFee: number }>(
+    "/v1/fees/recommended",
+    true
+  );
+
+  const fees = {
+    "EXTREMELY HIGH": 200,
+    "very high": 150,
+    high: 100,
+    "moderately high": 50,
+  };
+
+  const fee = recommendedFees?.fastestFee;
+  if (!fee) {
+    return null;
+  }
+  const matchedFee = Object.entries(fees).find((entry) => fee >= entry[1]);
+
+  if (!matchedFee) {
+    return null;
+  }
+  return (
+    <Alert>
+      <TriangleAlertIcon className="h-4 w-4" />
+      <AlertTitle>
+        Mempool Fees are currently{" "}
+        <span className="font-semibold">{matchedFee[0]}</span>
+      </AlertTitle>
+      <AlertDescription>
+        <p>Bitcoin transactions may be uneconomical at this time.</p>
+        <div className="flex gap-2 mt-2">
+          <ExternalLinkButton
+            to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/faq-alby-hub/what-to-do-during-times-of-high-onchain-fees"
+            size={"sm"}
+          >
+            Learn more
+          </ExternalLinkButton>
+          <ExternalLinkButton
+            to="https://mempool.space"
+            size={"sm"}
+            variant="secondary"
+          >
+            View fees on mempool
+          </ExternalLinkButton>
+        </div>
+      </AlertDescription>
+    </Alert>
+  );
+}

frontend/src/screens/channels/IncreaseIncomingCapacity.tsx

@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
 import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading";
+import { MempoolAlert } from "src/components/MempoolAlert";
 import {
   Button,
   ExternalLinkButton,
@@ -202,6 +203,7 @@ function NewChannelInternal({
           </div>
         }
       />
+      <MempoolAlert />
       <div className="md:max-w-md max-w-full flex flex-col gap-5 flex-1">
         <form onSubmit={onSubmit} className="flex flex-col gap-5 flex-1">
           <div className="grid gap-1.5">

frontend/src/screens/channels/IncreaseOutgoingCapacity.tsx

@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
 import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading";
+import { MempoolAlert } from "src/components/MempoolAlert";
 import {
   Button,
   ExternalLinkButton,
@@ -225,6 +226,7 @@ function NewChannelInternal({ network }: { network: Network }) {
           </div>
         }
       />
+      <MempoolAlert />
       <div className="md:max-w-md max-w-full flex flex-col gap-5 flex-1">
         <form
           onSubmit={onSubmit}

frontend/src/screens/channels/first/FirstChannel.tsx

@@ -18,6 +18,7 @@ import { useInfo } from "src/hooks/useInfo";
 import { AutoChannelRequest, AutoChannelResponse } from "src/types";
 import { request } from "src/utils/request";
 
+import { MempoolAlert } from "src/components/MempoolAlert";
 import {
   ALBY_HIDE_HOSTED_BALANCE_BELOW,
   ALBY_MIN_HOSTED_BALANCE_FOR_FIRST_CHANNEL,
@@ -94,6 +95,7 @@ export function FirstChannel() {
         title="Open Your First Channel"
         description="Open a channel to another lightning network node to join the lightning network"
       />
+      <MempoolAlert />
       {invoice && channelSize && (
         <div className="flex flex-col gap-4 items-center justify-center max-w-md">
           <p className="text-muted-foreground">

frontend/src/screens/onchain/BuyBitcoin.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import AppHeader from "src/components/AppHeader";
+import { MempoolAlert } from "src/components/MempoolAlert";
 import { Input } from "src/components/ui/input";
 import { Label } from "src/components/ui/label";
 import { LoadingButton } from "src/components/ui/loading-button";
@@ -172,6 +173,7 @@ export default function BuyBitcoin() {
         title="Buy Bitcoin"
         description="Use one of our partner providers to buy bitcoin and deposit it to your savings balance."
       />
+      <MempoolAlert />
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-1 lg:gap-10">
         <div className="flex max-w-lg flex-col gap-4">
           <div className="grid gap-4">

frontend/src/screens/onchain/DepositBitcoin.tsx

@@ -2,6 +2,7 @@ import { Copy, CreditCard, RefreshCw } from "lucide-react";
 import { Link } from "react-router-dom";
 import AppHeader from "src/components/AppHeader";
 import Loading from "src/components/Loading";
+import { MempoolAlert } from "src/components/MempoolAlert";
 import QRCode from "src/components/QRCode";
 import { Button } from "src/components/ui/button";
 import { Card, CardContent } from "src/components/ui/card";
@@ -40,6 +41,7 @@ export default function DepositBitcoin() {
           </Link>
         }
       />
+      <MempoolAlert />
       <div className="w-80">
         <Card>
           <CardContent className="grid gap-6 p-8 justify-center border border-muted">