webhook and ub docs

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 workaround this issue, you can try using a different card or payment method, such as debit card, if available.
+</Details>