feat: integrate abitype library and format ABI items in code overview…

… and contract function components (#2672)

### TL;DR
Add `abitype` library and refactor the codebase to utilize `formatAbiItem` for formatting contract functions and events.

### What changed?
- Added `abitype` library to `package.json` and `pnpm-lock.yaml` files.
- Refactored multiple files to replace existing ABI formatting logic with `formatAbiItem` from `abitype`.
  - `contract-function.tsx`: Integrated `formatAbiItem` for formatting contract functions and events.
  - `code-overview.tsx`: Unified ABI formatting using `formatAbiItem`.
- Removed dependency on `resolveMethod` from `thirdweb`.

### How to test?
1. Verify the `abitype` library installation in `package.json` and `pnpm-lock.yaml`.
2. Check the refactored files for correct usage of `formatAbiItem`.
3. Run the project and ensure no runtime errors occur related to ABI formatting.
4. Test contract functions and events to ensure they are formatted correctly.

### Why make this change?
To improve the consistency and reliability of ABI formatting across the codebase by using a dedicated library (`abitype`).

---

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to introduce the `abitype` package, update dependencies, and refactor code snippets in the `CodePlayground` component.

### Detailed summary
- Introduced `abitype` package
- Updated dependencies
- Refactored code snippets in `CodePlayground.tsx`
- Modified imports and functions in various files

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

<!-- end pr-codex -->

package.json

@@ -54,6 +54,7 @@
     "@thirdweb-dev/storage": "2.0.15",
     "@thirdweb-dev/wallets": "2.5.35",
     "@vercel/og": "^0.6.2",
+    "abitype": "1.0.0",
     "airtable": "^0.12.2",
     "chakra-react-select": "^4.7.6",
     "class-variance-authority": "^0.7.0",

src/components/connect/CodePlayground.tsx

@@ -44,8 +44,7 @@ const CodePlayground = ({
 
   const snippet = formatSnippet(COMMANDS[tab as keyof typeof COMMANDS] as any, {
     contractAddress: "0x6fb2A6C41B44076bc491cC285BA629c0715a6a1b",
-    fn:
-      tab === "read" ? read?.name : tab === "write" ? write?.name : event?.name,
+    fn: (tab === "read" ? read : tab === "write" ? write : event) as any,
     args: (tab === "read"
       ? readFunctions
       : tab === "write"

src/contract-ui/tabs/code/components/code-overview.tsx

@@ -32,6 +32,7 @@ import {
   AbiFunction,
   FeatureWithEnabled,
 } from "@thirdweb-dev/sdk";
+import { formatAbiItem } from "abitype";
 import {
   useContractEnabledExtensions,
   useContractEvents,
@@ -139,20 +140,19 @@ var sdk = ThirdwebManager.Instance.SDK;
 var contract = sdk.GetContract("{{contract_address}}");`,
   },
   read: {
-    javascript: `import { readContract, resolveMethod } from "thirdweb";
+    javascript: `import { readContract } from "thirdweb";
 
 const data = await readContract({ 
   contract, 
-  method: resolveMethod("{{function}}"), 
+  method: "{{function}}", 
   params: [{{args}}] 
 })`,
-    react: `import { resolveMethod } from "thirdweb";
-    import { useReadContract } from "thirdweb/react";
+    react: `import { useReadContract } from "thirdweb/react";
 
 export default function Component() {
   const { data, isLoading } = useReadContract({ 
     contract, 
-    method: resolveMethod("{{function}}"), 
+    method: "{{function}}", 
     params: [{{args}}] 
   });
 }`,
@@ -161,24 +161,24 @@ export default function Component() {
 export default function Component() {
   const { data, isLoading } = useReadContract({ 
     contract, 
-    method: resolveMethod("{{function}}"), 
+    method: "{{function}}", 
     params: [{{args}}] 
   });
 }`,
   },
   write: {
-    javascript: `import { prepareContractCall, sendTransaction, resolveMethod } from "thirdweb";
+    javascript: `import { prepareContractCall, sendTransaction } from "thirdweb";
 
 const transaction = await prepareContractCall({ 
   contract, 
-  method: resolveMethod("{{function}}"), 
+  method: "{{function}}", 
   params: [{{args}}] 
 });
 const { transactionHash } = await sendTransaction({ 
   transaction, 
   account 
 })`,
-    react: `import { prepareContractCall, resolveMethod } from "thirdweb"
+    react: `import { prepareContractCall } from "thirdweb"
 import { useSendTransaction } from "thirdweb/react";
 
 export default function Component() {
@@ -187,7 +187,7 @@ export default function Component() {
   const call = async () => {
     const transaction = await prepareContractCall({ 
       contract, 
-      method: resolveMethod("{{function}}"), 
+      method: "{{function}}", 
       params: [{{args}}] 
     });
     const { transactionHash } = await sendTransaction(transaction);
@@ -202,27 +202,12 @@ export default function Component() {
   const call = async () => {
     const transaction = await prepareContractCall({ 
       contract, 
-      method: resolveMethod("{{function}}"), 
+      method: "{{function}}", 
       params: [{{args}}] 
     });
     const { transactionHash } = await sendTransaction(transaction);
   }
 }`,
-    //     web3button: `import { TransactionButton } from "thirdweb/react";
-
-    // export default function Component() {
-    //   return (
-    //     <TransactionButton
-    //       transaction={() => prepareContractCall({
-    //         contract,
-    //         method: resolveMethod("{{function}}"),
-    //         params: [{{args}}]
-    //       })}
-    //     >
-    //       {{function}}
-    //     </TransactionButton>
-    //   )
-    // }`,
   },
   events: {
     javascript: `import { prepareEvent, getContractEvents } from "thirdweb";
@@ -250,19 +235,19 @@ export default function Component() {
   });
 }`,
     "react-native": `import { prepareEvent } from "thirdweb";
-    import { useContractEvents } from "thirdweb/react";
+import { useContractEvents } from "thirdweb/react";
     
-    const preparedEvent = prepareEvent({ 
-      contract, 
-      signature: "{{function}}" 
-    });
+const preparedEvent = prepareEvent({ 
+  contract, 
+  signature: "{{function}}" 
+});
     
-    export default function Component() {
-      const { data: event } = useContractEvents({ 
-        contract, 
-        events: [preparedEvent] 
-      });
-    }`,
+export default function Component() {
+  const { data: event } = useContractEvents({ 
+    contract, 
+    events: [preparedEvent] 
+  });
+}`,
   },
 };
 
@@ -340,7 +325,7 @@ public async void ConnectWallet()
 
 interface SnippetOptions {
   contractAddress?: string;
-  fn?: string;
+  fn?: AbiFunction | AbiEvent;
   args?: string[];
   address?: string;
   clientId?: string;
@@ -353,6 +338,13 @@ export function formatSnippet(
 ) {
   const code = { ...snippet };
 
+  const formattedAbi = fn
+    ? formatAbiItem({
+        ...fn,
+        type: "stateMutability" in fn ? "function" : "event",
+      } as any)
+    : "";
+
   for (const key of Object.keys(code)) {
     const env = key as CodeEnvironment;
 
@@ -361,7 +353,7 @@ export function formatSnippet(
       ?.replace(/{{factory_address}}/gm, contractAddress || "0x...")
       ?.replace(/{{wallet_address}}/gm, address)
       ?.replace("YOUR_CLIENT_ID", clientId || "YOUR_CLIENT_ID")
-      ?.replace(/{{function}}/gm, fn || "")
+      ?.replace(/{{function}}/gm, formattedAbi || "")
       ?.replace(/{{chainId}}/gm, chainId || 1);
 
     if (args && args?.some((arg) => arg)) {
@@ -826,10 +818,10 @@ export const CodeOverview: React.FC<CodeOverviewProps> = ({
                         contractAddress,
                         fn:
                           tab === "read"
-                            ? read?.name
+                            ? read
                             : tab === "write"
-                              ? write?.name
-                              : event?.name,
+                              ? write
+                              : event,
                         args: (tab === "read"
                           ? readFunctions
                           : tab === "write"