Dashboard: Migrate engine/relayers page from chakra to tailwind, remove chakra provider from engine layout (#7724)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring components related to relayers in a blockchain dashboard application, improving the user interface and functionality of forms, modals, and data handling for adding, editing, and removing relayers.

### Detailed summary
- Removed `preventOpenOnFocus` prop from several components.
- Updated `WalletAddress` component to streamline address handling.
- Refactored `AddRelayerButton` and `EditModal` to use new dialog components.
- Enhanced form validation using `zod` for relayer forms.
- Improved UI with consistent styling and layout adjustments.
- Updated `RelayersTable` to use new UI components and improved address display.
- Added error handling and success notifications for relayer actions.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/wallet-address.tsx

@@ -23,7 +23,6 @@ export function WalletAddress(props: {
   className?: string;
   iconClassName?: string;
   client: ThirdwebClient;
-  preventOpenOnFocus?: boolean;
 }) {
   // default back to zero address if no address provided
   const address = useMemo(() => props.address || ZERO_ADDRESS, [props.address]);
@@ -68,10 +67,7 @@ export function WalletAddress(props: {
 
   return (
     <HoverCard>
-      <HoverCardTrigger
-        asChild
-        tabIndex={props.preventOpenOnFocus ? -1 : undefined}
-      >
+      <HoverCardTrigger asChild tabIndex={-1}>
         <Button
           className={cn(
             "flex flex-row items-center gap-2 px-0",

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/token-viewer/token-viewer.tsx

@@ -269,7 +269,6 @@ function TokenInfoUI(props: {
                     className="h-auto py-0 text-sm"
                     client={props.contract.client}
                     iconClassName="hidden"
-                    preventOpenOnFocus
                   />
                 </div>
               ) : (

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/layout.tsx

@@ -1,4 +1,3 @@
-import { ChakraProviderSetup } from "chakra/ChakraProviderSetup";
 import { getAuthToken } from "@/api/auth-token";
 import {
   Breadcrumb,
@@ -59,32 +58,30 @@ export default async function Layout(props: {
   }
 
   return (
-    <ChakraProviderSetup>
-      <div className="flex grow flex-col">
-        <EngineInstanceHeader
-          instance={instance}
-          rootPath={engineRootLayoutPath}
-          teamSlug={params.team_slug}
-        />
+    <div className="flex grow flex-col">
+      <EngineInstanceHeader
+        instance={instance}
+        rootPath={engineRootLayoutPath}
+        teamSlug={params.team_slug}
+      />
 
-        <EngineSidebarLayout
+      <EngineSidebarLayout
+        engineId={params.engineId}
+        projectSlug={params.project_slug}
+        teamSlug={params.team_slug}
+      >
+        <EnsureEnginePermission
+          accountId={account.id}
+          authToken={authToken}
           engineId={params.engineId}
+          instance={instance}
           projectSlug={params.project_slug}
           teamSlug={params.team_slug}
         >
-          <EnsureEnginePermission
-            accountId={account.id}
-            authToken={authToken}
-            engineId={params.engineId}
-            instance={instance}
-            projectSlug={params.project_slug}
-            teamSlug={params.team_slug}
-          >
-            <div>{props.children}</div>
-          </EnsureEnginePermission>
-        </EngineSidebarLayout>
-      </div>
-    </ChakraProviderSetup>
+          <div>{props.children}</div>
+        </EnsureEnginePermission>
+      </EngineSidebarLayout>
+    </div>
   );
 }
 

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/backend-wallets-table.tsx

@@ -404,7 +404,6 @@ function EditModalContent({
               <WalletAddress
                 address={backendWallet.address}
                 client={client}
-                preventOpenOnFocus
                 iconClassName="size-4"
                 className="h-auto py-0"
               />
@@ -609,7 +608,6 @@ const SendFundsModal = ({
                   address={fromWallet.address}
                   client={client}
                   iconClassName="size-4"
-                  preventOpenOnFocus
                   className="h-auto py-0"
                 />
               </div>
@@ -802,7 +800,6 @@ function DeleteModal({
             <WalletAddress
               address={backendWallet.address}
               client={client}
-              preventOpenOnFocus
               iconClassName="size-4"
               className="h-auto py-1"
             />

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/transaction-timeline.tsx

@@ -278,7 +278,6 @@ function CancelTransactionButton({
               shortenAddress={false}
               className="h-auto py-1"
               iconClassName="size-4"
-              preventOpenOnFocus
             />
           </div>