Skip to content

Commit

Permalink
chore: replace checkbox with radio
Browse files Browse the repository at this point in the history
  • Loading branch information
@im-adithya
im-adithya committed Aug 2, 2024
1 parent 607258e commit 229c58d
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 26 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@radix-ui/react-navigation-menu": "^1.1.4",
"@radix-ui/react-popover": "^1.1.1",
"@radix-ui/react-progress": "^1.0.3",
"@radix-ui/react-radio-group": "^1.2.0",
"@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slot": "^1.0.2",
Expand Down
55 changes: 29 additions & 26 deletions frontend/src/components/CloseChannelDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import React from "react";
import ExternalLink from "src/components/ExternalLink";
import { Alert, AlertDescription, AlertTitle } from "src/components/ui/alert";
import { Button } from "src/components/ui/button";
import { Checkbox } from "src/components/ui/checkbox";
import { Label } from "src/components/ui/label";
import { RadioGroup, RadioGroupItem } from "src/components/ui/radio-group";
import { toast } from "src/components/ui/use-toast";
import { useChannels } from "src/hooks/useChannels";
import { useCSRF } from "src/hooks/useCSRF";
Expand Down Expand Up @@ -93,13 +94,12 @@ export function CloseChannelDialog({ alias, channel }: Props) {
</AlertDialogTitle>
<AlertDialogDescription>
This channel is inactive. Some channels require up to 6 onchain
confirmations before they are usable. Proceed only if you still
want to continue
confirmations before they are usable.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<Button onClick={onContinue}>Continue</Button>
<Button onClick={onContinue}>Confirm</Button>
</AlertDialogFooter>
</>
)}
Expand Down Expand Up @@ -143,50 +143,53 @@ export function CloseChannelDialog({ alias, channel }: Props) {
</AlertDescription>
</Alert>
)}
<div className="flex flex-col gap-4 text-xs mt-2">
<div className="items-top flex space-x-2">
<Checkbox
<RadioGroup
defaultValue="normal"
value={closeType}
onValueChange={() =>
setCloseType(closeType === "normal" ? "force" : "normal")
}
className="mt-2"
>
<div className="flex items-start space-x-2 mb-2">
<RadioGroupItem
value="normal"
id="normal"
onCheckedChange={() =>
setCloseType(closeType === "normal" ? "force" : "normal")
}
checked={closeType === "normal"}
className="shrink-0"
/>
<div className="grid gap-1.5 leading-none">
<label
<div className="grid gap-1.5">
<Label
htmlFor="normal"
className="text-primary text-sm font-medium leading-none cursor-pointer"
className="text-primary font-medium cursor-pointer"
>
Normal Close
</label>
</Label>
<p className="text-sm text-muted-foreground">
Closes the channel cooperatively, usually faster and with
lower fees
</p>
</div>
</div>
<div className="items-top flex space-x-2">
<Checkbox
<div className="flex items-start space-x-2">
<RadioGroupItem
value="force"
id="force"
onCheckedChange={() =>
setCloseType(closeType === "force" ? "normal" : "force")
}
checked={closeType === "force"}
className="shrink-0"
/>
<div className="grid gap-1.5 leading-none">
<label
<div className="grid gap-1.5">
<Label
htmlFor="force"
className="text-primary text-sm font-medium leading-none cursor-pointer"
className="text-primary font-medium cursor-pointer"
>
Force Close
</label>
</Label>
<p className="text-sm text-muted-foreground">
Closes the channel unilaterally, can take longer and might
incur higher fees
</p>
</div>
</div>
</div>
</RadioGroup>
<ExternalLink
to="https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/alby-hub/faq-alby-hub/how-can-i-close-this-channel-what-happens-to-the-sats-in-this-channel"
className="underline flex items-center mt-4"
Expand Down
42 changes: 42 additions & 0 deletions frontend/src/components/ui/radio-group.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";

import { cn } from "src/lib/utils";

const RadioGroup = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Root
className={cn("grid gap-2", className)}
{...props}
ref={ref}
/>
);
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;

const RadioGroupItem = React.forwardRef<
React.ElementRef<typeof RadioGroupPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
return (
<RadioGroupPrimitive.Item
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
<CheckIcon className="h-3.5 w-3.5 fill-primary" />
</RadioGroupPrimitive.Indicator>
</RadioGroupPrimitive.Item>
);
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { RadioGroup, RadioGroupItem };
51 changes: 51 additions & 0 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,6 +599,16 @@
"@radix-ui/react-primitive" "1.0.3"
"@radix-ui/react-slot" "1.0.2"

"@radix-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.0.tgz#f18af78e46454a2360d103c2251773028b7724ed"
integrity sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==
dependencies:
"@radix-ui/react-compose-refs" "1.1.0"
"@radix-ui/react-context" "1.1.0"
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-slot" "1.1.0"

"@radix-ui/[email protected]":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
Expand Down Expand Up @@ -671,6 +681,11 @@
dependencies:
"@babel/runtime" "^7.13.10"

"@radix-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==

"@radix-ui/[email protected]":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
Expand Down Expand Up @@ -924,6 +939,22 @@
"@radix-ui/react-context" "1.0.1"
"@radix-ui/react-primitive" "1.0.3"

"@radix-ui/react-radio-group@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.2.0.tgz#f937dd6b9436ded80c4bebdf3901c20cb8bcbb5a"
integrity sha512-yv+oiLaicYMBpqgfpSPw6q+RyXlLdIpQWDHZbUKURxe+nEh53hFXPPlfhfQQtYkS5MMK/5IWIa76SksleQZSzw==
dependencies:
"@radix-ui/primitive" "1.1.0"
"@radix-ui/react-compose-refs" "1.1.0"
"@radix-ui/react-context" "1.1.0"
"@radix-ui/react-direction" "1.1.0"
"@radix-ui/react-presence" "1.1.0"
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-roving-focus" "1.1.0"
"@radix-ui/react-use-controllable-state" "1.1.0"
"@radix-ui/react-use-previous" "1.1.0"
"@radix-ui/react-use-size" "1.1.0"

"@radix-ui/[email protected]":
version "1.0.4"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
Expand All @@ -940,6 +971,21 @@
"@radix-ui/react-use-callback-ref" "1.0.1"
"@radix-ui/react-use-controllable-state" "1.0.1"

"@radix-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz#b30c59daf7e714c748805bfe11c76f96caaac35e"
integrity sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==
dependencies:
"@radix-ui/primitive" "1.1.0"
"@radix-ui/react-collection" "1.1.0"
"@radix-ui/react-compose-refs" "1.1.0"
"@radix-ui/react-context" "1.1.0"
"@radix-ui/react-direction" "1.1.0"
"@radix-ui/react-id" "1.1.0"
"@radix-ui/react-primitive" "2.0.0"
"@radix-ui/react-use-callback-ref" "1.1.0"
"@radix-ui/react-use-controllable-state" "1.1.0"

"@radix-ui/react-select@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.0.0.tgz#a3511792a51a7018d6559357323a7f52e0e38887"
Expand Down Expand Up @@ -1104,6 +1150,11 @@
dependencies:
"@babel/runtime" "^7.13.10"

"@radix-ui/[email protected]":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz#d4dd37b05520f1d996a384eb469320c2ada8377c"
integrity sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==

"@radix-ui/[email protected]":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
Expand Down

0 comments on commit 229c58d

Please sign in to comment.