[Dashboard] Add function comments to Explorer (#5273)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/VtULqGKSp33n0VHOzNJK/0d2b9601-7778-4773-83e0-39ae17820bbe.png)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new component, `ContractFunctionComment`, which fetches and displays comments for contract functions. It also refactors the `contract-function.tsx` file to utilize this new component, improving the organization and clarity of the code.

### Detailed summary
- Added `ContractFunctionComment` component to fetch and display function comments.
- Integrated `ContractFunctionComment` into `ContractFunctionInner` in `contract-function.tsx`.
- Imported `lazy` from `react` for lazy loading of `ContractFunctionComment`.
- Implemented logic to extract comments from Solidity source code using regex.

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/components/contract-functions/contract-function-comment.tsx

@@ -0,0 +1,76 @@
+import { CodeBlock } from "@/components/ui/CodeBlock";
+import { Badge } from "@/components/ui/badge";
+import { useContractSources } from "contract-ui/hooks/useContractSources";
+import { useMemo } from "react";
+import type { ThirdwebContract } from "thirdweb";
+
+/**
+ * Take in a contract & function, try to fetch the comment of that function
+ */
+export default function ContractFunctionComment({
+  contract,
+  functionName,
+}: { contract: ThirdwebContract; functionName: string }) {
+  const sourceQuery = useContractSources(contract);
+  const comment = useMemo(() => {
+    if (!sourceQuery.data?.length) {
+      return null;
+    }
+    const file = sourceQuery.data.find((item) =>
+      item.source.includes(functionName),
+    );
+    if (!file) {
+      return null;
+    }
+    return extractFunctionComment(file.source, functionName);
+  }, [sourceQuery.data, functionName]);
+
+  if (sourceQuery.isLoading) {
+    return null;
+  }
+  if (!comment) {
+    return null;
+  }
+  return (
+    <>
+      <p className="mt-6">
+        About this function <Badge>Beta</Badge>
+      </p>
+      <CodeBlock code={comment} canCopy={false} language="solidity" />
+    </>
+  );
+}
+
+function extractFunctionComment(
+  // Tthe whole code from the solidity file containing (possibly) the function
+  solidityCode: string,
+  functionName: string,
+): string | null {
+  // Regular expression to match function declarations and their preceding comments
+  // This regex now captures both single-line (//) and multi-line (/** */) comments
+  const functionRegex =
+    /(?:\/\/[^\n]*|\/\*\*[\s\S]*?\*\/)\s*function\s+(\w+)\s*\(/g;
+
+  while (true) {
+    const match = functionRegex.exec(solidityCode);
+    if (match === null) {
+      return null;
+    }
+    const [fullMatch, name] = match;
+    if (!fullMatch || !fullMatch.length) {
+      return null;
+    }
+    if (name === functionName) {
+      // Extract the comment part
+      const comment = (fullMatch.split("function")[0] || "").trim();
+      if (!comment) {
+        return null;
+      }
+
+      if (/^[^a-zA-Z0-9]+$/.test(comment)) {
+        return null;
+      }
+      return comment;
+    }
+  }
+}

apps/dashboard/src/components/contract-functions/contract-function.tsx

@@ -29,7 +29,13 @@ import type { AbiEvent, AbiFunction } from "abitype";
 import { camelToTitle } from "contract-ui/components/solidity-inputs/helpers";
 import { SearchIcon } from "lucide-react";
 import { usePathname, useSearchParams } from "next/navigation";
-import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
+import {
+  type Dispatch,
+  type SetStateAction,
+  lazy,
+  useMemo,
+  useState,
+} from "react";
 import type { ThirdwebContract } from "thirdweb";
 import * as ERC20Ext from "thirdweb/extensions/erc20";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
@@ -47,6 +53,9 @@ import { CodeSegment } from "../contract-tabs/code/CodeSegment";
 import type { CodeEnvironment } from "../contract-tabs/code/types";
 import { InteractiveAbiFunction } from "./interactive-abi-function";
 
+const ContractFunctionComment = lazy(
+  () => import("./contract-function-comment"),
+);
 interface ContractFunctionProps {
   fn: AbiFunction | AbiEvent;
   contract: ThirdwebContract;
@@ -136,7 +145,6 @@ function ContractFunctionInner({ contract, fn }: ContractFunctionProps) {
           />
         )}
       </Flex>
-
       {isFunction && (
         <InteractiveAbiFunction
           key={JSON.stringify(fn)}
@@ -158,6 +166,7 @@ function ContractFunctionInner({ contract, fn }: ContractFunctionProps) {
           />
         </>
       )}
+      <ContractFunctionComment contract={contract} functionName={fn.name} />
     </Flex>
   );
 }