Migrate Engine Overview page to shadcn/tailwind - Part1 (#4926)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring the `CreateBackendWalletButton` and `ImportBackendWalletButton` components to use a new dialog system, enhancing the user interface and improving code structure. It also introduces tooltips and updates form handling for better user experience.

### Detailed summary
- Replaced `Modal` with `Dialog` for `CreateBackendWalletButton` and `ImportBackendWalletButton`.
- Added `tooltip` prop in `FormFieldSetup`.
- Updated form handling for better state management and error display.
- Enhanced UI elements with improved styling and layout.
- Refactored wallet import and creation logic for clarity and maintainability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx

@@ -7,7 +7,7 @@ export function FormFieldSetup(props: {
   label: string;
   errorMessage: React.ReactNode | undefined;
   children: React.ReactNode;
-  tooltip: React.ReactNode | undefined;
+  tooltip?: React.ReactNode;
   isRequired: boolean;
 }) {
   return (

apps/dashboard/src/@/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm ring-offset-background selection:bg-foreground selection:text-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx

@@ -259,7 +259,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             htmlFor="name"
             label="Name"
             errorMessage={networkNameErrorMessage}
-            tooltip={undefined}
             isRequired
           >
             <Input
@@ -301,7 +300,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             isRequired
             label="Currency Symbol"
             errorMessage={form.formState.errors.currencySymbol?.message}
-            tooltip={undefined}
             htmlFor="currency-symbol"
           >
             <Input
@@ -366,7 +364,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
             errorMessage={form.formState.errors.icon?.message}
             htmlFor="network-icon"
             label="Icon"
-            tooltip={undefined}
           >
             <div className="flex items-center gap-1">
               <ChainIcon size={20} ipfsSrc={form.watch("icon")} />

apps/dashboard/src/components/configure-networks/Form/ChainIdInput.tsx

@@ -17,7 +17,6 @@ export const ChainIdInput: React.FC<{
           ? form.formState.errors.chainId?.message
           : undefined
       }
-      tooltip={undefined}
     >
       <Input
         disabled={disabled}

apps/dashboard/src/components/configure-networks/Form/RpcInput.tsx

@@ -25,7 +25,6 @@ export const RpcInput: React.FC<{
       isRequired
       errorMessage={form.formState.errors.rpcUrl?.message}
       htmlFor="rpc-url"
-      tooltip={undefined}
       label="RPC URL"
     >
       <Input

apps/dashboard/src/components/engine/overview/create-backend-wallet-button.tsx

@@ -1,49 +1,41 @@
+"use client";
+
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
 import {
   type CreateBackendWalletInput,
   useEngineCreateBackendWallet,
   useEngineWalletConfig,
 } from "@3rdweb-sdk/react/hooks/useEngine";
-import {
-  Flex,
-  FormControl,
-  Input,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useTxNotifications } from "hooks/useTxNotifications";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
-import { Button, FormLabel, Text } from "tw-components";
+import { toast } from "sonner";
 
-interface CreateBackendWalletButtonProps {
+export function CreateBackendWalletButton(props: {
   instanceUrl: string;
-}
-
-export const CreateBackendWalletButton: React.FC<
-  CreateBackendWalletButtonProps
-> = ({ instanceUrl }) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+}) {
+  const { instanceUrl } = props;
+  const [isOpen, setIsOpen] = useState(false);
   const { data: walletConfig } = useEngineWalletConfig(instanceUrl);
-  const { mutate: createBackendWallet } =
-    useEngineCreateBackendWallet(instanceUrl);
-  const { onSuccess, onError } = useTxNotifications(
-    "Wallet created successfully.",
-    "Failed to create wallet.",
-  );
+  const createWallet = useEngineCreateBackendWallet(instanceUrl);
   const trackEvent = useTrack();
   const form = useForm<CreateBackendWalletInput>();
 
   const onSubmit = async (data: CreateBackendWalletInput) => {
-    createBackendWallet(data, {
+    const promise = createWallet.mutateAsync(data, {
       onSuccess: () => {
-        onSuccess();
-        onClose();
+        setIsOpen(false);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -52,7 +44,6 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
       onError: (error) => {
-        onError(error);
         trackEvent({
           category: "engine",
           action: "create-backend-wallet",
@@ -62,6 +53,11 @@ export const CreateBackendWalletButton: React.FC<
         });
       },
     });
+
+    toast.promise(promise, {
+      success: "Wallet created successfully",
+      error: "Failed to create wallet",
+    });
   };
 
   const walletType =
@@ -73,43 +69,58 @@ export const CreateBackendWalletButton: React.FC<
 
   return (
     <>
-      <Button onClick={onOpen} colorScheme="primary">
-        Create
-      </Button>
-      <Modal isOpen={isOpen} onClose={onClose} isCentered>
-        <ModalOverlay />
-        <ModalContent className="!bg-background rounded-lg border border-border">
+      <Button onClick={() => setIsOpen(true)}>Create</Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent
+          className="z-[10001] p-0"
+          dialogOverlayClassName="z-[10000]"
+        >
           <form onSubmit={form.handleSubmit(onSubmit)}>
-            <ModalHeader>Create {walletType} wallet</ModalHeader>
-            <ModalCloseButton />
-            <ModalBody>
+            <div className="p-6">
+              <DialogHeader className="mb-4">
+                <DialogTitle className="font-semibold text-2xl tracking-tight">
+                  Create {walletType} wallet
+                </DialogTitle>
+              </DialogHeader>
+
               <div className="flex flex-col gap-4">
-                <FormControl>
-                  <FormLabel>Wallet Type</FormLabel>
-                  <Text>{walletType}</Text>
-                </FormControl>
-                <FormControl>
-                  <FormLabel>Label</FormLabel>
+                <div>
+                  <p className="mb-1 text-sm">Wallet Type</p>
+                  <Badge className="text-sm" variant="outline">
+                    {walletType}
+                  </Badge>
+                </div>
+
+                <FormFieldSetup
+                  label="Label"
+                  errorMessage={
+                    form.getFieldState("label", form.formState).error?.message
+                  }
+                  htmlFor="wallet-label"
+                  isRequired={false}
+                >
                   <Input
+                    id="wallet-label"
                     type="text"
                     placeholder="Enter a descriptive label"
                     {...form.register("label")}
                   />
-                </FormControl>
+                </FormFieldSetup>
               </div>
-            </ModalBody>
+            </div>
 
-            <ModalFooter as={Flex} gap={3}>
-              <Button onClick={onClose} variant="ghost">
+            <DialogFooter className="!flex-row !justify-end mt-4 gap-3 border-border border-t bg-muted/50 p-6">
+              <Button onClick={() => setIsOpen(false)} variant="outline">
                 Cancel
               </Button>
-              <Button type="submit" colorScheme="primary">
+              <Button type="submit" className="min-w-28 gap-2">
+                {createWallet.isPending && <Spinner className="size-4" />}
                 Create
               </Button>
-            </ModalFooter>
+            </DialogFooter>
           </form>
-        </ModalContent>
-      </Modal>
+        </DialogContent>
+      </Dialog>
     </>
   );
-};
+}