From 367a25ca5a8fc818f0e269bd56a6ea8ff3f5927f Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 25 Jul 2025 01:13:51 +0000
Subject: [PATCH] Dashboard: Migrate Explorer components from chakra to
 tailwind (#7707)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 improving the UI components and functionality of the `ContractExplorerPage` and related components in the dashboard by refining layout, enhancing accessibility, and optimizing code structure.

### Detailed summary
- Updated layout for `ContractExplorerPage` to enhance UI consistency.
- Improved header elements for better accessibility.
- Refined tab structure in `ContractFunctionsOverview` for better navigation.
- Enhanced styling of buttons and inputs for a more modern look.
- Replaced `Card` components with simpler layouts where applicable.
- Introduced new utility functions for class name management.
- Optimized the handling of function inputs and outputs in `InteractiveAbiFunction`.
- Adjusted the rendering of function and event lists for improved clarity.

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

<!-- end pr-codex -->
---
 .../@/components/blocks/FormFieldSetup.tsx    |  14 +-
 .../blocks/code/code-segment.client.tsx       |   8 +-
 .../functions/contract-function-comment.tsx   |  11 +-
 .../contracts/functions/contract-function.tsx | 443 +++++++-----------
 .../functions/contract-functions.tsx          | 175 ++++---
 .../functions/interactive-abi-function.tsx    | 242 +++++-----
 .../contracts/published-contract/index.tsx    |  16 +-
 .../components/solidity-inputs/bool-input.tsx |   6 +-
 .../explorer/ContractExplorerPage.tsx         |   2 +-
 9 files changed, 394 insertions(+), 523 deletions(-)

diff --git a/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx b/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
index d1cdfdfee71..ce1871d3fe0 100644
--- a/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
+++ b/apps/dashboard/src/@/components/blocks/FormFieldSetup.tsx
@@ -2,6 +2,7 @@ import { AsteriskIcon, InfoIcon } from "lucide-react";
 import type React from "react";
 import { Label } from "@/components/ui/label";
 import { ToolTipLabel } from "@/components/ui/tooltip";
+import { cn } from "../../lib/utils";
 
 export function FormFieldSetup(props: {
   htmlFor?: string;
@@ -10,13 +11,22 @@ export function FormFieldSetup(props: {
   children: React.ReactNode;
   tooltip?: React.ReactNode;
   isRequired: boolean;
+  labelClassName?: string;
+  labelContainerClassName?: string;
   helperText?: React.ReactNode;
   className?: string;
 }) {
   return (
     <div className={props.className}>
-      <div className="mb-2 inline-flex items-center gap-1">
-        <Label htmlFor={props.htmlFor}>{props.label}</Label>
+      <div
+        className={cn(
+          "mb-2 inline-flex items-center gap-1",
+          props.labelContainerClassName,
+        )}
+      >
+        <Label htmlFor={props.htmlFor} className={props.labelClassName}>
+          {props.label}
+        </Label>
 
         {props.isRequired && (
           <AsteriskIcon className="size-3.5 text-destructive-text" />
diff --git a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
index ea826517cab..78d2f4f14ad 100644
--- a/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
+++ b/apps/dashboard/src/@/components/blocks/code/code-segment.client.tsx
@@ -3,6 +3,7 @@ import type React from "react";
 import { type Dispatch, type SetStateAction, useMemo } from "react";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { TabButtons } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
 
 export type CodeEnvironment =
   | "javascript"
@@ -50,6 +51,7 @@ interface CodeSegmentProps {
   isInstallCommand?: boolean;
   hideTabs?: boolean;
   onlyTabs?: boolean;
+  codeContainerClassName?: string;
 }
 
 export const CodeSegment: React.FC<CodeSegmentProps> = ({
@@ -59,6 +61,7 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
   isInstallCommand,
   hideTabs,
   onlyTabs,
+  codeContainerClassName,
 }) => {
   const activeEnvironment: CodeEnvironment = useMemo(() => {
     return (
@@ -106,7 +109,10 @@ export const CodeSegment: React.FC<CodeSegmentProps> = ({
 
       {onlyTabs ? null : (
         <CodeClient
-          className="rounded-none border-none grow"
+          className={cn(
+            "rounded-none border-none grow",
+            codeContainerClassName,
+          )}
           scrollableContainerClassName="h-full"
           code={code}
           lang={
diff --git a/apps/dashboard/src/@/components/contracts/functions/contract-function-comment.tsx b/apps/dashboard/src/@/components/contracts/functions/contract-function-comment.tsx
index 8d47f89eae7..7e347cad6aa 100644
--- a/apps/dashboard/src/@/components/contracts/functions/contract-function-comment.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/contract-function-comment.tsx
@@ -22,15 +22,16 @@ export default function ContractFunctionComment({
     return null;
   }
   return (
-    <>
-      <p className="mt-6">
+    <div>
+      <h3 className="text-base font-semibold mt-6 mb-3">
         About this function <Badge>Beta</Badge>
-      </p>
+      </h3>
       <CodeClient
         code={query.data}
         copyButtonClassName="hidden"
-        lang="wikitext"
+        lang="solidity"
+        className="bg-background"
       />
-    </>
+    </div>
   );
 }
diff --git a/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx b/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
index 409cbca40b5..ddf50ba5d71 100644
--- a/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/contract-function.tsx
@@ -1,32 +1,7 @@
 "use client";
 
-import {
-  Box,
-  Divider,
-  Flex,
-  GridItem,
-  Image,
-  List,
-  SimpleGrid,
-  Tab,
-  TabList,
-  Table,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react";
 import type { AbiEvent, AbiFunction } from "abitype";
-import { Button } from "chakra/button";
-import { Card } from "chakra/card";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
 import { SearchIcon } from "lucide-react";
-import { usePathname, useSearchParams } from "next/navigation";
 import {
   type Dispatch,
   lazy,
@@ -45,12 +20,21 @@ import {
   type CodeEnvironment,
   CodeSegment,
 } from "@/components/blocks/code/code-segment.client";
-import { camelToTitle } from "@/components/solidity-inputs/helpers";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Input } from "@/components/ui/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { TabButtons } from "@/components/ui/tabs";
 import { useContractFunctionSelectors } from "@/hooks/contract-ui/useContractFunctionSelectors";
-import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { cn } from "@/lib/utils";
 import { COMMANDS, formatSnippet } from "../code-overview";
 import { InteractiveAbiFunction } from "./interactive-abi-function";
@@ -137,25 +121,21 @@ function ContractFunctionInner(props: ContractFunctionProps) {
   });
 
   return (
-    <Flex direction="column" gap={1.5}>
-      <Flex alignItems="center" direction="row" flexWrap="wrap" gap={2}>
-        <Flex alignItems="baseline" flexWrap="wrap" gap={1}>
-          <Heading size="subtitle.md">{camelToTitle(fn.name)}</Heading>
-          <Heading className="text-muted-foreground" size="subtitle.sm">
-            ({fn.name})
-          </Heading>
-        </Flex>
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center flex-wrap gap-2 border-b pb-3 mb-3">
+        <h3 className="text-lg font-semibold">{fn.name}</h3>
         {isFunction && <Badge variant="success">{fn.stateMutability}</Badge>}
         {functionSelector && (
           <CopyTextButton
-            className="ml-auto text-xs"
+            className="ml-auto text-xs font-mono py-1"
             copyIconPosition="right"
             textToCopy={functionSelector}
             textToShow={functionSelector}
             tooltip="The selector of this function"
           />
         )}
-      </Flex>
+      </div>
+
       {isFunction && (
         <InteractiveAbiFunction
           abiFunction={fn}
@@ -166,20 +146,20 @@ function ContractFunctionInner(props: ContractFunctionProps) {
       )}
 
       {codeSnippet && (
-        <>
-          <Heading mt={6} size="subtitle.md">
+        <div>
+          <h3 className="text-base font-semibold mt-6 mb-3">
             Use this function in your app
-          </Heading>
-          <Divider mb={2} />
+          </h3>
           <CodeSegment
             environment={environment}
             setEnvironment={setEnvironment}
             snippet={codeSnippet}
+            codeContainerClassName="bg-background"
           />
-        </>
+        </div>
       )}
       <ContractFunctionComment contract={contract} functionName={fn.name} />
-    </Flex>
+    </div>
   );
 }
 
@@ -188,84 +168,46 @@ function ContractFunctionInputs(props: { fn: AbiFunction | AbiEvent }) {
   const isFunction = "stateMutability" in fn;
 
   return (
-    <Flex direction="column" gap={1.5}>
-      <Flex
-        alignItems={{ base: "start", md: "center" }}
-        direction={{ base: "column", md: "row" }}
-        gap={2}
-      >
-        <Flex alignItems="baseline" flexWrap="wrap" gap={1}>
-          <Heading size="subtitle.md">{camelToTitle(fn.name)}</Heading>
-          <Heading className="text-muted-foreground" size="subtitle.sm">
-            ({fn.name})
-          </Heading>
-        </Flex>
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center flex-wrap gap-2 border-b pb-3 mb-3">
+        <h3 className="text-lg font-semibold">{fn.name}</h3>
         {isFunction && <Badge variant="success">{fn.stateMutability}</Badge>}
-      </Flex>
+      </div>
 
       {fn.inputs?.length ? (
-        <>
-          <Divider my={2} />
-          <Flex flexDir="column" gap={3}>
-            <Heading size="label.lg">Inputs</Heading>
-            <Box
-              borderTopRadius="lg"
-              overflowX="auto"
-              p={0}
-              position="relative"
-            >
-              <Table size="sm">
-                <Thead>
-                  <Tr>
-                    <Th border="none">
-                      <Heading as="label" color="faded" size="label.sm">
-                        Name
-                      </Heading>
-                    </Th>
-                    <Th border="none">
-                      <Heading as="label" color="faded" size="label.sm">
-                        Type
-                      </Heading>
-                    </Th>
-                  </Tr>
-                </Thead>
-                <Tbody>
-                  {fn.inputs.map((input, idx) => (
-                    <Tr
-                      _last={{ borderBottomWidth: 0 }}
-                      borderBottomWidth={1}
-                      key={`${input.name}+${idx}}`}
-                    >
-                      <Td
-                        borderBottomColor="borderColor"
-                        borderBottomWidth="inherit"
-                      >
-                        {input?.name ? (
-                          <Text fontFamily="mono">{input.name}</Text>
-                        ) : (
-                          <Text
-                            className="text-muted-foreground"
-                            fontStyle="italic"
-                          >
-                            No name defined
-                          </Text>
-                        )}
-                      </Td>
-                      <Td
-                        borderBottomColor="borderColor"
-                        borderBottomWidth="inherit"
-                      >
-                        <Text fontFamily="mono">{input.type}</Text>
-                      </Td>
-                    </Tr>
-                  ))}
-                </Tbody>
-              </Table>
-            </Box>
-          </Flex>
-        </>
+        <div>
+          <h4 className="text-base font-semibold mb-3">Inputs</h4>
+          <TableContainer>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Type</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {fn.inputs.map((input, idx) => (
+                  <TableRow key={`${input.name}+${idx}}`}>
+                    <TableCell className="font-medium py-3">
+                      {input?.name ? (
+                        <span className="font-mono">{input.name}</span>
+                      ) : (
+                        <span className="text-muted-foreground italic">
+                          No name defined
+                        </span>
+                      )}
+                    </TableCell>
+                    <TableCell className="py-3">
+                      <span className="font-mono">{input.type}</span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </div>
       ) : null}
-    </Flex>
+    </div>
   );
 }
 
@@ -296,6 +238,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
     });
     return results;
   }, [fnsOrEvents]);
+
   const writeFunctions: ExtensionFunctions[] = useMemo(() => {
     return functionsWithExtension
       .map((e) => {
@@ -313,6 +256,7 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
       })
       .filter((e) => e !== undefined) as ExtensionFunctions[];
   }, [functionsWithExtension]);
+
   const viewFunctions: ExtensionFunctions[] = useMemo(() => {
     return functionsWithExtension
       .map((e) => {
@@ -336,166 +280,109 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
     return fnsOrEvents.filter((fn) => !("stateMutability" in fn)) as AbiEvent[];
   }, [fnsOrEvents]);
 
-  // Load state from the URL
-  const searchParams = useSearchParams();
-  const _selector = searchParams?.get("selector");
-  const _item = _selector
-    ? fnsOrEvents.find((o) => {
-        if (o.type === "function") {
-          const selector = toFunctionSelector(o as AbiFunction);
-          return selector === _selector;
-        }
-        return null;
-      })
-    : undefined;
-
   const [selectedFunction, setSelectedFunction] = useState<
     AbiFunction | AbiEvent | undefined
-  >(_item ?? fnsOrEvents[0]);
-  // Set the active tab to Write or Read depends on the `_item`
-  const _defaultTabIndex =
-    _item &&
-    "stateMutability" in _item &&
-    (_item.stateMutability === "view" || _item.stateMutability === "pure")
-      ? 1
-      : 0;
+  >(fnsOrEvents[0]);
 
   const [_keywordSearch, setKeywordSearch] = useState<string>("");
   const [keywordSearch] = useDebounce(_keywordSearch, 150);
 
+  const [activeTab, setActiveTab] = useState<number>(0);
+
   const functionSection = (e: ExtensionFunctions) => {
     const filteredFunctions = keywordSearch
       ? e.functions.filter((o) =>
           o.name.toLowerCase().includes(keywordSearch.toLowerCase()),
         )
       : e.functions;
+
     return (
-      <Flex flexDir="column" key={e.extension} mb={6}>
-        {e.extension ? (
-          <>
-            <Flex alignContent="center" alignItems="center" gap={2}>
-              <Image
-                alt="Extension detected"
-                mb="2px"
-                objectFit="contain"
-                src="/assets/dashboard/extension-check.svg"
+      <div key={e.extension} className="pb-6">
+        <div className="flex flex-col gap-0.5">
+          {selectedFunction &&
+            filteredFunctions.map((fn) => (
+              <FunctionsOrEventsListItem
+                fn={fn}
+                key={`${fn.name}_${fn.type}_${fn.inputs.length}`}
+                selectedFunction={selectedFunction}
+                setSelectedFunction={setSelectedFunction}
               />
-              <Heading as="label" size="label.md">
-                {e.extension}
-              </Heading>
-            </Flex>
-            <Divider my={2} />
-          </>
-        ) : (
-          <>
-            <Flex alignContent="center" alignItems="center" gap={2}>
-              <Heading as="label" size="label.md">
-                Other Functions
-              </Heading>
-            </Flex>
-            <Divider my={2} />
-          </>
-        )}
-        {selectedFunction &&
-          filteredFunctions.map((fn) => (
-            <FunctionsOrEventsListItem
-              fn={fn}
-              key={`${fn.name}_${fn.type}_${fn.inputs.length}`}
-              selectedFunction={selectedFunction}
-              setSelectedFunction={setSelectedFunction}
-            />
-          ))}
-      </Flex>
+            ))}
+        </div>
+      </div>
     );
   };
 
   return (
-    <SimpleGrid columns={12} gap={5} height="100%">
-      <GridItem
-        as={Card}
-        className="bg-card"
-        colSpan={{ base: 12, md: 4 }}
-        height="100%"
-        overflow="auto"
-        overflowY="auto"
-        pt={0}
-        px={0}
-      >
-        <List height="100%" overflowX="hidden">
-          {(writeFunctions.length > 0 || viewFunctions.length > 0) && (
-            <Tabs
-              colorScheme="gray"
-              defaultIndex={_defaultTabIndex}
-              display="flex"
-              flexDir="column"
-              h="100%"
-              position="relative"
-            >
-              <TabList as={Flex}>
-                {writeFunctions.length > 0 && (
-                  <Tab flex="1 1 0" gap={2}>
-                    <Heading color="inherit" my={1} size="label.md">
-                      Write
-                    </Heading>
-                  </Tab>
-                )}
-                {viewFunctions.length > 0 && (
-                  <Tab flex="1 1 0" gap={2}>
-                    <Heading color="inherit" my={1} size="label.md">
-                      Read
-                    </Heading>
-                  </Tab>
-                )}
-              </TabList>
-
-              <div className="sticky top-0 z-[1]">
-                <div className="relative w-full">
-                  <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
-                  <Input
-                    className="h-auto rounded-none border-x-0 bg-card py-3 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0"
-                    onChange={(e) => setKeywordSearch(e.target.value)}
-                    placeholder="Search"
-                    value={_keywordSearch}
-                  />
-                </div>
-              </div>
+    <div className="grid grid-cols-1 lg:grid-cols-[1fr_2fr] gap-4 h-full">
+      {/* left */}
+      <div className="bg-card rounded-lg border overflow-auto">
+        {(writeFunctions.length > 0 || viewFunctions.length > 0) && (
+          <div className="flex flex-col h-full relative">
+            <TabButtons
+              tabContainerClassName="px-3 pt-2"
+              tabClassName="!text-sm"
+              tabs={[
+                ...(writeFunctions.length > 0
+                  ? [
+                      {
+                        name: "Write",
+                        onClick: () => setActiveTab(0),
+                        isActive: activeTab === 0,
+                      },
+                    ]
+                  : []),
+                ...(viewFunctions.length > 0
+                  ? [
+                      {
+                        name: "Read",
+                        onClick: () => setActiveTab(1),
+                        isActive: activeTab === 1,
+                      },
+                    ]
+                  : []),
+              ]}
+            />
 
-              <TabPanels h="auto" overflow="auto">
-                {writeFunctions.length > 0 && (
-                  <TabPanel>
-                    {writeFunctions.map((e) => functionSection(e))}
-                  </TabPanel>
-                )}
-                {viewFunctions.length > 0 && (
-                  <TabPanel>
-                    {viewFunctions.map((e) => functionSection(e))}
-                  </TabPanel>
-                )}
-              </TabPanels>
-            </Tabs>
-          )}
-
-          {events.length > 0 && selectedFunction && (
-            <Box overflowX="hidden" pt={2} px={4}>
-              {events.map((fn) => (
-                <FunctionsOrEventsListItem
-                  fn={fn}
-                  key={`${fn.name}_${fn.type}_${fn.inputs.length}`}
-                  selectedFunction={selectedFunction}
-                  setSelectedFunction={setSelectedFunction}
+            <div className="sticky top-0 z-[1]">
+              <div className="relative w-full">
+                <SearchIcon className="-translate-y-1/2 absolute top-[50%] left-3 size-4 text-muted-foreground" />
+                <Input
+                  className="h-auto rounded-none border-x-0 border-t-0 bg-card py-3 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  onChange={(e) => setKeywordSearch(e.target.value)}
+                  placeholder="Search"
+                  value={_keywordSearch}
                 />
-              ))}
-            </Box>
-          )}
-        </List>
-      </GridItem>
-      <GridItem
-        as={Card}
-        className="bg-card"
-        colSpan={{ base: 12, md: 8 }}
-        height="100%"
-        overflow="auto"
-      >
+              </div>
+            </div>
+
+            <div className="h-auto overflow-auto pt-2 px-2">
+              {activeTab === 0 &&
+                writeFunctions.length > 0 &&
+                writeFunctions.map((e) => functionSection(e))}
+
+              {activeTab === 1 &&
+                viewFunctions.length > 0 &&
+                viewFunctions.map((e) => functionSection(e))}
+            </div>
+          </div>
+        )}
+        {events.length > 0 && selectedFunction && (
+          <div className="pt-2 px-4">
+            {events.map((fn) => (
+              <FunctionsOrEventsListItem
+                fn={fn}
+                key={`${fn.name}_${fn.type}_${fn.inputs.length}`}
+                selectedFunction={selectedFunction}
+                setSelectedFunction={setSelectedFunction}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* right */}
+      <div className="bg-card rounded-lg border p-4 overflow-auto">
         {selectedFunction && (
           <ContractFunction
             contract={contract}
@@ -503,8 +390,8 @@ export const ContractFunctionsPanel: React.FC<ContractFunctionsPanelProps> = ({
             isLoggedIn={isLoggedIn}
           />
         )}
-      </GridItem>
-    </SimpleGrid>
+      </div>
+    </div>
   );
 };
 
@@ -524,31 +411,19 @@ const FunctionsOrEventsListItem: React.FC<FunctionsOrEventsListItemProps> = ({
   const isActive =
     selectedFunction?.name === fn.name &&
     selectedFunction.inputs?.length === fn.inputs?.length;
-  const pathname = usePathname();
-  const router = useDashboardRouter();
   return (
-    <li className="my-1">
-      <Button
-        className={cn(
-          "!font-medium !text-muted-foreground hover:!text-foreground font-mono",
-          {
-            "!text-foreground": isActive,
-          },
-        )}
-        onClick={() => {
-          setSelectedFunction(fn);
-
-          // Only apply to the Explorer page
-          if (pathname?.endsWith("/explorer") && fn.type === "function") {
-            const selector = toFunctionSelector(fn);
-            router.push(`${pathname}?selector=${selector}`);
-          }
-        }}
-        size="sm"
-        variant="link"
-      >
-        {fn.name}
-      </Button>
-    </li>
+    <Button
+      className={cn(
+        "text-muted-foreground hover:text-foreground font-mono w-full justify-start h-auto px-2 py-1",
+        isActive && "text-foreground bg-accent",
+      )}
+      onClick={() => {
+        setSelectedFunction(fn);
+      }}
+      size="sm"
+      variant="ghost"
+    >
+      {fn.name}
+    </Button>
   );
 };
diff --git a/apps/dashboard/src/@/components/contracts/functions/contract-functions.tsx b/apps/dashboard/src/@/components/contracts/functions/contract-functions.tsx
index 8ff59d87863..4a600386b90 100644
--- a/apps/dashboard/src/@/components/contracts/functions/contract-functions.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/contract-functions.tsx
@@ -1,19 +1,12 @@
 "use client";
 
-import {
-  Flex,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-} from "@chakra-ui/react";
 import type { Abi, AbiEvent, AbiFunction } from "abitype";
-import { Heading } from "chakra/heading";
+import { useState } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { SourcesPanel } from "@/components/contract-components/shared/sources-panel";
 import type { SourceFile } from "@/components/contract-components/types";
 import { CodeOverview } from "@/components/contracts/code-overview";
+import { TabButtons } from "@/components/ui/tabs";
 import { ContractFunctionsPanel } from "./contract-function";
 
 interface ContractFunctionsOverview {
@@ -26,6 +19,8 @@ interface ContractFunctionsOverview {
   isLoggedIn: boolean;
 }
 
+type Tab = "functions" | "events" | "code" | "sources";
+
 export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
   functions,
   events,
@@ -35,90 +30,94 @@ export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
   onlyFunctions,
   isLoggedIn,
 }) => {
+  const [activeTab, setActiveTab] = useState<Tab | undefined>(() => {
+    if (functions && functions.length > 0) return "functions";
+    if (events && events.length > 0) return "events";
+    if (abi) return "code";
+    if (sources && sources.length > 0) return "sources";
+    return undefined;
+  });
+
   if (onlyFunctions) {
-    return (
-      <Flex flexDir="column" gap={2} height="100%">
-        {functions && functions.length > 0 && (
+    if (functions && functions.length > 0) {
+      return (
+        <ContractFunctionsPanel
+          contract={contract}
+          fnsOrEvents={functions}
+          isLoggedIn={isLoggedIn}
+        />
+      );
+    }
+    return null;
+  }
+
+  // Tab index: 0 = Functions, 1 = Events, 2 = Code, 3 = Sources
+  const tabOptions = [
+    ...(functions && functions.length > 0
+      ? [
+          {
+            name: "Functions",
+            onClick: () => setActiveTab("functions"),
+            isActive: activeTab === "functions",
+          },
+        ]
+      : []),
+    ...(events && events.length > 0
+      ? [
+          {
+            name: "Events",
+            onClick: () => setActiveTab("events"),
+            isActive: activeTab === "events",
+          },
+        ]
+      : []),
+    ...(abi
+      ? [
+          {
+            name: "Code",
+            onClick: () => setActiveTab("code"),
+            isActive: activeTab === "code",
+          },
+        ]
+      : []),
+    ...(sources && sources.length > 0
+      ? [
+          {
+            name: "Sources",
+            onClick: () => setActiveTab("sources"),
+            isActive: activeTab === "sources",
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <div>
+      <TabButtons tabs={tabOptions} />
+      <div className="pt-4">
+        {functions && functions.length > 0 && activeTab === "functions" && (
+          <div className="h-[70vh]">
+            <ContractFunctionsPanel
+              contract={contract}
+              fnsOrEvents={functions}
+              isLoggedIn={isLoggedIn}
+            />
+          </div>
+        )}
+        {events && events.length > 0 && activeTab === "events" && (
           <ContractFunctionsPanel
             contract={contract}
-            fnsOrEvents={functions}
+            fnsOrEvents={events}
             isLoggedIn={isLoggedIn}
           />
         )}
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex flexDir="column" gap={2} w="100%">
-      <Tabs colorScheme="gray" isLazy lazyBehavior="keepMounted">
-        <TabList borderBottomColor="borderColor" borderBottomWidth="1px" px={0}>
-          {functions && functions.length > 0 ? (
-            <Tab>
-              <Heading color="inherit" my={1} size="label.lg">
-                Functions
-              </Heading>
-            </Tab>
-          ) : null}
-          {events?.length ? (
-            <Tab>
-              <Heading color="inherit" my={1} size="label.lg">
-                Events
-              </Heading>
-            </Tab>
-          ) : null}
-          {abi && (
-            <Tab>
-              <Heading color="inherit" my={1} size="label.lg">
-                Code
-              </Heading>
-            </Tab>
-          )}
-          {sources && sources?.length > 0 && (
-            <Tab>
-              <Heading color="inherit" my={1} size="label.lg">
-                Sources
-              </Heading>
-            </Tab>
-          )}
-        </TabList>
-        <TabPanels py={2}>
-          {functions && functions.length > 0 ? (
-            <TabPanel h="40rem">
-              <ContractFunctionsPanel
-                contract={contract}
-                fnsOrEvents={functions}
-                isLoggedIn={isLoggedIn}
-              />
-            </TabPanel>
-          ) : null}
-          {events && events?.length > 0 ? (
-            <TabPanel>
-              <ContractFunctionsPanel
-                contract={contract}
-                fnsOrEvents={events}
-                isLoggedIn={isLoggedIn}
-              />
-            </TabPanel>
-          ) : null}
-          {abi && (
-            <TabPanel>
-              <div className="flex flex-col gap-6">
-                <CodeOverview
-                  abi={abi}
-                  chainId={contract?.chain.id || 1}
-                  noSidebar
-                />
-              </div>
-            </TabPanel>
-          )}
-          {(sources || abi) && (
-            <TabPanel>
-              <SourcesPanel abi={abi} sources={sources} />
-            </TabPanel>
-          )}
-        </TabPanels>
-      </Tabs>
-    </Flex>
+        {abi && activeTab === "code" && (
+          <CodeOverview abi={abi} chainId={contract?.chain.id || 1} noSidebar />
+        )}
+        {sources && sources.length > 0 && activeTab === "sources" && (
+          <SourcesPanel abi={abi} sources={sources} />
+        )}
+      </div>
+    </div>
   );
 };
diff --git a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
index f3ed55be2bd..470ad6d79f1 100644
--- a/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
+++ b/apps/dashboard/src/@/components/contracts/functions/interactive-abi-function.tsx
@@ -1,20 +1,13 @@
 "use client";
 
-import {
-  ButtonGroup,
-  Divider,
-  Flex,
-  FormControl,
-  Input,
-} from "@chakra-ui/react";
 import { useMutation } from "@tanstack/react-query";
 import { type AbiFunction, type AbiParameter, formatAbiItem } from "abitype";
-import { Button } from "chakra/button";
-import { Card } from "chakra/card";
-import { FormErrorMessage, FormHelperText, FormLabel } from "chakra/form";
-import { Heading } from "chakra/heading";
-import { Text } from "chakra/text";
-import { ExternalLinkIcon, InfoIcon, PlayIcon } from "lucide-react";
+import {
+  ExternalLinkIcon,
+  InfoIcon,
+  PlayIcon,
+  RefreshCcwIcon,
+} from "lucide-react";
 import Link from "next/link";
 import { useEffect, useId, useMemo, useState } from "react";
 import { FormProvider, useFieldArray, useForm } from "react-hook-form";
@@ -29,16 +22,19 @@ import {
 } from "thirdweb";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
 import { parseAbiParams, stringify, toFunctionSelector } from "thirdweb/utils";
+import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { SolidityInput } from "@/components/solidity-inputs";
 import { camelToTitle } from "@/components/solidity-inputs/helpers";
 import { TransactionButton } from "@/components/tx-button";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { CodeClient } from "@/components/ui/code/code.client";
 import { PlainTextCodeBlock } from "@/components/ui/code/plaintext-code";
 import { InlineCode } from "@/components/ui/inline-code";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Skeleton } from "@/components/ui/skeleton";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { UnderlineLink } from "@/components/ui/UnderlineLink";
-import { replaceIpfsUrl } from "@/lib/sdk";
 
 function formatResponseData(data: unknown): {
   type: "json" | "text";
@@ -122,11 +118,11 @@ function formatContractCall(
   return parsedParams;
 }
 
-interface InteractiveAbiFunctionProps {
+type InteractiveAbiFunctionProps = {
   abiFunction: AbiFunction;
   contract: ThirdwebContract;
   isLoggedIn: boolean;
-}
+};
 
 function useAsyncRead(contract: ThirdwebContract, abiFunction: AbiFunction) {
   const formattedAbi = formatAbiItem({
@@ -366,97 +362,72 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
 
   return (
     <FormProvider {...form}>
-      <Card
-        as={Flex}
-        bg="transparent"
-        border="none"
-        borderRadius="none"
-        boxShadow="none"
-        flexDirection="column"
-        flexGrow={1}
-        gap={4}
-        gridColumn={{ base: "span 12", md: "span 9" }}
-        p={0}
-        w="100%"
-      >
-        <Flex
-          as="form"
-          direction="column"
-          gap={2}
-          id={formId}
-          position="relative"
-          w="100%"
-        >
-          {fields.length > 0 && (
-            <>
-              <Divider mb="8px" />
-              {fields.map((item, index) => {
-                return (
-                  <FormControl
-                    isInvalid={
-                      !!form.getFieldState(
-                        `params.${index}.value`,
-                        form.formState,
-                      ).error
-                    }
-                    key={item.id}
-                    mb="8px"
-                  >
-                    <Flex justify="space-between">
-                      <FormLabel>{camelToTitle(item.key)}</FormLabel>
-                      <Text fontSize="12px">{item.key}</Text>
-                    </Flex>
-                    <SolidityInput
-                      // @ts-expect-error - old types, need to update
-                      solidityComponents={item.components}
-                      solidityName={item.key}
-                      solidityType={item.type}
-                      {...form.register(`params.${index}.value`)}
-                      functionName={abiFunction.name}
-                    />
-                    <FormErrorMessage>
-                      {
-                        form.getFieldState(
-                          `params.${index}.value`,
-                          form.formState,
-                        ).error?.message
-                      }
-                    </FormErrorMessage>
-                  </FormControl>
-                );
-              })}
-            </>
-          )}
+      <div className="space-y-6">
+        <form className="space-y-5 relative w-full" id={formId}>
+          {fields.length > 0 &&
+            fields.map((item, index) => {
+              const fieldError = form.getFieldState(
+                `params.${index}.value`,
+                form.formState,
+              ).error;
+
+              return (
+                <FormFieldSetup
+                  key={item.id}
+                  htmlFor={`params.${index}.value`}
+                  labelClassName="w-full"
+                  labelContainerClassName="flex w-full"
+                  label={
+                    <div className="flex justify-between items-center w-full gap-3">
+                      <span>{camelToTitle(item.key)}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {item.key}
+                      </span>
+                    </div>
+                  }
+                  errorMessage={fieldError?.message}
+                  isRequired={false}
+                  className="mb-2"
+                >
+                  <SolidityInput
+                    // @ts-expect-error - old types, need to update
+                    solidityComponents={item.components}
+                    solidityName={item.key}
+                    solidityType={item.type}
+                    {...form.register(`params.${index}.value`)}
+                    functionName={abiFunction.name}
+                  />
+                </FormFieldSetup>
+              );
+            })}
 
           {abiFunction.stateMutability === "payable" && (
-            <>
-              <Divider mb="8px" />
-              <FormControl gap={0.5}>
-                <FormLabel>Native Token Value</FormLabel>
-                <Input {...form.register("value")} />
-                <FormHelperText>
-                  The native currency value (in Ether) to send with this
-                  transaction (ex: 0.01 to send 0.01 native currency).
-                </FormHelperText>
-              </FormControl>
-            </>
+            <FormFieldSetup
+              htmlFor="value"
+              label="Native Token Value"
+              errorMessage={undefined}
+              isRequired={false}
+              helperText="The native currency value (in Ether) to send with this transaction (ex: 0.01 to send 0.01 native currency)."
+            >
+              <Input {...form.register("value")} className="bg-background" />
+            </FormFieldSetup>
           )}
 
           {error ? (
             <>
-              <Divider />
-              <Heading size="label.sm">Error</Heading>
+              <h3 className="text-sm font-medium">Error</h3>
               <InlineCode
                 className="relative w-full whitespace-pre-wrap rounded-md border border-border p-4 text-red-500"
                 //  biome-ignore lint/suspicious/noExplicitAny: FIXME
                 code={formatError(error as any)}
               />
             </>
+          ) : readLoading ? (
+            <Skeleton className="h-20 w-full rounded-lg" />
           ) : formattedResponseData ? (
             <>
-              <Divider />
               <div className="flex flex-row items-center gap-2">
-                <Heading size="label.sm">Output</Heading>
+                <h3 className="text-sm font-medium">Output</h3>
                 {/* Show the Solidity type of the function's output */}
                 {abiFunction.outputs.length > 0 && (
                   <Badge variant="default">
@@ -466,30 +437,32 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
               </div>
 
               {formattedResponseData.type === "text" ? (
-                <PlainTextCodeBlock code={formattedResponseData.data} />
+                <PlainTextCodeBlock
+                  code={formattedResponseData.data}
+                  className="bg-background"
+                />
               ) : (
                 <CodeClient
                   code={formattedResponseData.data}
                   lang={formattedResponseData.type}
+                  className="bg-background"
                 />
               )}
 
               {/* If the result is an IPFS URI, show a handy link so that users can open it in a new tab */}
               {formattedResponseData.type === "text" &&
                 formattedResponseData.data.startsWith("ipfs://") && (
-                  <Text size="label.sm">
-                    <UnderlineLink
-                      href={replaceIpfsUrl(
-                        formattedResponseData.data,
-                        contract.client,
-                      )}
-                      rel="noopener noreferrer"
-                      target="_blank"
-                    >
-                      Open in gateway
-                    </UnderlineLink>
-                  </Text>
+                  <Link
+                    href={`https://ipfs.io/ipfs/${formattedResponseData.data.split("ipfs://")[1]}`}
+                    rel="noopener noreferrer"
+                    className="text-sm text-muted-foreground hover:text-foreground inline-flex items-center gap-2 mt-1"
+                    target="_blank"
+                  >
+                    Open In IPFS Gateway
+                    <ExternalLinkIcon className="size-3.5" />
+                  </Link>
                 )}
+
               {/* Same with the logic above but this time it's applied to traditional urls */}
               {((formattedResponseData.type === "text" &&
                 formattedResponseData.data.startsWith("https://")) ||
@@ -506,37 +479,46 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
               )}
             </>
           ) : null}
-        </Flex>
+        </form>
 
-        <Divider mt="auto" />
-        <ButtonGroup ml="auto">
+        <div className="flex gap-3 justify-end">
           {isView ? (
             <Button
-              colorScheme="primary"
               form={formId}
-              isDisabled={!abiFunction}
-              isLoading={readLoading}
+              disabled={!abiFunction}
               onClick={handleContractRead}
-              rightIcon={<PlayIcon className="size-4" />}
+              className="gap-2 bg-background rounded-full"
+              variant="outline"
             >
-              Run
+              {/* run / rerun */}
+              {readLoading ? (
+                <Spinner className="size-4" />
+              ) : readData ? (
+                <RefreshCcwIcon className="size-4 text-muted-foreground" />
+              ) : (
+                <PlayIcon className="size-4 text-muted-foreground" />
+              )}
+              {readData ? "Run again" : readLoading ? "Running" : "Run"}
             </Button>
           ) : (
             <>
-              <Button
-                isDisabled={
-                  !abiFunction || txSimulation.isPending || mutationLoading
-                }
-                isLoading={txSimulation.isPending}
-                onClick={handleContractSimulation}
-              >
-                <ToolTipLabel label="Simulate the transaction to see its potential outcome without actually sending it to the network. This action doesn't cost gas.">
-                  <span className="mr-3">
-                    <InfoIcon className="size-5" />
-                  </span>
-                </ToolTipLabel>
-                Simulate
-              </Button>
+              <ToolTipLabel label="Simulate the transaction to see its potential outcome without actually sending it to the network. This action doesn't cost gas.">
+                <Button
+                  className="gap-2 bg-background"
+                  variant="outline"
+                  disabled={
+                    !abiFunction || txSimulation.isPending || mutationLoading
+                  }
+                  onClick={handleContractSimulation}
+                >
+                  {txSimulation.isPending ? (
+                    <Spinner className="size-4" />
+                  ) : (
+                    <InfoIcon className="size-4 text-muted-foreground" />
+                  )}
+                  Simulate
+                </Button>
+              </ToolTipLabel>
               <TransactionButton
                 client={contract.client}
                 disabled={
@@ -553,8 +535,8 @@ export const InteractiveAbiFunction: React.FC<InteractiveAbiFunctionProps> = (
               </TransactionButton>
             </>
           )}
-        </ButtonGroup>
-      </Card>
+        </div>
+      </div>
     </FormProvider>
   );
 };
diff --git a/apps/dashboard/src/@/components/contracts/published-contract/index.tsx b/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
index 378d7f1336a..c285f55ecba 100644
--- a/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
+++ b/apps/dashboard/src/@/components/contracts/published-contract/index.tsx
@@ -144,15 +144,13 @@ export const PublishedContract: React.FC<PublishedContractProps> = ({
             </Card>
           )}
           {contractFunctions && (
-            <Card p={0}>
-              <ContractFunctionsOverview
-                abi={publishedContract?.abi}
-                events={contractEvents}
-                functions={contractFunctions}
-                isLoggedIn={isLoggedIn}
-                sources={sources.data}
-              />
-            </Card>
+            <ContractFunctionsOverview
+              abi={publishedContract?.abi}
+              events={contractEvents}
+              functions={contractFunctions}
+              isLoggedIn={isLoggedIn}
+              sources={sources.data}
+            />
           )}
         </Flex>
       </GridItem>
diff --git a/apps/dashboard/src/@/components/solidity-inputs/bool-input.tsx b/apps/dashboard/src/@/components/solidity-inputs/bool-input.tsx
index e1378be39a0..a838cadff5c 100644
--- a/apps/dashboard/src/@/components/solidity-inputs/bool-input.tsx
+++ b/apps/dashboard/src/@/components/solidity-inputs/bool-input.tsx
@@ -10,9 +10,9 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
   const watchInput = form.watch(inputName);
   return (
     <div className="flex flex-row">
-      <div className="inline-flex overflow-hidden rounded-md border border-border">
+      <div className="inline-flex">
         <Button
-          className="rounded-none border-r-0"
+          className="border-r-0 rounded-r-none"
           onClick={() => form.setValue(inputName, "true")}
           size="sm"
           variant={watchInput === "true" ? "default" : "outline"}
@@ -20,7 +20,7 @@ export const SolidityBoolInput: React.FC<SolidityInputProps> = ({
           True
         </Button>
         <Button
-          className="rounded-none rounded-l-none"
+          className="rounded-l-none"
           onClick={() => form.setValue(inputName, "false")}
           size="sm"
           variant={watchInput === "false" ? "default" : "outline"}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
index fadfbe58ef0..d66686a7d83 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/explorer/ContractExplorerPage.tsx
@@ -34,7 +34,7 @@ export const ContractExplorerPage: React.FC<ContractExplorePageProps> = ({
 
   const functions = getContractFunctionsFromAbi(abi);
   return (
-    <div className="flex h-[70vh] flex-col ">
+    <div className="flex h-[70vh] flex-col">
       {functions && functions.length > 0 ? (
         <ContractFunctionsOverview
           contract={contract}