Move Deployed Contracts Page to App Router

Author: MananTank

apps/dashboard/src/app/(dashboard)/dashboard/contracts/deploy/getSortedDeployedContracts.ts

@@ -0,0 +1,36 @@
+import type { BasicContract } from "contract-ui/types/types";
+import { MULTICHAIN_REGISTRY_CONTRACT } from "../../../../../constants/contracts";
+import { getAllMultichainRegistry } from "../../../../../dashboard-extensions/common/read/getAllMultichainRegistry";
+import { fetchChain } from "../../../../../utils/fetchChain";
+
+export async function getSortedDeployedContracts(params: {
+  address: string;
+}) {
+  const contracts = await getAllMultichainRegistry({
+    contract: MULTICHAIN_REGISTRY_CONTRACT,
+    address: params.address,
+  });
+
+  const chainIds = Array.from(new Set(contracts.map((c) => c.chainId)));
+  const chains = (
+    await Promise.all(chainIds.map((chainId) => fetchChain(chainId.toString())))
+  ).filter((c) => c !== null);
+
+  const mainnetContracts: BasicContract[] = [];
+  const testnetContracts: BasicContract[] = [];
+
+  for (const contract of contracts) {
+    const chain = chains.find((chain) => contract.chainId === chain.chainId);
+    if (chain && chain.status !== "deprecated") {
+      if (chain.testnet) {
+        testnetContracts.push(contract);
+      } else {
+        mainnetContracts.push(contract);
+      }
+    }
+  }
+
+  mainnetContracts.sort((a, b) => a.chainId - b.chainId);
+  testnetContracts.sort((a, b) => a.chainId - b.chainId);
+  return [...mainnetContracts, ...testnetContracts];
+}

apps/dashboard/src/app/(dashboard)/dashboard/contracts/deploy/page.tsx

@@ -0,0 +1,24 @@
+import { DeployedContracts } from "components/contract-components/tables/deployed-contracts";
+import { redirect } from "next/navigation";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { GetStartedWithContractsDeploy } from "../../../../team/[team_slug]/[project_slug]/contracts/_components/GetStartedWithContractsDeploy";
+import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
+
+export default async function Page() {
+  const accountAddress = getAuthTokenWalletAddress();
+  if (!accountAddress) {
+    return redirect(`/login?next=${encodeURIComponent("/dashboard")}`);
+  }
+
+  const contracts = await getSortedDeployedContracts({
+    address: accountAddress,
+  });
+
+  if (contracts.length === 0) {
+    return <GetStartedWithContractsDeploy />;
+  }
+
+  return (
+    <DeployedContracts contractList={contracts} limit={50} isPending={false} />
+  );
+}

apps/dashboard/src/app/(dashboard)/dashboard/contracts/layout.tsx

@@ -0,0 +1,7 @@
+import { ContractsSidebarLayout } from "../../../../core-ui/sidebar/contracts";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return <ContractsSidebarLayout>{props.children}</ContractsSidebarLayout>;
+}

apps/dashboard/src/app/api/lib/getAuthToken.ts

@@ -10,3 +10,19 @@ export function getAuthToken() {
 
   return token;
 }
+
+export function getAuthTokenWalletAddress() {
+  const cookiesManager = cookies();
+  const activeAccount = cookiesManager.get(COOKIE_ACTIVE_ACCOUNT)?.value;
+  if (!activeAccount) {
+    return null;
+  }
+
+  const token = cookiesManager.get(COOKIE_PREFIX_TOKEN + activeAccount)?.value;
+
+  if (token) {
+    return activeAccount;
+  }
+
+  return null;
+}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -1,26 +1,15 @@
 "use client";
 import { TabButtons } from "@/components/ui/tabs";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
-import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
 import Image from "next/image";
 import { useMemo, useState } from "react";
-import { useActiveAccount } from "thirdweb/react";
 import { ImportModal } from "../../../../../../components/contract-components/import-contract/modal";
 import { StepsCard } from "../../../../../../components/dashboard/StepsCard";
 import { useTrack } from "../../../../../../hooks/analytics/useTrack";
 
 export function GetStartedWithContractsDeploy() {
-  const address = useActiveAccount()?.address;
   const steps = useMemo(
     () => [
-      {
-        title: "Connect your wallet to get started",
-        description:
-          "In order to interact with your contracts you need to connect an EVM compatible wallet.",
-        children: <CustomConnectWallet />,
-        completed: !!address,
-      },
-
       {
         title: "Build, deploy or import a contract",
         description:
@@ -29,7 +18,7 @@ export function GetStartedWithContractsDeploy() {
         completed: false, // because we only show this component if the user does not have any contracts
       },
     ],
-    [address],
+    [],
   );
 
   return (

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/page.tsx

@@ -24,7 +24,11 @@ export default function Page() {
       {!hasContracts ? (
         <GetStartedWithContractsDeploy />
       ) : (
-        <DeployedContracts contractListQuery={deployedContracts} limit={50} />
+        <DeployedContracts
+          contractList={deployedContracts.data}
+          isPending={deployedContracts.isPending}
+          limit={50}
+        />
       )}
     </div>
   );

apps/dashboard/src/components/contract-components/tables/deployed-contracts.tsx

@@ -42,6 +42,7 @@ import {
   usePagination,
   useTable,
 } from "react-table";
+import { SkeletonContainer } from "../../../@/components/ui/skeleton";
 import { useAllChainsData } from "../../../hooks/chains/allChains";
 import { useChainSlug } from "../../../hooks/chains/chainSlug";
 import { ImportModal } from "../import-contract/modal";
@@ -50,25 +51,27 @@ import { ShowMoreButton } from "./show-more-button";
 
 interface DeployedContractsProps {
   noHeader?: boolean;
-  contractListQuery: ReturnType<typeof useAllContractList>;
+  contractList: ReturnType<typeof useAllContractList>["data"];
+  isPending: boolean;
   limit?: number;
 }
 
 export const DeployedContracts: React.FC<DeployedContractsProps> = ({
   noHeader,
-  contractListQuery,
+  contractList,
   limit = 10,
+  isPending,
 }) => {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   const chainIdsWithDeployments = useMemo(() => {
     const set = new Set<number>();
     // biome-ignore lint/complexity/noForEach: FIXME
-    contractListQuery.data.forEach((contract) => {
+    contractList.forEach((contract) => {
       set.add(contract.chainId);
     });
     return [...set];
-  }, [contractListQuery.data]);
+  }, [contractList]);
 
   return (
     <div className="flex flex-col gap-8">
@@ -111,13 +114,13 @@ export const DeployedContracts: React.FC<DeployedContractsProps> = ({
       )}
 
       <ContractTable
-        combinedList={contractListQuery.data}
+        combinedList={contractList}
         limit={limit}
         chainIdsWithDeployments={chainIdsWithDeployments}
-        loading={contractListQuery.isPending}
+        loading={isPending}
       />
 
-      {contractListQuery.data.length === 0 && contractListQuery.isFetched && (
+      {contractList.length === 0 && !isPending && (
         <div className="flex h-[100px] items-center justify-center text-muted-foreground">
           No contracts found
         </div>
@@ -136,13 +139,21 @@ const RemoveFromDashboardButton: React.FC<RemoveFromDashboardButtonProps> = ({
   contractAddress,
 }) => {
   const mutation = useRemoveContractMutation();
+  const router = useDashboardRouter();
 
   return (
     <Button
       variant="ghost"
       onClick={(e) => {
         e.stopPropagation();
-        mutation.mutate({ chainId, contractAddress });
+        mutation.mutateAsync(
+          { chainId, contractAddress },
+          {
+            onSuccess: () => {
+              router.refresh();
+            },
+          },
+        );
       }}
       disabled={mutation.isPending}
       className="!bg-background hover:!bg-accent gap-2"
@@ -236,9 +247,14 @@ const ContractTable: React.FC<ContractTableProps> = ({
           return (
             <div className="flex items-center gap-2">
               <ChainIcon size={24} ipfsSrc={data?.icon?.url} />
-              <p className="text-muted-foreground text-sm">
-                {cleanedChainName}
-              </p>
+              <SkeletonContainer
+                loadedData={data ? cleanedChainName : undefined}
+                skeletonData={`Chain ID ${cell.row.original.chainId}`}
+                render={(v) => {
+                  return <p className="text-muted-foreground text-sm">{v}</p>;
+                }}
+              />
+
               {data?.testnet && (
                 <Badge variant="outline" className="text-muted-foreground">
                   Testnet

apps/dashboard/src/pages/dashboard/contracts/deploy.tsx

@@ -178,7 +178,8 @@ const UserPage: ThirdwebNextPage = (props: UserPageProps) => {
           {ens.data?.address && (
             <DeployedContracts
               noHeader
-              contractListQuery={mainnetsContractList}
+              contractList={mainnetsContractList.data}
+              isPending={mainnetsContractList.isPending}
             />
           )}
         </Flex>