[Docs] webhook and ub docs (#7278)

CORE-0000

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the user experience for webhooks in the thirdweb platform by updating sidebar navigation, adding troubleshooting information, and improving documentation on configuring webhooks.

### Detailed summary
- Updated sidebar in `insight` to rename "Getting Started" to "Get Started".
- Added "Troubleshoot" section with `WrenchIcon` in `pay` sidebar.
- Introduced troubleshooting content in `troubleshoot/page.mdx`.
- Enhanced `webhooks/page.mdx` with new structure and images for configuration steps.
- Revised descriptions and added a "Get started" section in `webhooks/page.mdx`.

> ✨ 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 "Troubleshoot" section in the sidebar for Universal Bridge, providing guidance for resolving payment card issues.
  - Introduced a troubleshooting article explaining card support errors and suggesting alternative payment methods.

- **Documentation**
  - Enhanced the Insight Webhooks documentation with step-by-step setup instructions, visual aids, and improved metadata description.
  - Added a new "Get started" section to guide users through webhook creation and testing.

- **Style**
  - Renamed the "Getting Started" sidebar link under Webhooks to "Get Started" for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: saminacodes

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

@@ -65,7 +65,7 @@ export const sidebar: SideBar = {
       icon: <WebhookIcon />,
       links: [
         {
-          name: "Getting Started",
+          name: "Get Started",
           href: `${insightSlug}/webhooks`,
         },
         {

apps/portal/src/app/insight/webhooks/assets/create-filters.png

@@ -1,8 +1,11 @@
-import { createMetadata } from "@doc";
+import { createMetadata, Steps, Step, DocImage } from "@doc";
+import CreateWebhook from './assets/create-webhooks.png'
+import CreateFilters from './assets/create-filters.png'
+import TestWebhook from './assets/test-webhook.png'
 
 export const metadata = createMetadata({
 	title: "Insight Webhooks | thirdweb Infrastructure",
-	description: "Getting started with Insight webhooks",
+	description: "Receive real-time notifications for blockchain events",
   image: {
     title: "Insight",
     icon: "insight",
@@ -13,8 +16,6 @@ export const metadata = createMetadata({
 
 Webhooks allow you to receive notifications when specific blockchain events or transactions occur. This enables you to automate workflows and keep your applications in sync with on-chain activity.
 
-## About Webhooks
-
 ### Data Delivery
 Webhook events are collected and delivered in batches for optimal performance and reliability. This makes webhooks ideal for:
 - Tracking when specific blockchain events occur
@@ -23,11 +24,57 @@ Webhook events are collected and delivered in batches for optimal performance an
 - Triggering downstream processes
 
 ### Delivery Guarantees
-Events are guaranteed to be delivered *at least once*.  
-Your application should implement idempotency and deduplication logic using the unique event ID in the payload.  
-Events may occasionally be delivered out of order.
+Events are guaranteed to be delivered *at least once*. Your application should implement idempotency and deduplication logic using the unique event ID in the payload. Please note, events may occasionally be delivered out of order.
 
 ### Performance Requirements
 - Your receiving endpoint must respond within 3 seconds
 - If your endpoint consistently fails to respond in time, the webhook will be automatically suspended
 - We recommend implementing a queue system if you need to perform time-consuming operations
+
+## Get started
+
+Webhooks can be configured in the thirdweb dashboard (recommended) by creating a project or [programmatically using the Insight API](/insight/webhooks/managing-webhooks).
+
+<Steps>
+<Step title="Navigate to Webhooks">
+Creating a webhook requires a project. If you don't have a project yet, create one in the thirdweb dashboard and navigate to the Webhooks section.
+
+</Step>
+<Step title="Create a Webhook">
+Select New Webhook and provide the following:
+- **Name**: A descriptive name for your webhook
+- **Endpoint URL**: The URL where you want to receive webhook notifications
+- **Events**: Select an event or transaction filter type:
+  - **Event**: Triggered by specific blockchain events (e.g., token transfers, contract interactions)
+  - **Transaction**: Triggered by transactions matching specific criteria (e.g., from/to address, value)
+
+<DocImage src={CreateWebhook} alt="Create Webhook" />
+</Step>
+<Step title="Configure Filters">
+You can set up filters to narrow down the events or transactions that trigger the webhook.
+
+For EVENTS:
+
+- **Chain IDs**: Select the blockchain networks you want to monitor (e.g., Ethereum, Polygon)
+- **Contract Addresses**: Specify contract addresses to filter events related to specific contracts
+- **Event Signatures**: For event filters, you can specify event signatures to target specific events
+- **ABI**: For event filters, you can provide the ABI of the contract- providing the contract's address will usually automatically fetch the ABI.
+
+For TRANSACTION:
+
+- **Chain IDs**: Select the blockchain networks you want to monitor
+- **From/To Addresses**: Specify addresses to filter transactions by sender or recipient
+- **Function Signatures**: For transaction filters, you can specify function signatures to target specific contract interactions
+- **ABI**: For transaction filters, you can provide the ABI of the contract- providing the contract's address will usually automatically fetch the ABI.
+
+<DocImage src={CreateFilters} alt="Create Filters"/>
+</Step>
+
+<Step title="Test & Create Webhook">
+After creating the webhook, you can test it by sending a sample event. This allows you to verify that your endpoint is correctly configured to receive and process webhook notifications.
+
+After successful testing, click "Create Webhook" to finalize the setup.
+
+<DocImage src={TestWebhook} alt="Test Webhook" />
+</Step>
+</Steps>

apps/portal/src/app/insight/webhooks/assets/create-webhooks.png

@@ -11,6 +11,7 @@ import {
   TriangleRightIcon,
   WalletIcon,
   WebhookIcon,
+  WrenchIcon,
 } from "lucide-react";
 
 const paySlug = "/pay";
@@ -116,6 +117,11 @@ export const sidebar: SideBar = {
       href: `${paySlug}/webhooks`,
       icon: <WebhookIcon />,
     },
+    {
+      name: "Troubleshoot",
+      href: `${paySlug}/troubleshoot`,
+      icon: <WrenchIcon />,
+    },
     {
       name: "FAQs",
       href: `${paySlug}/faqs`,

apps/portal/src/app/insight/webhooks/assets/test-webhook.png

@@ -0,0 +1,11 @@
+import {Details} from "@doc";
+
+# Universal Bridge Troubleshoot Articles
+
+<Details summary="Your card does not support this type of purchase."> 
+When using onramp providers, you may encounter an error stating "There was an issue processing your payment and you have not been charged. Your card does not support this type of purchase." 
+
+This typically means that your card issuer does not allow cryptocurrency purchases.
+
+To work around this issue, you can try using a different card or payment method, such as debit card, if available.
+</Details>