refactor: Use Radix UI Dialog as the Balance Warning Modal (#72)

* use radix dialog for balance warning modal

* remove the close button in the dialog

* prevent modal close on outside interaction

Author: ChangoMan

packages/nextjs/components/Dialog.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "~~/utils/cn";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-base-100 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

packages/nextjs/components/burnerwallet/BalanceWarningModal.tsx

@@ -5,6 +5,7 @@ import { CopyPrivateKey } from "./CopyPrivateKey";
 import { useLocalStorage } from "usehooks-ts";
 import { useAccount } from "wagmi";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { Dialog, DialogContent } from "~~/components/Dialog";
 import { useAccountBalance } from "~~/hooks/scaffold-eth";
 
 const BURNER_WALLET_HIDE_BALANCE_STORAGE_KEY = "scaffoldEth2.hideBalanceWarning";
@@ -44,16 +45,16 @@ export const BalanceWarningModal = () => {
   }
 
   return (
-    <>
-      <input
-        readOnly
-        type="checkbox"
-        id="balance_warning_modal"
-        className="modal-toggle"
-        checked={isWarningModalOpen}
-      />
-      <div className="modal" role="dialog">
-        <div className="modal-box">
+    <Dialog open={isWarningModalOpen} onOpenChange={setIsWarningModalOpen}>
+      <DialogContent
+        onInteractOutside={e => {
+          e.preventDefault();
+        }}
+        onEscapeKeyDown={e => {
+          e.preventDefault();
+        }}
+      >
+        <div>
           <div role="alert" className="alert alert-warning mb-1">
             <ExclamationTriangleIcon className="w-6 h-6" />
             <span>
@@ -79,7 +80,7 @@ export const BalanceWarningModal = () => {
             </button>
           </div>
         </div>
-      </div>
-    </>
+      </DialogContent>
+    </Dialog>
   );
 };

packages/nextjs/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.0.11",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@rainbow-me/rainbowkit": "1.3.5",
     "@tanstack/react-query": "^5.44.0",
     "@uniswap/sdk-core": "^4.0.1",

yarn.lock

@@ -1913,7 +1913,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-dialog@npm:^1.0.4":
+"@radix-ui/react-dialog@npm:^1.0.4, @radix-ui/react-dialog@npm:^1.0.5":
   version: 1.0.5
   resolution: "@radix-ui/react-dialog@npm:1.0.5"
   dependencies:
@@ -2332,6 +2332,7 @@ __metadata:
   dependencies:
     "@ethersproject/providers": ^5.7.2
     "@heroicons/react": ^2.0.11
+    "@radix-ui/react-dialog": ^1.0.5
     "@rainbow-me/rainbowkit": 1.3.5
     "@tanstack/react-query": ^5.44.0
     "@trivago/prettier-plugin-sort-imports": ^4.1.1