delete outdated webhook docs and move webhooks to tokens (#8587)

<!--

## 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 primarily focuses on the addition and enhancement of webhook documentation for both `Tokens` and `Bridge` functionalities in the application, while removing outdated files.

### Detailed summary
- Deleted files related to `webhooks` in `portal/src/app`.
- Added `webhooks` section in `tokens` documentation with use cases and configuration instructions.
- Updated `bridge` documentation to reflect the correct title and description.
- Enhanced explanations for creating webhooks in both `tokens` and `bridge` contexts.
- Included images for `TokenWebhooksScreen` and `BridgeWebhookScreen`.

> ✨ 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

* **Documentation**
  * Reorganized webhooks docs into product-specific guides: Bridge (renamed from Payments Webhooks) and Tokens.
  * Added new Token Webhooks guide with use cases, setup steps, and an illustrative image.
  * Updated Bridge Webhooks content and dashboard guidance; added visuals and clarified structure and headings.
  * Removed the generic Webhooks overview in favor of the new guides.
  * Minor wording improvements in Wallets security docs.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: saminacodes

apps/portal/src/app/bridge/webhooks/assets/bridge-webhooks.png

@@ -2,6 +2,7 @@ import {
   Callout,
   OpenSourceCard,
   createMetadata,
+  DocImage,
   InstallTabs,
   SDKCard,
   Grid,
@@ -19,25 +20,31 @@ import {
   UnrealEngineIcon,
 } from "@/icons";
 
+import BridgeWebhookScreen from "./assets/bridge-webhooks.png";
+
 export const metadata = createMetadata({
   image: {
-    title: "Payments Webhooks",
+    title: "Bridge Webhooks",
     icon: "payments",
   },
-  title: "Payments Webhooks",
-  description: "Learn how to set up and handle webhooks for thirdweb Payments transactions.",
+  title: "Bridge Webhooks",
+  description: "Learn how to set up and handle webhooks for thirdweb Bridge transactions.",
 });
 
-# Webhooks
+# Bridge Webhooks
+
+Create webhooks to be notified on each bridge, swap, and onramp transaction. 
 
-Create webhooks to be notified each time a payment is completed in your app.
+## Dashboard
 
-## Create a Webhook
+You can create a webhook in your project dashboard by navigating to Bridge > Webhooks tab. 
 
-You can create a webhook in your project dashboard under the Webhooks > Bridge tab. You'll be prompted to copy a secret key before saving the webhook. This will be used for verification on all webhook requests received by your backend.
+You'll be prompted to copy a secret key before saving the webhook. This will be used for verification on all webhook requests received by your backend.
 
+<DocImage src={BridgeWebhookScreen} alt="Project Overview"/>
 
-## Parse Webhook Payload with thirdweb SDK
+
+## Parse Webhook Payload
 
 The thirdweb SDK has a built-in function for parsing bridge webhook payloads
 
@@ -103,7 +110,6 @@ const payload = await Bridge.Webhook.parse(
 
 ```
 
-
 ## Example Payloads
 
 <Tabs defaultValue="bridge">

apps/portal/src/app/bridge/webhooks/page.mdx

@@ -37,6 +37,10 @@ export const sidebar: SideBar = {
           ],
           name: "Deploy Tokens",
         },
+        {
+          href: `${slug}/webhooks`,
+          name: "Webhooks",
+        },
       ],
       name: "Guides",
     },

apps/portal/src/app/tokens/sidebar.tsx

@@ -0,0 +1,30 @@
+import { DocImage} from "@doc"
+import TokenWebhooksScreen from "./assets/token-webhooks.png"
+
+# Webhooks
+
+You can create webhooks to receive notifications for contract events such as token transfers or state changes or for blockchain transactions on any contract.
+
+With webhooks, you'll receive event data in real-time without making constant requests, reducing RPC load and the risk of missing events.
+
+## Use Cases
+
+Your app may trigger an action when an onchain event occurs, such as:
+
+- ETH or an ERC20 currency is transferred to or from a wallet.
+- A token is minted from your NFT collection.
+- A token in your NFT collection is burned or transferred.
+- Metadata for an oracle contract is updated.
+
+## Create Webhooks
+
+You can configure token webhooks from the dashboard by navigating to your project and selecting Tokens > Webhooks
+
+<DocImage src={TokenWebhooksScreen} alt="Token Webhooks Screen" />
+
+
+
+
+
+
+

apps/portal/src/app/tokens/webhooks/assets/token-webhooks.png

@@ -196,7 +196,7 @@ The response also arrives in the same payload format. We just perform the steps
 
 ## Wallets Audits
 
-View the full audit reports for any wallets related features and specs:
+View the full audit reports for any wallets-related features and specs:
 
 - [7702 (Minimal Account)](https://0xmacro.com/library/audits/thirdweb-22)
 - [Managed Account Factory](https://ipfs.io/ipfs/Qmc36VUCuwG2u7kZrqmXmJsH5c8sF7SHySVbPnwVmo3XYX/thirdweb%20A-14%20_%20Macro%20Audits%20_%20The%200xMacro%20Library.pdf)