[Dashboard] Migrate /code page to v5 (#4204)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR improves contract code rendering in the dashboard.

### Detailed summary
- Updated rendering logic for contract code in various components
- Added type `AbiType` for compatibility
- Refactored `ContractCodePage` to use `ThirdwebContract` instead of `contractAddress`

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

<!-- end pr-codex -->

apps/dashboard/src/contract-ui/hooks/useRouteConfig.tsx

@@ -300,7 +300,9 @@ export function useContractRouteConfig(
     {
       title: "Code Snippets",
       path: "code",
-      component: LazyContractCodePage,
+      component: () => (
+        <>{contract && <LazyContractCodePage contract={contract} />}</>
+      ),
       isDefault: true,
     },
     {

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

@@ -18,6 +18,7 @@ import {
 } from "@chakra-ui/react";
 import type { Abi, AbiEvent, AbiFunction } from "@thirdweb-dev/sdk";
 import { formatAbiItem } from "abitype";
+import type { Abi as AbiType } from "abitype";
 import {
   useContractEnabledExtensions,
   useContractEvents,
@@ -32,7 +33,8 @@ import { useActiveAccount } from "thirdweb/react";
 import { Button, Card, Heading, Link, Text, TrackedLink } from "tw-components";
 
 interface CodeOverviewProps {
-  abi?: Abi;
+  // TODO: Remove v4's `Abi` type
+  abi?: Abi | AbiType;
   contractAddress?: string;
   onlyInstall?: boolean;
   chainId?: number;

apps/dashboard/src/contract-ui/tabs/code/page.tsx

@@ -1,39 +1,32 @@
 "use client";
 
 import { useIsomorphicLayoutEffect } from "@/lib/useIsomorphicLayoutEffect";
+import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
 import { Flex } from "@chakra-ui/react";
-import { useContract } from "@thirdweb-dev/react";
-import type { Abi } from "@thirdweb-dev/sdk";
+import type { ThirdwebContract } from "thirdweb";
 import { CodeOverview } from "./components/code-overview";
 
 interface ContractCodePageProps {
-  contractAddress?: string;
+  contract: ThirdwebContract;
 }
 
 export const ContractCodePage: React.FC<ContractCodePageProps> = ({
-  contractAddress,
+  contract,
 }) => {
-  const contractQuery = useContract(contractAddress);
-
   useIsomorphicLayoutEffect(() => {
     window?.scrollTo({ top: 0, behavior: "smooth" });
   }, []);
 
-  if (contractQuery.isLoading) {
+  const abiQuery = useResolveContractAbi(contract);
+
+  if (abiQuery.isLoading) {
     // TODO build a skeleton for this
     return <div>Loading...</div>;
   }
 
-  if (!contractQuery?.contract) {
-    return null;
-  }
-
   return (
     <Flex direction="column" gap={6}>
-      <CodeOverview
-        abi={contractQuery.contract?.abi as Abi}
-        contractAddress={contractQuery.contract?.getAddress()}
-      />
+      <CodeOverview abi={abiQuery.data} contractAddress={contract.address} />
     </Flex>
   );
 };