Skip to content

Commit 797faa7

Browse files
keshav0479rolznz
keshav0479
and
rolznz
authored
fix(ui): enable keyboard submission for dialogs #760 (#2005)
* fix(ui): enable keyboard submission for dialogs #760 * fix: add global max dialog height * fix: routing fee dialog submit * chore: remove unused code * chore: correct copy for exporting pathfinding scores * fix: return correct error message when refunding swap that is not found --------- Co-authored-by: Roland Bewick <roland.bewick@gmail.com>
1 parent ceb3a5f commit 797faa7

File tree

7 files changed

+264
-319
lines changed

7 files changed

+264
-319
lines changed

‎frontend/src/components/ExecuteCustomNodeCommandDialogContent.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,17 +60,24 @@ export function ExecuteCustomNodeCommandDialogContent({
6060
}
6161
}
6262

63+
const handleSubmit = (e: React.FormEvent) => {
64+
e.preventDefault();
65+
executeCommand();
66+
};
67+
6368
return (
6469
<AlertDialogContent>
6570
<AlertDialogHeader>
6671
<AlertDialogTitle>Execute Custom Node Command</AlertDialogTitle>
6772
<AlertDialogDescription className="text-left">
68-
<Textarea
69-
className="h-36 font-mono"
70-
value={command}
71-
onChange={(e) => setCommand(e.target.value)}
72-
placeholder="commandname --arg1=value1"
73-
/>
73+
<form id="execute-command-form" onSubmit={handleSubmit}>
74+
<Textarea
75+
className="h-36 font-mono"
76+
value={command}
77+
onChange={(e) => setCommand(e.target.value)}
78+
placeholder="commandname --arg1=value1"
79+
/>
80+
</form>
7481
<p className="mt-2">Available commands</p>
7582
<Textarea
7683
readOnly
@@ -80,11 +87,13 @@ export function ExecuteCustomNodeCommandDialogContent({
8087
/>
8188
</AlertDialogDescription>
8289
</AlertDialogHeader>
83-
<AlertDialogFooter className="mt-4">
90+
<AlertDialogFooter>
8491
<AlertDialogCancel onClick={() => setCommand("")}>
8592
Cancel
8693
</AlertDialogCancel>
87-
<AlertDialogAction onClick={executeCommand}>Execute</AlertDialogAction>
94+
<AlertDialogAction type="submit" form="execute-command-form">
95+
Execute
96+
</AlertDialogAction>
8897
</AlertDialogFooter>
8998
</AlertDialogContent>
9099
);

‎frontend/src/components/ResetRoutingDataDialogContent.tsx‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -68,36 +68,43 @@ export function ResetRoutingDataDialogContent() {
6868
}
6969
}
7070

71+
const handleSubmit = async (e: React.FormEvent) => {
72+
e.preventDefault();
73+
await resetRouter();
74+
};
75+
7176
return (
7277
<AlertDialogContent>
7378
<AlertDialogHeader>
7479
<AlertDialogTitle>Clear Routing Data</AlertDialogTitle>
7580
<AlertDialogDescription className="text-left">
7681
<div>
7782
<p>Are you sure you want to clear your routing data?</p>
78-
<div className="grid gap-2 mt-4">
79-
<Label className="text-primary">Routing Data to Clear</Label>
80-
<Select
81-
name="resetKey"
82-
value={resetKey}
83-
onValueChange={(value) => setResetKey(value)}
84-
>
85-
<SelectTrigger>
86-
<SelectValue placeholder="Select Data" />
87-
</SelectTrigger>
88-
<SelectContent>
89-
{RESET_KEY_OPTIONS.map((resetKey) => (
90-
<SelectItem key={resetKey.value} value={resetKey.value}>
91-
{resetKey.label}
92-
</SelectItem>
93-
))}
94-
</SelectContent>
95-
</Select>
96-
</div>
83+
<form id="reset-routing-form" onSubmit={handleSubmit}>
84+
<div className="grid gap-2 mt-4">
85+
<Label className="text-primary">Routing Data to Clear</Label>
86+
<Select
87+
name="resetKey"
88+
value={resetKey}
89+
onValueChange={(value) => setResetKey(value)}
90+
>
91+
<SelectTrigger>
92+
<SelectValue placeholder="Select Data" />
93+
</SelectTrigger>
94+
<SelectContent>
95+
{RESET_KEY_OPTIONS.map((resetKey) => (
96+
<SelectItem key={resetKey.value} value={resetKey.value}>
97+
{resetKey.label}
98+
</SelectItem>
99+
))}
100+
</SelectContent>
101+
</Select>
102+
</div>
103+
</form>
97104
<div className="grid gap-2 mt-4 border rounded-md p-3">
98105
<h3 className="text-primary font-semibold">Clear Data Options</h3>
99106
{RESET_KEY_OPTIONS.map((resetKey) => (
100-
<p>
107+
<p key={resetKey.value}>
101108
<span className="text-primary font-medium">
102109
{resetKey.label}
103110
</span>
@@ -116,7 +123,11 @@ export function ResetRoutingDataDialogContent() {
116123
<AlertDialogCancel onClick={() => setResetKey(undefined)}>
117124
Cancel
118125
</AlertDialogCancel>
119-
<AlertDialogAction disabled={!resetKey} onClick={resetRouter}>
126+
<AlertDialogAction
127+
disabled={!resetKey}
128+
type="submit"
129+
form="reset-routing-form"
130+
>
120131
Confirm
121132
</AlertDialogAction>
122133
</AlertDialogFooter>

‎frontend/src/components/RoutingFeeDialogContent.tsx‎

Lines changed: 40 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@ export function RoutingFeeDialogContent({ channel }: Props) {
7171
}
7272
}
7373

74+
const handleSubmit = (_e: React.FormEvent) => {
75+
// NOTE: some weird behavior due to this dialog being triggered from a dropdown
76+
//e.preventDefault();
77+
updateFee();
78+
};
79+
7480
return (
7581
<AlertDialogContent>
7682
<AlertDialogHeader>
@@ -82,36 +88,37 @@ export function RoutingFeeDialogContent({ channel }: Props) {
8288
unwanted routing. No matter the fee, you can still receive
8389
payments.{" "}
8490
</p>
85-
<Label htmlFor="fee" className="block mb-2">
86-
Base Routing Fee (sats)
87-
</Label>
88-
<Input
89-
id="fee"
90-
name="fee"
91-
type="number"
92-
required
93-
autoFocus
94-
min={0}
95-
value={baseFeeSats}
96-
onChange={(e) => {
97-
setBaseFeeSats(e.target.value.trim());
98-
}}
99-
/>
100-
<Label htmlFor="fee" className="block mt-4 mb-2">
101-
PPM Fee (1 PPM = 1 per 1 million sats)
102-
</Label>
103-
<Input
104-
id="fee"
105-
name="fee"
106-
type="number"
107-
required
108-
autoFocus
109-
min={0}
110-
value={forwardingFeeProportionalMillionths}
111-
onChange={(e) => {
112-
setForwardingFeeProportionalMillionths(e.target.value.trim());
113-
}}
114-
/>
91+
<form id="routing-fee-form" onSubmit={handleSubmit}>
92+
<Label htmlFor="baseFee" className="block mb-2">
93+
Base Routing Fee (sats)
94+
</Label>
95+
<Input
96+
id="baseFee"
97+
name="baseFee"
98+
type="number"
99+
required
100+
autoFocus
101+
min={0}
102+
value={baseFeeSats}
103+
onChange={(e) => {
104+
setBaseFeeSats(e.target.value.trim());
105+
}}
106+
/>
107+
<Label htmlFor="ppmFee" className="block mt-4 mb-2">
108+
PPM Fee (1 PPM = 1 per 1 million sats)
109+
</Label>
110+
<Input
111+
id="ppmFee"
112+
name="ppmFee"
113+
type="number"
114+
required
115+
min={0}
116+
value={forwardingFeeProportionalMillionths}
117+
onChange={(e) => {
118+
setForwardingFeeProportionalMillionths(e.target.value.trim());
119+
}}
120+
/>
121+
</form>
115122
<ExternalLink
116123
to="https://guides.getalby.com/user-guide/alby-hub/faq/how-can-i-change-routing-fees#understanding-routing-fees-and-alby-hub"
117124
className="underline flex items-center mt-4"
@@ -129,7 +136,9 @@ export function RoutingFeeDialogContent({ channel }: Props) {
129136
(parseInt(forwardingFeeProportionalMillionths) || 0) ===
130137
currentFeePPM
131138
}
132-
onClick={updateFee}
139+
type="submit"
140+
form="routing-fee-form"
141+
onClick={handleSubmit}
133142
>
134143
Confirm
135144
</AlertDialogAction>

‎frontend/src/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,14 @@ body {
2222

2323
@import "./themes/index.css";
2424

25+
@layer base {
26+
[role="dialog"],
27+
[role="alertdialog"] {
28+
max-height: 90vh;
29+
overflow-y: auto;
30+
}
31+
}
32+
2533
@layer base {
2634
button:not([disabled]),
2735
[role="button"]:not([disabled]) {

0 commit comments

Comments
 (0)