diff --git a/frontend/src/components/BudgetAmountSelect.tsx b/frontend/src/components/BudgetAmountSelect.tsx
index f4d07752..8a6a864f 100644
--- a/frontend/src/components/BudgetAmountSelect.tsx
+++ b/frontend/src/components/BudgetAmountSelect.tsx
@@ -7,9 +7,11 @@ 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
@@ -17,25 +19,32 @@ function BudgetAmountSelect({
return (
<>
- {Object.keys(budgetOptions).map((budget) => {
- return (
-
{
- 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" : ""}`}
-
- );
- })}
+ {Object.keys(budgetOptions)
+ .filter(
+ (budget) =>
+ !minAmount ||
+ !budgetOptions[budget] ||
+ budgetOptions[budget] > minAmount
+ )
+ .map((budget) => {
+ return (
+
{
+ 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" : ""}`}
+
+ );
+ })}
{
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
index b0d6a170..6f0fe5c5 100644
--- 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
("monthly");
+ function onSubmit(e: FormEvent) {
+ e.preventDefault();
+
+ linkAccount(maxAmount, budgetRenewal);
+ }
+
return (
@@ -86,40 +92,42 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
- Link to Alby Account
-
- After you link your account, your lightning address and
- every app you access through your Alby Account will handle
- payments via the Hub.
-
-
- You can add a budget that will restrict how much can be
- spent from the Hub with your Alby Account.
-
-
-
-
-
-
- linkAccount(maxAmount, budgetRenewal)}
- loading={loading}
- >
- Link to Alby Account
-
-
+
) : linkStatus === LinkStatus.ThisNode ? (