[TOOL-3763] Dashboard: Update Contracts page (#6611)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the user interface and functionality of the contracts management section. It introduces new components and modifies existing ones to improve user experience, particularly around contract deployment and management.

### Detailed summary
- Removed the `GetStartedWithContractsDeploy` component.
- Added `DeployViaCLIOrImportCard` component for contract deployment options.
- Updated the `DeployedContractsPage` to include the new `DeployViaCLIOrImportCard`.
- Modified the `ContractTableUI` to display a message and button when no contracts are present.
- Increased the height of the no contracts message section.
- Added a link to discover contracts with an external icon.

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

<!-- end pr-codex -->

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>