From 32add5f602909e177b58421430c0a4cce69db49b Mon Sep 17 00:00:00 2001
From: iuwqyir <toomas.oosalu@gmail.com>
Date: Tue, 15 Jul 2025 19:59:09 +0000
Subject: [PATCH] Display webhook secret in dashboard (#7610)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

```
<!--

## title your PR with this format: "[Dashboard] Feature: Display and Mask Webhook Secret in Contracts Webhooks List"

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

## Notes for the reviewer

This PR introduces a new column to the Contracts Webhooks table to display the `webhook_secret`.

Key points:
- The secret is masked for security, showing `**********` followed by the last 3 characters (e.g., `**********xyz`).
- The full secret can be copied to the clipboard using the adjacent copy button.
- No backend changes were required as the `webhook_secret` is already available in the `WebhookResponse`.

## How to test

1. Navigate to a project's webhooks page on the dashboard (`/dashboard/[team_slug]/[project_slug]/webhooks`).
2. Observe the new "Webhook Secret" column in the table.
3. Verify that the secrets are displayed in the masked format (`**********xyz`).
4. Click the copy icon next to a masked secret and confirm that the full secret is copied to your clipboard.

-->
```

---

[Slack Thread](https://thirdwebdev.slack.com/archives/C085X0VQCF3/p1752487882125419?thread_ts=1752487882.125419&cid=C085X0VQCF3)

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new function to mask webhook secrets for improved security and updates the `WebhooksTable` component to display the masked secret while allowing users to copy the original secret.

### Detailed summary
- Added `maskWebhookSecret` function to mask webhook secrets.
- Updated `WebhooksTable` to include a new column for "Webhook Secret."
- Displayed masked secret in the table with an option to copy the original secret.

> ✨ 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**
  * Added a new "Webhook Secret" column to the webhooks table, displaying masked webhook secrets for improved privacy.
  * Included a copy button to easily copy the full unmasked webhook secret to the clipboard.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../webhooks/components/WebhooksTable.tsx     | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
index d715486f32b..a569aa88469 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/components/WebhooksTable.tsx
@@ -30,6 +30,15 @@ function getEventType(filters: WebhookFilters): string {
   return "Unknown";
 }
 
+function maskWebhookSecret(secret: string): string {
+  if (!secret || secret.length <= 3) {
+    return secret;
+  }
+  const lastThreeChars = secret.slice(-3);
+  const maskedPart = "*".repeat(10);
+  return maskedPart + lastThreeChars;
+}
+
 interface WebhooksTableProps {
   webhooks: WebhookResponse[];
   projectClientId: string;
@@ -127,6 +136,30 @@ export function ContractsWebhooksTable({
       },
       header: "Webhook URL",
     },
+    {
+      accessorKey: "webhook_secret",
+      cell: ({ getValue }) => {
+        const secret = getValue() as string;
+        const maskedSecret = maskWebhookSecret(secret);
+        return (
+          <div className="flex items-center gap-2">
+            <span className="max-w-40 truncate font-mono text-sm">
+              {maskedSecret}
+            </span>
+            <CopyTextButton
+              className="flex h-6 w-6 items-center justify-center"
+              copyIconPosition="right"
+              iconClassName="h-3 w-3"
+              textToCopy={secret}
+              textToShow=""
+              tooltip="Copy Webhook Secret"
+              variant="ghost"
+            />
+          </div>
+        );
+      },
+      header: "Webhook Secret",
+    },
     {
       accessorKey: "created_at",
       cell: ({ getValue }) => {