fix: require 21k+ sats budget for alby connection card (#749)

fixes #721 ![image](https://github.com/user-attachments/assets/a1151227-cdbe-4dae-8905-cdb0c305cfa7) ![image](https://github.com/user-attachments/assets/13208da0-0322-4d00-84a1-dbcd5f577944)
getAlby · Oct 23, 2024 · c68f6e7 · c68f6e7
2 parents eaab2d8 + 0492e3d
commit c68f6e7
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 55 deletions.
diff --git a/frontend/src/components/BudgetAmountSelect.tsx b/frontend/src/components/BudgetAmountSelect.tsx
@@ -7,35 +7,44 @@ import { budgetOptions } from "src/types";
 function BudgetAmountSelect({
   value,
   onChange,
+  minAmount,
 }: {
   value: number;
   onChange: (value: number) => void;
+  minAmount?: number;
 }) {
   const [customBudget, setCustomBudget] = React.useState(
     value ? !Object.values(budgetOptions).includes(value) : false
   );
   return (
     <>
       <div className="grid grid-cols-2 md:grid-cols-5 gap-2 text-xs mb-4">
-        {Object.keys(budgetOptions).map((budget) => {
-          return (
-            <div
-              key={budget}
-              onClick={() => {
-                setCustomBudget(false);
-                onChange(budgetOptions[budget]);
-              }}
-              className={cn(
-                "cursor-pointer rounded text-nowrap border-2 text-center p-4 slashed-zero",
-                !customBudget && value == budgetOptions[budget]
-                  ? "border-primary"
-                  : "border-muted"
-              )}
-            >
-              {`${budget} ${budgetOptions[budget] ? " sats" : ""}`}
-            </div>
-          );
-        })}
+        {Object.keys(budgetOptions)
+          .filter(
+            (budget) =>
+              !minAmount ||
+              !budgetOptions[budget] ||
+              budgetOptions[budget] > minAmount
+          )
+          .map((budget) => {
+            return (
+              <div
+                key={budget}
+                onClick={() => {
+                  setCustomBudget(false);
+                  onChange(budgetOptions[budget]);
+                }}
+                className={cn(
+                  "cursor-pointer rounded text-nowrap border-2 text-center p-4 slashed-zero",
+                  !customBudget && value == budgetOptions[budget]
+                    ? "border-primary"
+                    : "border-muted"
+                )}
+              >
+                {`${budget} ${budgetOptions[budget] ? " sats" : ""}`}
+              </div>
+            );
+          })}
         <div
           onClick={() => {
             setCustomBudget(true);
@@ -60,7 +69,7 @@ function BudgetAmountSelect({
             type="number"
             required
             autoFocus
-            min={1}
+            min={minAmount || 1}
             value={value || ""}
             onChange={(e) => {
               onChange(parseInt(e.target.value));

diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -6,7 +6,7 @@ import {
   Link2Icon,
   ZapIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { FormEvent, useState } from "react";
 import { Link } from "react-router-dom";
 
 import BudgetAmountSelect from "src/components/BudgetAmountSelect";
@@ -47,6 +47,12 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
   const [budgetRenewal, setBudgetRenewal] =
     useState<BudgetRenewalType>("monthly");
 
+  function onSubmit(e: FormEvent) {
+    e.preventDefault();
+
+    linkAccount(maxAmount, budgetRenewal);
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -86,40 +92,42 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
                     </LoadingButton>
                   </DialogTrigger>
                   <DialogContent>
-                    <DialogHeader>Link to Alby Account</DialogHeader>
-                    <DialogDescription className="flex flex-col gap-4">
-                      After you link your account, your lightning address and
-                      every app you access through your Alby Account will handle
-                      payments via the Hub.
-                      <img
-                        src="/images/illustrations/alby-account-dark.svg"
-                        className="w-full hidden dark:block"
-                      />
-                      <img
-                        src="/images/illustrations/alby-account-light.svg"
-                        className="w-full dark:hidden"
-                      />
-                      You can add a budget that will restrict how much can be
-                      spent from the Hub with your Alby Account.
-                    </DialogDescription>
-                    <div>
-                      <BudgetRenewalSelect
-                        value={budgetRenewal}
-                        onChange={setBudgetRenewal}
-                      />
-                      <BudgetAmountSelect
-                        value={maxAmount}
-                        onChange={setMaxAmount}
-                      />
-                    </div>
-                    <DialogFooter>
-                      <LoadingButton
-                        onClick={() => linkAccount(maxAmount, budgetRenewal)}
-                        loading={loading}
-                      >
-                        Link to Alby Account
-                      </LoadingButton>
-                    </DialogFooter>
+                    <form onSubmit={onSubmit}>
+                      <DialogHeader>Link to Alby Account</DialogHeader>
+                      <DialogDescription className="flex flex-col gap-4">
+                        After you link your account, your lightning address and
+                        every app you access through your Alby Account will
+                        handle payments via the Hub.
+                        <img
+                          src="/images/illustrations/alby-account-dark.svg"
+                          className="w-full hidden dark:block"
+                        />
+                        <img
+                          src="/images/illustrations/alby-account-light.svg"
+                          className="w-full dark:hidden"
+                        />
+                        You can add a budget that will restrict how much can be
+                        spent from the Hub with your Alby Account.
+                      </DialogDescription>
+                      <div className="mt-4">
+                        <BudgetRenewalSelect
+                          value={budgetRenewal}
+                          onChange={setBudgetRenewal}
+                        />
+                        <BudgetAmountSelect
+                          value={maxAmount}
+                          onChange={setMaxAmount}
+                          minAmount={
+                            25000 /* the minimum should be a bit more than the Alby monthly fee */
+                          }
+                        />
+                      </div>
+                      <DialogFooter>
+                        <LoadingButton loading={loading}>
+                          Link to Alby Account
+                        </LoadingButton>
+                      </DialogFooter>
+                    </form>
                   </DialogContent>
                 </Dialog>
               ) : linkStatus === LinkStatus.ThisNode ? (