[TOOL-3763] Dashboard: Update Contracts page

Author: MananTank

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -23,7 +23,7 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="flex flex-col gap-3 pb-6 lg:flex-row lg:items-center lg:justify-between">
+      <div className="flex flex-col gap-3 pt-2 pb-8 lg:flex-row lg:items-center lg:justify-between">
         <div>
           <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
         </div>

apps/dashboard/src/app/account/contracts/_components/DeployViaCLIOrImportCard.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { ArrowUpRightIcon, DownloadIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import { ImportModal } from "../../../../components/contract-components/import-contract/modal";
+
+export function DeployViaCLIOrImportCard(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  const [importModalOpen, setImportModalOpen] = useState(false);
+
+  return (
+    <div className="rounded-lg border bg-card p-6">
+      <ImportModal
+        isOpen={importModalOpen}
+        onClose={() => {
+          setImportModalOpen(false);
+        }}
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+
+      <h2 className="mb-0.5 font-semibold text-lg">
+        Already have a smart contract?
+      </h2>
+      <p className="max-w-2xl text-muted-foreground">
+        Import an already deployed contract or deploy a contract from source
+        code to easily manage permissions, upload assets, and interact with
+        contract functions
+      </p>
+
+      <div className="mt-6 flex gap-3">
+        <Button variant="outline" className="gap-2 lg:px-20" asChild>
+          <Link
+            href="https://portal.thirdweb.com/contracts/deploy/overview"
+            target="_blank"
+          >
+            Deploy via CLI
+            <ArrowUpRightIcon className="size-4" />
+          </Link>
+        </Button>
+        <Button
+          variant="outline"
+          className="gap-2 lg:px-6"
+          onClick={() => setImportModalOpen(true)}
+        >
+          <DownloadIcon className="size-4" />
+          Import Contract
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx

@@ -3,7 +3,7 @@ import { ClientOnly } from "components/ClientOnly/ClientOnly";
 import { Suspense } from "react";
 import { ContractTable } from "../../../../components/contract-components/tables/contract-table";
 import { DeployedContractsPageHeader } from "../DeployedContractsPageHeader";
-import { GetStartedWithContractsDeploy } from "./GetStartedWithContractsDeploy";
+import { DeployViaCLIOrImportCard } from "./DeployViaCLIOrImportCard";
 import { getSortedDeployedContracts } from "./getSortedDeployedContracts";
 
 export function DeployedContractsPage(props: {
@@ -21,6 +21,11 @@ export function DeployedContractsPage(props: {
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>
+        <div className="h-8" />
+        <DeployViaCLIOrImportCard
+          teamId={props.teamId}
+          projectId={props.projectId}
+        />
       </div>
     </div>
   );
@@ -37,15 +42,6 @@ async function DeployedContractsPageAsync(props: {
     authToken: props.authToken,
   });
 
-  if (deployedContracts.length === 0) {
-    return (
-      <GetStartedWithContractsDeploy
-        teamId={props.teamId}
-        projectId={props.projectId}
-      />
-    );
-  }
-
   return (
     <ClientOnly ssr={<Loading />}>
       <ContractTable

apps/dashboard/src/app/account/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -22,7 +22,8 @@ import {
 import { useMutation } from "@tanstack/react-query";
 import { ChainIcon } from "components/icons/ChainIcon";
 import { NetworkSelectDropdown } from "components/selects/NetworkSelectDropdown";
-import { EllipsisVerticalIcon, XIcon } from "lucide-react";
+import { EllipsisVerticalIcon, ExternalLinkIcon, XIcon } from "lucide-react";
+import Link from "next/link";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import React from "react";
 import { toast } from "sonner";
@@ -202,8 +203,16 @@ export function ContractTableUI(props: {
         </Table>
 
         {contracts.length === 0 && (
-          <div className="flex h-[200px] items-center justify-center text-muted-foreground">
-            No Contracts
+          <div className="flex h-[350px] items-center justify-center text-muted-foreground">
+            <div className="text-center">
+              <p className="mb-3">No contracts added to project</p>
+              <Button variant="outline" asChild className="bg-background">
+                <Link href="/explore" target="_blank">
+                  Discover Contracts
+                  <ExternalLinkIcon className="ml-2 size-4" />
+                </Link>
+              </Button>
+            </div>
           </div>
         )}
       </TableContainer>