[Dashboard] Sources page to v5 (#4201)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update contract-related components and hooks, resolve ABI types, and improve UX in the dashboard.

### Detailed summary
- Updated components and hooks related to contracts
- Resolved ABI types with `abitype`
- Improved UX in the dashboard by updating sources display

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

<!-- end pr-codex -->

Author: kien-ngo

apps/dashboard/src/@3rdweb-sdk/react/hooks/useResolveContractAbi.ts

@@ -0,0 +1,21 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Abi } from "abitype";
+import type { ThirdwebContract } from "thirdweb";
+import { resolveContractAbi } from "thirdweb/contract";
+import invariant from "tiny-invariant";
+
+export function useResolveContractAbi(contract?: ThirdwebContract) {
+  return useQuery({
+    queryKey: [
+      "full-contract-abi",
+      contract?.chain.id || "",
+      contract?.address || "",
+    ],
+    queryFn: async () => {
+      invariant(contract, "contract is required");
+      const abi = await resolveContractAbi<Abi>(contract);
+      return abi;
+    },
+    enabled: !!contract,
+  });
+}

apps/dashboard/src/components/contract-components/shared/sources-accordion.tsx

@@ -5,7 +5,7 @@ import {
   AccordionItem,
   AccordionPanel,
 } from "@chakra-ui/react";
-import type { Abi } from "@thirdweb-dev/sdk";
+import type { Abi } from "abitype";
 import { CodeBlock, Heading } from "tw-components";
 import type { SourceFile } from "../types";
 
@@ -20,61 +20,62 @@ export const SourcesAccordion: React.FC<SourcesAccordionProps> = ({
 }) => {
   return (
     <Accordion allowMultiple defaultIndex={[]}>
-      {sources.map((signature) => (
+      {/* ABI Accordion is put at the top for better UX */}
+      {abi && (
         <AccordionItem
           gap={4}
           flexDirection="column"
-          key={signature.filename}
           borderColor="borderColor"
           _first={{ borderTopWidth: 0 }}
           _last={{ borderBottomWidth: 0 }}
         >
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">{signature.filename}</Heading>
+                <Heading size="label.md">ABI</Heading>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>
                 {isExpanded && (
                   <CodeBlock
+                    code={JSON.stringify(abi, null, 2)}
+                    language="json"
                     overflow="auto"
-                    code={signature.source.trim()}
-                    language="solidity"
                   />
                 )}
               </AccordionPanel>
             </>
           )}
         </AccordionItem>
-      ))}
-      {abi && (
+      )}
+      {sources.map((signature) => (
         <AccordionItem
           gap={4}
           flexDirection="column"
+          key={signature.filename}
           borderColor="borderColor"
           _first={{ borderTopWidth: 0 }}
           _last={{ borderBottomWidth: 0 }}
         >
           {({ isExpanded }) => (
             <>
               <AccordionButton justifyContent="space-between" py={2}>
-                <Heading size="label.md">ABI</Heading>
+                <Heading size="label.md">{signature.filename}</Heading>
                 <AccordionIcon />
               </AccordionButton>
               <AccordionPanel>
                 {isExpanded && (
                   <CodeBlock
-                    code={JSON.stringify(abi, null, 2)}
-                    language="json"
                     overflow="auto"
+                    code={signature.source.trim()}
+                    language="solidity"
                   />
                 )}
               </AccordionPanel>
             </>
           )}
         </AccordionItem>
-      )}
+      ))}
     </Accordion>
   );
 };

apps/dashboard/src/components/contract-components/shared/sources-panel.tsx

@@ -1,5 +1,5 @@
 import { Flex } from "@chakra-ui/react";
-import type { Abi } from "@thirdweb-dev/sdk";
+import type { Abi } from "abitype";
 import { Link, Text } from "tw-components";
 import type { SourceFile } from "../types";
 import { SourcesAccordion } from "./sources-accordion";

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

@@ -104,6 +104,7 @@ export const ContractFunctionsOverview: React.FC<ContractFunctionsOverview> = ({
           )}
           {(sources || abi) && (
             <TabPanel>
+              {/* @ts-expect-error This won't cause any error and will auto-resolve itself once we have fully migrated to v5 */}
               <SourcesPanel sources={sources} abi={abi} />
             </TabPanel>
           )}

apps/dashboard/src/components/engine/contract-subscription/add-contract-subscription-button.tsx

@@ -1,7 +1,9 @@
+import { thirdwebClient } from "@/constants/client";
 import {
   type AddContractSubscriptionInput,
   useEngineAddContractSubscription,
 } from "@3rdweb-sdk/react/hooks/useEngine";
+import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
 import {
   CheckboxGroup,
   Collapse,
@@ -25,11 +27,12 @@ import {
 } from "@chakra-ui/react";
 import { NetworkDropdown } from "components/contract-components/contract-publish-form/NetworkDropdown";
 import { useTrack } from "hooks/analytics/useTrack";
-import { useContractAbiItems } from "hooks/useContractAbiItems";
 import { useTxNotifications } from "hooks/useTxNotifications";
+import { useV5DashboardChain } from "lib/v5-adapter";
 import { type Dispatch, type SetStateAction, useMemo, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import { AiOutlinePlusCircle } from "react-icons/ai";
+import { getContract } from "thirdweb";
 import {
   Button,
   Card,
@@ -421,32 +424,66 @@ const FilterSelector = ({
   filter: string[];
   setFilter: (value: string[]) => void;
 }) => {
-  const abiItemsQuery = useContractAbiItems(
-    form.getValues("chainId"),
-    form.getValues("contractAddress") as `0x${string}`,
-  );
+  const chain = useV5DashboardChain(form.getValues("chainId"));
+  const contract = chain
+    ? getContract({
+        address: form.getValues("contractAddress"),
+        chain,
+        client: thirdwebClient,
+      })
+    : undefined;
+
+  const abiQuery = useResolveContractAbi(contract);
+
+  const abiItems = useMemo(() => {
+    if (!abiQuery.data) {
+      return {
+        readFunctions: [],
+        writeFunctions: [],
+        events: [],
+      };
+    }
+    const readFunctions: string[] = [];
+    const writeFunctions: string[] = [];
+    const events: string[] = [];
+    for (const abiItem of abiQuery.data) {
+      if (abiItem.type === "function") {
+        if (
+          abiItem.stateMutability === "pure" ||
+          abiItem.stateMutability === "view"
+        ) {
+          readFunctions.push(abiItem.name);
+        } else {
+          writeFunctions.push(abiItem.name);
+        }
+      } else if (abiItem.type === "event") {
+        events.push(abiItem.name);
+      }
+    }
+    return {
+      readFunctions: [...new Set(readFunctions)].sort(),
+      writeFunctions: [...new Set(writeFunctions)].sort(),
+      events: [...new Set(events)].sort(),
+    };
+  }, [abiQuery.data]);
 
   const filterNames = useMemo(() => {
     switch (abiItemType) {
       case "function": {
-        return abiItemsQuery.data.writeFunctions;
+        return abiItems.writeFunctions;
       }
       case "event": {
-        return abiItemsQuery.data.events;
+        return abiItems.events;
       }
       default: {
         return [];
       }
     }
-  }, [
-    abiItemType,
-    abiItemsQuery.data.events,
-    abiItemsQuery.data.writeFunctions,
-  ]);
+  }, [abiItemType, abiItems.events, abiItems.writeFunctions]);
 
   return (
     <Card>
-      {abiItemsQuery.isLoading ? (
+      {abiQuery.isLoading ? (
         <Spinner size="sm" />
       ) : filterNames.length === 0 ? (
         <Text>

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

@@ -482,7 +482,9 @@ export function useContractRouteConfig(
     {
       title: "Sources",
       path: "sources",
-      component: LazyContractSourcesPage,
+      component: () => (
+        <>{contract && <LazyContractSourcesPage contract={contract} />}</>
+      ),
       isDefault: true,
     },
   ];

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

@@ -1,6 +1,6 @@
-import { thirdwebClient } from "@/constants/client";
 import { useDashboardEVMChainId } from "@3rdweb-sdk/react";
 import { useQueryWithNetwork } from "@3rdweb-sdk/react/hooks/query/useQueryWithNetwork";
+import { useResolveContractAbi } from "@3rdweb-sdk/react/hooks/useResolveContractAbi";
 import {
   Divider,
   Flex,
@@ -15,20 +15,17 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { useContract } from "@thirdweb-dev/react";
-import type { Abi } from "@thirdweb-dev/sdk";
 import { SourcesPanel } from "components/contract-components/shared/sources-panel";
 import { useContractSources } from "contract-ui/hooks/useContractSources";
-import { useV5DashboardChain } from "lib/v5-adapter";
 import { useMemo, useState } from "react";
 import { FiCheckCircle, FiXCircle } from "react-icons/fi";
 import { toast } from "sonner";
-import { getContract } from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import { Badge, Button, Card, Heading } from "tw-components";
 import { useDashboardRouter } from "../../../@/lib/DashboardRouter";
 
 interface ContractSourcesPageProps {
-  contractAddress?: string;
+  contract: ThirdwebContract;
 }
 
 type ContractParams = {
@@ -179,7 +176,7 @@ const VerifyContractModal: React.FC<
 };
 
 export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
-  contractAddress,
+  contract,
 }) => {
   const [resetSignal, setResetSignal] = useState(0);
 
@@ -191,18 +188,8 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
     setResetSignal((prev: number) => prev + 1);
   };
 
-  const { contract } = useContract(contractAddress);
-  const chain = useV5DashboardChain(contract?.chainId);
-  const contractV5 =
-    contract && chain
-      ? getContract({
-          address: contract.getAddress(),
-          chain,
-          client: thirdwebClient,
-        })
-      : undefined;
-  const contractSourcesQuery = useContractSources(contractV5);
-  const abi = useMemo(() => contract?.abi as Abi, [contract]);
+  const contractSourcesQuery = useContractSources(contract);
+  const abiQuery = useResolveContractAbi(contract);
 
   // clean up the source filenames and filter out libraries
   const sources = useMemo(() => {
@@ -220,10 +207,6 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
       .reverse();
   }, [contractSourcesQuery.data]);
 
-  if (!contractAddress || !contract) {
-    return <div>No contract address provided</div>;
-  }
-
   if (!contractSourcesQuery || contractSourcesQuery?.isLoading) {
     return (
       <Flex direction="row" align="center" gap={2}>
@@ -238,7 +221,7 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
       <VerifyContractModal
         isOpen={isOpen}
         onClose={() => handleClose()}
-        contractAddress={contractAddress}
+        contractAddress={contract.address}
         resetSignal={resetSignal}
       />
 
@@ -248,15 +231,15 @@ export const ContractSourcesPage: React.FC<ContractSourcesPageProps> = ({
             Sources
           </Heading>
           <RefreshContractMetadataButton
-            chainId={contract.chainId}
-            contractAddress={contract.getAddress()}
+            chainId={contract.chain.id}
+            contractAddress={contract.address}
           />
           <Button variant="solid" colorScheme="purple" onClick={onOpen}>
             Verify contract
           </Button>
         </Flex>
         <Card p={0}>
-          <SourcesPanel sources={sources} abi={abi} />
+          <SourcesPanel sources={sources} abi={abiQuery.data} />
         </Card>
       </Flex>
     </>