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 - - +
+ 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. + +
+ + +
+ + + Link to Alby Account + + +
) : linkStatus === LinkStatus.ThisNode ? (