Move Deployed Contracts Page to App Router

Author: MananTank

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

@@ -0,0 +1,34 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { useAllContractList } from "@3rdweb-sdk/react/hooks/useRegistry";
+import { DeployedContracts } from "../../../../../components/contract-components/tables/deployed-contracts";
+import { GetStartedWithContractsDeploy } from "../../../../team/[team_slug]/[project_slug]/contracts/_components/GetStartedWithContractsDeploy";
+
+export function DeployedContractsPage(props: {
+  address: string;
+}) {
+  const deployedContracts = useAllContractList(props.address);
+
+  if (deployedContracts.isPending) {
+    return (
+      <div className="flex h-full min-h-[300px] items-center justify-center">
+        <Spinner className="size-10" />
+      </div>
+    );
+  }
+  const hasContracts =
+    deployedContracts.data && deployedContracts.data.length > 0;
+
+  if (!hasContracts) {
+    return <GetStartedWithContractsDeploy />;
+  }
+
+  return (
+    <DeployedContracts
+      contractList={deployedContracts.data}
+      limit={50}
+      isPending={deployedContracts.isPending}
+    />
+  );
+}

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

@@ -0,0 +1,12 @@
+import { redirect } from "next/navigation";
+import { getAuthTokenWalletAddress } from "../../../../api/lib/getAuthToken";
+import { DeployedContractsPage } from "./DeployedContractsPage";
+
+export default function Page() {
+  const accountAddress = getAuthTokenWalletAddress();
+  if (!accountAddress) {
+    return redirect(`/login?next=${encodeURIComponent("/dashboard")}`);
+  }
+
+  return <DeployedContractsPage address={accountAddress} />;
+}

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

@@ -0,0 +1,13 @@
+import { BillingAlerts } from "../../../../components/settings/Account/Billing/alerts/Alert";
+import { ContractsSidebarLayout } from "../../../../core-ui/sidebar/contracts";
+
+export default function Layout(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <ContractsSidebarLayout>
+      <BillingAlerts className="pb-6" />
+      {props.children}
+    </ContractsSidebarLayout>
+  );
+}

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

@@ -7,7 +7,7 @@ export default function DashboardLayout(props: { children: React.ReactNode }) {
     <ErrorProvider>
       <div className="flex min-h-screen flex-col bg-background">
         <DashboardHeader />
-        <main className="grow">{props.children}</main>
+        <div className="flex grow flex-col">{props.children}</div>
         <AppFooter />
       </div>
     </ErrorProvider>

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>
@@ -142,7 +145,7 @@ const RemoveFromDashboardButton: React.FC<RemoveFromDashboardButtonProps> = ({
       variant="ghost"
       onClick={(e) => {
         e.stopPropagation();
-        mutation.mutate({ chainId, contractAddress });
+        mutation.mutateAsync({ chainId, contractAddress });
       }}
       disabled={mutation.isPending}
       className="!bg-background hover:!bg-accent gap-2"
@@ -236,9 +239,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
@@ -395,10 +403,12 @@ const ContractTable: React.FC<ContractTableProps> = ({
 const ContractTableRow = memo(({ row }: { row: Row<BasicContract> }) => {
   const chainSlug = useChainSlug(row.original.chainId);
   const router = useDashboardRouter();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { key, ...rowProps } = row.getRowProps();
 
   return (
     <TableRow
-      {...row.getRowProps()}
+      {...rowProps}
       role="group"
       className="cursor-pointer hover:bg-muted/50"
       // TODO - replace this with before:absolute thing

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>