From 0b510f881be0d7ebe327fac6660671638d5fec17 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 22 Oct 2024 21:09:06 +0000
Subject: [PATCH] Handle contract page crash if contract is not deployed
 (#5132)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving error handling in the `ContractOverviewPage` and validating contract existence in the `layout.tsx`. It introduces an `ErrorBoundary` around the `PublishedBy` component and checks if a contract is deployed before rendering the layout.

### Detailed summary
- Wrapped the `PublishedBy` component in an `ErrorBoundary` in `ContractOverviewPage.tsx`.
- Added a check for contract deployment using `isContractDeployed` in `layout.tsx`.
- Implemented a `notFound()` call if the contract is not deployed, with a TODO for future improvements.

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

<!-- end pr-codex -->
---
 .../(chain)/[chain_id]/[contractAddress]/layout.tsx      | 9 +++++++++
 .../[contractAddress]/overview/ContractOverviewPage.tsx  | 5 ++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
index 2fa3c2a7c02..da83be77f27 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx
@@ -3,7 +3,9 @@ import { SidebarLayout } from "@/components/blocks/SidebarLayout";
 import { ContractMetadata } from "components/custom-contract/contract-header/contract-metadata";
 import { DeprecatedAlert } from "components/shared/DeprecatedAlert";
 import type { Metadata } from "next";
+import { notFound } from "next/navigation";
 import { getContractMetadata } from "thirdweb/extensions/common";
+import { isContractDeployed } from "thirdweb/utils";
 import { resolveFunctionSelectors } from "../../../../../lib/selectors";
 import { shortenIfAddress } from "../../../../../utils/usedapp-external";
 import { ConfigureCustomChain } from "./ConfigureCustomChain";
@@ -26,6 +28,13 @@ export default async function Layout(props: {
     return <ConfigureCustomChain chainSlug={props.params.chain_id} />;
   }
 
+  // check if the contract exists
+  const isValidContract = await isContractDeployed(info.contract);
+  if (!isValidContract) {
+    // TODO - replace 404 with a better page to upsale deploy or other thirdweb products
+    notFound();
+  }
+
   const { contract, chainMetadata } = info;
   const contractPageMetadata = await getContractPageMetadata(contract);
   const sidebarLinks = getContractPageSidebarLinks({
diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
index 0c2f3ccaa7d..ea4488de829 100644
--- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
+++ b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx
@@ -1,4 +1,5 @@
 import { PublishedBy } from "components/contract-components/shared/published-by";
+import { ErrorBoundary } from "react-error-boundary";
 import type { ThirdwebContract } from "thirdweb";
 import { AnalyticsOverview } from "./components/Analytics";
 import { BuildYourApp } from "./components/BuildYourApp";
@@ -99,7 +100,9 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
         />
       </div>
       <div className="shrink-0 lg:w-[300px]">
-        <PublishedBy contract={contract} />
+        <ErrorBoundary fallback={null}>
+          <PublishedBy contract={contract} />
+        </ErrorBoundary>
       </div>
     </div>
   );