From b37ed5736576a90e4d8d923022dda383df478693 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 22 Sep 2025 18:59:27 +0000
Subject: [PATCH] Dashboard: Fix broken opengraph-image.tsx (#8094)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 refactoring the use of `useId` in several components by replacing it with static string values for IDs, improving consistency and potentially performance in the components related to Open Graph images.

### Detailed summary
- Removed `useId` from `contract-wallet-analytics.ts`, replacing it with a static variable.
- Updated `TWLogo` component in `opengraph-image.tsx` to use static IDs instead of `useId`.
- Changed `OgBrandIcon` component in `opengraph-image.tsx` to use a static gradient ID.
- Updated `TWLogo` component in another `opengraph-image.tsx` file to use static IDs instead of `useId`.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- New Features
  - None.
- Bug Fixes
  - Improved reliability of OpenGraph images by using stable SVG IDs for gradients and clip paths, ensuring consistent rendering across sharing platforms on chain, contract, and drop pages.
- Chores
  - Removed unnecessary debug logging from wallet analytics to reduce console noise.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../(chain)/[chain_id]/(chainPage)/opengraph-image.tsx       | 5 ++---
 .../analytics/utils/contract-wallet-analytics.ts             | 1 -
 .../(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx | 4 ++--
 .../dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx | 5 ++---
 4 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx
index 3b7c24ac2e0..9462270abfe 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/opengraph-image.tsx
@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -18,8 +17,8 @@ export const size = {
 export const contentType = "image/png";
 
 const TWLogo: React.FC = () => {
-  const clipPathId = useId();
-  const linearGradientId = useId();
+  const clipPathId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
     <svg
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/utils/contract-wallet-analytics.ts b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/utils/contract-wallet-analytics.ts
index 2599273befc..d4aa07334fc 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/utils/contract-wallet-analytics.ts
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/analytics/utils/contract-wallet-analytics.ts
@@ -67,7 +67,6 @@ export async function getContractUniqueWalletAnalytics(params: {
   }
 
   const json = (await res.json()) as InsightResponse;
-  console.log("wallet analytics json", json);
   const aggregations = Object.values(json.aggregations[0]);
 
   const returnValue: TransactionAnalyticsEntry[] = [];
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx
index 42b5d589b51..b3e803844e1 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/opengraph-image.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
 import { ImageResponse } from "@vercel/og";
-import { useId } from "react";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { isProd } from "@/constants/env-utils";
 import { API_ROUTES_CLIENT_ID } from "@/constants/server-envs";
@@ -62,8 +61,9 @@ function shortenString(str: string) {
   return `${str.substring(0, 7)}...${str.substring(str.length - 5)}`;
 }
 
+const gradientId = "og-brand-icon-gradient";
+
 const OgBrandIcon: React.FC = () => {
-  const gradientId = useId();
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed
     <svg
diff --git a/apps/dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx b/apps/dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx
index 645b4e8fd4c..7ee63dde463 100644
--- a/apps/dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx
+++ b/apps/dashboard/src/app/(app)/drops/[slug]/opengraph-image.tsx
@@ -1,5 +1,4 @@
 import { ImageResponse } from "next/og";
-import { useId } from "react";
 import { download } from "thirdweb/storage";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "@/constants/server-envs";
 import { getConfiguredThirdwebClient } from "@/constants/thirdweb.server";
@@ -19,8 +18,8 @@ export const size = {
 export const contentType = "image/png";
 
 const TWLogo: React.FC = () => {
-  const cipId = useId();
-  const linearGradientId = useId();
+  const cipId = "og-tw-logo-clip-path";
+  const linearGradientId = "og-tw-logo-linear-gradient";
 
   return (
     // biome-ignore lint/a11y/noSvgWithoutTitle: not needed