Move Network Configuration Form+Modal to shadcn/tailwind (#4105)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR updates various UI components for consistency and usability.

### Detailed summary
- Updated styling for `ClaimConditionsForm`, `CustomChainRenderer`, `ToolTipLabel`, `RpcInput`, `ChainIdInput`, `TooltipBox`, `ConfigureNetworkModal`, `ResetClaimEligibility`, `NetworkIdInput`, `IconUpload`, and `ConfigureNetworks`.
- Replaced `TooltipBox` with `ToolTipLabel` and `CircleHelpIcon`.
- Added `Input` from `@/components/ui/input`.
- Removed unnecessary imports.
- Replaced `Modal` components with `Dialog` and `DialogContent`.
- Used `toast` for error notifications.
- Updated button styling and functionality.

> The following files were skipped due to too many changes: `apps/dashboard/src/components/configure-networks/ConfigureNetworks.tsx`, `apps/dashboard/src/pages/[chain_id]/[...paths].tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`

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

<!-- end pr-codex -->

Author: MananTank

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

@@ -31,7 +31,7 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
 
 export function ToolTipLabel(props: {
   children: React.ReactNode;
-  label: string | undefined;
+  label: React.ReactNode;
   rightIcon?: React.ReactNode;
   leftIcon?: React.ReactNode;
 }) {
@@ -47,7 +47,7 @@ export function ToolTipLabel(props: {
         </TooltipTrigger>
         <TooltipContent
           sideOffset={10}
-          className="max-w-[300px] leading-relaxed"
+          className="max-w-[400px] leading-relaxed"
         >
           <div className="p-2 text-sm flex items-center gap-1.5">
             {props.leftIcon}

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

@@ -1,13 +1,11 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 import {
   Alert,
   AlertIcon,
-  Flex,
   FormControl,
-  Input,
   Radio,
   RadioGroup,
-  SimpleGrid,
-  Stack,
 } from "@chakra-ui/react";
 import { ChainIcon } from "components/icons/ChainIcon";
 import type { StoredChain } from "contexts/configured-chains";
@@ -16,7 +14,7 @@ import { useSupportedChainsNameRecord } from "hooks/chains/configureChains";
 import { useRemoveChainModification } from "hooks/chains/useModifyChain";
 import { getDashboardChainRpc } from "lib/rpc";
 import { useForm } from "react-hook-form";
-import { Button, FormErrorMessage, FormLabel, Text } from "tw-components";
+import { FormErrorMessage, FormLabel } from "tw-components";
 import { ChainIdInput } from "./Form/ChainIdInput";
 import { ConfirmationPopover } from "./Form/ConfirmationPopover";
 import { IconUpload } from "./Form/IconUpload";
@@ -217,11 +215,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
 
   const submitBtn = (
     <Button
-      background="bgBlack"
-      color="bgWhite"
-      _hover={{
-        background: "bgBlack",
-      }}
+      variant="primary"
       type={disableSubmit ? "submit" : overwritingChain ? "button" : "submit"}
       disabled={disableSubmit}
     >
@@ -243,9 +237,6 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
         <Input
           autoComplete="off"
           placeholder="e.g. My Network"
-          _placeholder={{
-            fontWeight: 500,
-          }}
           type="text"
           onChange={(e) => {
             const value = e.target.value;
@@ -272,9 +263,9 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
       {/* Slug URL */}
       <NetworkIDInput form={form} disabled={!isFullyEditable} />
 
-      <Flex direction="column" gap={6} mt={6}>
+      <div className="flex flex-col gap-6 mt-6">
         {/* Chain ID + Currency Symbol */}
-        <SimpleGrid columns={{ md: 2, base: 1 }} gap={4}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <ChainIdInput form={form} disabled={!isFullyEditable} />
 
           {/* Currency Symbol */}
@@ -284,33 +275,29 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               disabled={!isFullyEditable}
               placeholder="e.g. ETH"
               autoComplete="off"
-              _placeholder={{
-                fontWeight: 500,
-              }}
               type="text"
               {...form.register("currencySymbol", { required: true })}
             />
           </FormControl>
-        </SimpleGrid>
+        </div>
 
-        <SimpleGrid columns={{ md: 2, base: 1 }} gap={4}>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {/* Testnet / Mainnet */}
           <FormControl>
-            <FormLabel display="flex">
+            <FormLabel className="!flex gap-1 items-center">
               Network type
               <TooltipBox
                 content={
                   <>
-                    <Text color="heading" display="inline-block" mb={2}>
-                      {" "}
+                    <span className="mb-2 block">
                       The network type indicates whether it is intended for
                       production or testing.
-                    </Text>
+                    </span>
 
-                    <Text color="heading">
+                    <span className="block">
                       It{`'`}s only used for displaying network type on the
                       dashboard and does not affect functionality.
-                    </Text>
+                    </span>
                   </>
                 }
               />
@@ -324,30 +311,30 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               }}
               value={form.watch("type")}
             >
-              <Stack direction="row" gap={4} mt={3}>
+              <div className="flex gap-4 mt-3">
                 <Radio value="mainnet">Mainnet</Radio>
                 <Radio value="testnet">Testnet</Radio>
-              </Stack>
+              </div>
             </RadioGroup>
           </FormControl>
 
           {/* Icon */}
           <FormControl isInvalid={!!form.formState.errors.icon}>
             <FormLabel>Icon</FormLabel>
 
-            <Flex gap={3} alignItems="center">
+            <div className="flex gap-1 items-center">
               <ChainIcon size={24} ipfsSrc={form.watch("icon")} />
               <IconUpload
                 onUpload={(uri) => {
                   form.setValue("icon", uri, { shouldDirty: true });
                 }}
               />
-            </Flex>
+            </div>
           </FormControl>
-        </SimpleGrid>
+        </div>
 
         {editingChain?.status === "deprecated" && (
-          <SimpleGrid columns={{ md: 2, base: 1 }} gap={4}>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {/* Active / Deprecated */}
             <FormControl>
               <FormLabel display="flex">Network status</FormLabel>
@@ -360,13 +347,13 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
                 }}
                 value={form.watch("status")}
               >
-                <Stack direction="row" gap={4} mt={3}>
+                <div className="flex mt-3 gap-4">
                   <Radio value="active">Live</Radio>
                   <Radio value="deprecated">Deprecated</Radio>
-                </Stack>
+                </div>
               </RadioGroup>
             </FormControl>
-          </SimpleGrid>
+          </div>
         )}
 
         {/* RPC URL */}
@@ -382,11 +369,7 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
         )}
 
         {/* Buttons  */}
-        <Flex
-          gap={4}
-          direction={{ base: "column", md: "row" }}
-          justifyContent={{ base: "center", md: "flex-end" }}
-        >
+        <div className="flex gap-4 flex-col md:flex-row justify-end">
           {/* Add / Update Button */}
           {overwritingChain && !disableSubmit ? (
             <ConfirmationPopover
@@ -417,8 +400,8 @@ export const ConfigureNetworkForm: React.FC<NetworkConfigFormProps> = ({
               Reset
             </Button>
           )}
-        </Flex>
-      </Flex>
+        </div>
+      </div>
     </form>
   );
 };

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

@@ -1,10 +1,4 @@
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalOverlay,
-} from "@chakra-ui/react";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
 import type { StoredChain } from "contexts/configured-chains";
 import { useSetEditChain } from "hooks/networkConfigModal";
 import { ConfigureNetworks } from "./ConfigureNetworks";
@@ -24,31 +18,26 @@ export const ConfigureNetworkModal: React.FC<AddNetworkModalProps> = (
   };
 
   return (
-    <Modal isOpen={true} onClose={onModalClose} isCentered>
-      <ModalOverlay />
-      <ModalContent
-        borderRadius="xl"
-        overflow="hidden"
-        w="500px"
-        mt={{ base: 8, md: 16 }}
-        mb={{ base: 0, md: 16 }}
-        maxW={{ base: "100vw", md: "calc(100vw - 40px)" }}
+    <Dialog
+      open={true}
+      onOpenChange={(v) => {
+        if (!v) {
+          onModalClose();
+        }
+      }}
+    >
+      <DialogContent
+        className="p-0 z-[10001] max-w-[480px]"
+        dialogOverlayClassName="z-[10000]"
       >
-        <ModalCloseButton />
-        <ModalBody
-          p={0}
-          _dark={{ background: "backgroundBody" }}
-          _light={{ background: "white" }}
-        >
-          <ConfigureNetworks
-            onNetworkAdded={(chain) => {
-              props.onNetworkAdded?.(chain);
-              onModalClose();
-            }}
-            onNetworkConfigured={onModalClose}
-          />
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        <ConfigureNetworks
+          onNetworkAdded={(chain) => {
+            props.onNetworkAdded?.(chain);
+            onModalClose();
+          }}
+          onNetworkConfigured={onModalClose}
+        />
+      </DialogContent>
+    </Dialog>
   );
 };

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

@@ -1,10 +1,9 @@
-import { Box, useToast } from "@chakra-ui/react";
 import type { StoredChain } from "contexts/configured-chains";
 import { useTrack } from "hooks/analytics/useTrack";
 import { useAddRecentlyUsedChainId } from "hooks/chains/recentlyUsedChains";
 import { useModifyChain } from "hooks/chains/useModifyChain";
 import { useEditChain } from "hooks/networkConfigModal";
-import { Heading } from "tw-components";
+import { toast } from "sonner";
 import { ConfigureNetworkForm } from "./ConfigureNetworkForm";
 
 function useChainConfigTrack() {
@@ -31,17 +30,6 @@ export const ConfigureNetworks: React.FC<ConfigureNetworksProps> = (props) => {
   const modifyChain = useModifyChain();
   const editChain = useEditChain();
 
-  const toast = useToast();
-
-  const successToast = (message: string) => {
-    toast({
-      title: message,
-      status: "success",
-      duration: 3000,
-      isClosable: true,
-    });
-  };
-
   const handleSubmit = (chain: StoredChain) => {
     modifyChain(chain);
     addRecentlyUsedChainId(chain.chainId);
@@ -52,44 +40,29 @@ export const ConfigureNetworks: React.FC<ConfigureNetworksProps> = (props) => {
       }
 
       trackChainConfig("add", chain);
-      successToast("Network Added Successfully");
+      toast.success("Network Added Successfully");
     } else {
       if (props.onNetworkConfigured) {
         props.onNetworkConfigured(chain);
       }
 
       trackChainConfig("update", chain);
-      successToast("Network Updated Successfully");
+      toast.success("Network Updated Successfully");
     }
   };
 
   return (
-    <Box
-      p={{ base: 4, md: 8 }}
-      minH="600px"
-      borderTop={{ md: "none", base: "1px solid" }}
-      marginTop={{ base: 6, md: 0 }}
-      borderColor="inputBg"
-    >
-      <Heading
-        as={"h3"}
-        size="label.xl"
-        mb={8}
-        display="flex"
-        gap={2}
-        alignItems="center"
-      >
+    <div className="p-6">
+      <h3 className="text-2xl font-semibold tracking-tight mb-5">
         {editChain ? "Edit Network" : "Add Custom Network"}
-      </Heading>
+      </h3>
 
       {/* Modify the given chain */}
       {editChain && (
-        <Box mt={9}>
-          <ConfigureNetworkForm
-            editingChain={editChain}
-            onSubmit={handleSubmit}
-          />
-        </Box>
+        <ConfigureNetworkForm
+          editingChain={editChain}
+          onSubmit={handleSubmit}
+        />
       )}
 
       {/* Custom chain */}
@@ -100,6 +73,6 @@ export const ConfigureNetworks: React.FC<ConfigureNetworksProps> = (props) => {
           onSubmit={handleSubmit}
         />
       )}
-    </Box>
+    </div>
   );
 };

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

@@ -1,11 +1,11 @@
-import { FormControl, Input } from "@chakra-ui/react";
+import { Input } from "@/components/ui/input";
+import { FormControl } from "@chakra-ui/react";
 import type { UseFormReturn } from "react-hook-form";
 import { FormLabel } from "tw-components";
 import type { NetworkConfigFormData } from "../ConfigureNetworkForm";
 
 export const ChainIdInput: React.FC<{
-  // biome-ignore lint/suspicious/noExplicitAny: FIXME
-  form: UseFormReturn<NetworkConfigFormData, any>;
+  form: UseFormReturn<NetworkConfigFormData>;
   disabled: boolean;
 }> = ({ form, disabled }) => {
   return (
@@ -18,9 +18,6 @@ export const ChainIdInput: React.FC<{
         disabled={disabled}
         placeholder="e.g. 152"
         autoComplete="off"
-        _placeholder={{
-          fontWeight: 500,
-        }}
         onKeyDown={(e) => {
           // prevent typing e, +, -
           if (e.key === "e" || e.key === "+" || e.key === "-") {