[PRO-249] Portal: Update OG images (#7664)

MananTank · MananTank · commit 53b463554349 · 2025-07-21T20:40:56.000Z
&lt;!--

## 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.

--&gt;

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR focuses on updating the metadata for various payment-related components in the `thirdweb` application, enhancing the clarity and consistency of the titles and icons associated with payments and vault features.

### Detailed summary
- Updated metadata in `apps/portal/src/app/payments/sell/page.mdx`: Changed title to "Sell Tokens" and icon to "payments".
- Updated metadata in `apps/portal/src/app/vault/page.mdx`: Added image with title "thirdweb Vault" and icon "vault".
- Updated metadata in `apps/portal/src/app/payments/routes/page.mdx`: Changed title to "Find Routes" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/layout.tsx`: Changed icon from "payment" to "payments".
- Updated metadata in `apps/portal/src/app/payments/tokens/page.mdx`: Changed title to "Get Token Prices" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/page.mdx`: Changed title to "Get started with Payments" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/products/page.mdx`: Changed title to "Sell a Product" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/custom-data/page.mdx`: Changed title to "Custom Payment Data" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/send/page.mdx`: Changed title to "Send a payment" and icon to "payments".
- Updated metadata in `apps/portal/src/app/payments/webhooks/page.mdx`: Changed title to "Payments Webhooks" and icon to "payments".
- Added new format script in `apps/portal/package.json`.

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

&lt;!-- end pr-codex --&gt;

&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai --&gt;
## Summary by CodeRabbit

* **New Features**
  * Added and updated metadata images and titles across several pages, including "Contracts", "Vault", and various "Payments" pages for improved visual representation.
  * Introduced support for a new "vault" icon in metadata image options.

* **Style**
  * Improved formatting and removed extraneous blank lines in code examples and UI components for better readability.
  * Cleaned up whitespace in multiple example code snippets.

* **Chores**
  * Added a new formatting script for consistent code style across the project.

* **Refactor**
  * Simplified Open Graph image layouts by removing certain UI elements.
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/apps/portal/package.json b/apps/portal/package.json
@@ -70,6 +70,7 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "format": "biome format ./src --write",
     "create-index": "pnpm tsx scripts/createEmptySearchIndex.ts",
     "dev": "next dev",
     "extract-llm-content": "pnpm tsx scripts/extractLLMData.ts",
diff --git a/apps/portal/public/og/background-1.png b/apps/portal/public/og/background-1.png
diff --git a/apps/portal/public/og/icons/contract.svg b/apps/portal/public/og/icons/contract.svg
diff --git a/apps/portal/src/app/api/og/route.tsx b/apps/portal/src/app/api/og/route.tsx
@@ -64,37 +64,6 @@ export async function GET(request: Request) {
           width: "50%",
         }}
       >
-        <div
-          style={{
-            alignItems: "center",
-            display: "flex",
-            gap: "10px",
-            marginBottom: "40px",
-          }}
-        >
-          <img
-            alt=""
-            height={50 / 1.7}
-            src={`${BAST_URL}/icons/thirdweb-logo.svg`}
-            style={{
-              display: "flex",
-            }}
-            width={300 / 1.7}
-          />
-
-          <div
-            style={{
-              color: "white",
-              fontFamily: "Inter",
-              fontSize: "26px",
-              fontWeight: 600,
-              marginTop: "2px",
-            }}
-          >
-            Docs
-          </div>
-        </div>
-
         <div
           style={{
             display: "flex",
@@ -107,26 +76,6 @@ export async function GET(request: Request) {
         >
           {title}
         </div>
-
-        <div
-          style={{
-            display: "flex",
-          }}
-        >
-          <div
-            style={{
-              background: "white",
-              borderRadius: "10px",
-              color: "black",
-              fontFamily: "Inter",
-              fontSize: "24px",
-              fontWeight: 600,
-              padding: "14px 20px",
-            }}
-          >
-            Read More
-          </div>
-        </div>
       </div>
 
       <img
diff --git a/apps/portal/src/app/contracts/page.mdx b/apps/portal/src/app/contracts/page.mdx
@@ -6,6 +6,10 @@ export const metadata = createMetadata({
 	title: "thirdweb Contracts",
 	description:
 		"Tools to easily create, deploy, and manage smart contracts on any EVM compatible blockchain.",
+	image: {
+		icon: "contract",
+		title: "thirdweb Contracts",
+	},
 });
 
 # What are Contracts?
diff --git a/apps/portal/src/app/payments/custom-data/page.mdx b/apps/portal/src/app/payments/custom-data/page.mdx
@@ -21,8 +21,8 @@ import {
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Custom Payment Data",
+    icon: "payments",
   },
   title: "Custom Payment Data",
   description: "Pass custom app data to payments to be included on webhooks, payment history, and more.",
@@ -92,7 +92,7 @@ Associate user IDs, custom payment IDs, order details, and more with any payment
           amount="0.1"
           purchaseData={{
             userId: "user-123",
-            orderId: "order-456", 
+            orderId: "order-456",
             productType: "wallet-funding",
             metadata: {
               source: "app",
diff --git a/apps/portal/src/app/payments/layout.tsx b/apps/portal/src/app/payments/layout.tsx
@@ -14,7 +14,7 @@ export const metadata = createMetadata({
   description:
     "Monetize your app with thirdweb Payments. Sell products, transfer funds between users, launch tokens, and more.",
   image: {
-    icon: "payment",
+    icon: "payments",
     title: "thirdweb Payments Docs",
   },
   title: "thirdweb Payments Documentation",
diff --git a/apps/portal/src/app/payments/page.mdx b/apps/portal/src/app/payments/page.mdx
@@ -23,8 +23,8 @@ import {
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay"
+    title: "Get started with Payments",
+    icon: "payments"
   },
   title: "Get started with Payments",
   description: "Monetize your app with thirdweb Payments. Sell products, transfer funds between users, launch tokens, and more.",
diff --git a/apps/portal/src/app/payments/products/page.mdx b/apps/portal/src/app/payments/products/page.mdx
@@ -12,8 +12,8 @@ import {
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Sell a Product",
+    icon: "payments",
   },
   title: "Sell a Product",
   description: "Accept any token as payment for your products.",
@@ -49,7 +49,7 @@ function ProductPage() {
     <div>
       <h1>Premium Course</h1>
       <p>Complete guide to web3 development</p>
-      
+
       <CheckoutWidget
         client={client}
         chain={arbitrum}
diff --git a/apps/portal/src/app/payments/routes/page.mdx b/apps/portal/src/app/payments/routes/page.mdx
@@ -22,8 +22,8 @@ import { ExternalLink } from "lucide-react";
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Find Routes",
+    icon: "payments",
   },
   title: "Find Routes",
   description: "Find available routes for bridging, swapping, and paying.",
diff --git a/apps/portal/src/app/payments/sell/page.mdx b/apps/portal/src/app/payments/sell/page.mdx
@@ -21,8 +21,8 @@ import {
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Sell Tokens",
+    icon: "payments",
   },
   title: "Sell Tokens",
   description: "Learn how to sell tokens with thirdweb Payments.",
diff --git a/apps/portal/src/app/payments/send/page.mdx b/apps/portal/src/app/payments/send/page.mdx
@@ -22,8 +22,8 @@ import { ExternalLink } from "lucide-react";
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Send a payment",
+    icon: "payments",
   },
   title: "Send a payment",
   description: "Learn how to send a payment between users with thirdweb Payments.",
@@ -48,7 +48,7 @@ Send a payment between users using any combination of chains or tokens. thirdweb
 
     ```typescript
     import { Bridge } from "thirdweb";
-    
+
     const preparedQuote = await Bridge.Buy.prepare({
   originChainId: 42161,
   originTokenAddress: "0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9", // USDT on Arbitrum
@@ -255,7 +255,7 @@ Send a payment between users using any combination of chains or tokens. thirdweb
           await new Promise((resolve) => setTimeout(resolve, 3000)); // Wait 3 seconds
         }
       } while (swapStatus.status === "PENDING");
- 
+
       if (swapStatus.status === "FAILED") {
         throw new Error("Swap transaction failed");
       }
diff --git a/apps/portal/src/app/payments/tokens/page.mdx b/apps/portal/src/app/payments/tokens/page.mdx
@@ -22,8 +22,8 @@ import { ExternalLink } from "lucide-react";
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Get Token Prices",
+    icon: "payments",
   },
   title: "Get Token Prices",
   description: "Use thirdweb Payments to get any token's current price and metadata.",
diff --git a/apps/portal/src/app/payments/webhooks/page.mdx b/apps/portal/src/app/payments/webhooks/page.mdx
@@ -21,8 +21,8 @@ import {
 
 export const metadata = createMetadata({
   image: {
-    title: "Payments",
-    icon: "pay",
+    title: "Payments Webhooks",
+    icon: "payments",
   },
   title: "Payments Webhooks",
   description: "Learn how to set up and handle webhooks for thirdweb Payments transactions.",
@@ -49,17 +49,17 @@ import { Bridge } from "thirdweb";
 export async function POST(request: Request) {
   const body = await request.text();
   const headers = Object.fromEntries(request.headers.entries());
-  
+
   try {
     const webhook = await Bridge.Webhook.parse(
       body,
       headers,
       process.env.WEBHOOK_SECRET // Your webhook secret
     );
-    
+
     // Process the webhook
     console.log("Webhook received:", webhook);
-    
+
     return Response.json({ success: true });
   } catch (error) {
     console.error("Webhook verification failed:", error);
@@ -162,30 +162,30 @@ If you prefer to handle verification manually, you can verify webhooks using the
 
 ```typescript
 async function verifyWebhook(
-  payload: string, 
-  headers: Record<string, string>, 
+  payload: string,
+  headers: Record<string, string>,
   secret: string,
   tolerance = 300 // 5 minutes
 ) {
   // Get the signature and timestamp from headers
   const receivedSignature = headers["x-payload-signature"] || headers["x-pay-signature"];
   const receivedTimestamp = headers["x-timestamp"] || headers["x-pay-timestamp"];
-  
+
   if (!receivedSignature || !receivedTimestamp) {
     throw new Error("Missing required webhook headers: signature or timestamp");
   }
-  
+
   // Verify timestamp
   const now = Math.floor(Date.now() / 1000);
   const timestamp = parseInt(receivedTimestamp, 10);
   const diff = Math.abs(now - timestamp);
-  
+
   if (diff > tolerance) {
     throw new Error(
       `Webhook timestamp is too old. Difference: ${diff}s, tolerance: ${tolerance}s`
     );
   }
-  
+
   // Generate signature using Web Crypto API
   const encoder = new TextEncoder();
   const key = await crypto.subtle.importKey(
@@ -195,23 +195,23 @@ async function verifyWebhook(
     false,
     ["sign"]
   );
-  
+
   const signature = await crypto.subtle.sign(
     "HMAC",
     key,
     encoder.encode(`${receivedTimestamp}.${payload}`)
   );
-  
+
   // Convert the signature to hex string
   const computedSignature = Array.from(new Uint8Array(signature))
     .map((b) => b.toString(16).padStart(2, "0"))
     .join("");
-  
+
   // Compare signatures
   if (computedSignature !== receivedSignature) {
     throw new Error("Invalid webhook signature");
   }
-  
+
   // Parse and return the payload
   return JSON.parse(payload);
 }
diff --git a/apps/portal/src/app/vault/layout.tsx b/apps/portal/src/app/vault/layout.tsx
@@ -14,4 +14,8 @@ export const metadata = createMetadata({
   description:
     "Vault is an open-source non-custodial key management service, secured with TEE architecture (AWS Nitro Enclaves) and designed for blockchain applications.",
   title: "Vault",
+  image: {
+    icon: "vault",
+    title: "thirdweb Vault",
+  },
 });
diff --git a/apps/portal/src/app/vault/page.mdx b/apps/portal/src/app/vault/page.mdx
@@ -6,6 +6,10 @@ import { ArrowLeftRightIcon, UserLockIcon, UsersIcon, WalletIcon } from "lucide-
 export const metadata = createMetadata({
 	title: "thirdweb Vault",
 	description: "An open-source, secure key management service for storing, managing, and protecting cryptographic keys and secrets.",
+    image: {
+        icon: "vault",
+        title: "thirdweb Vault",
+    },
 });
 
 # Vault
diff --git a/apps/portal/src/components/Document/metadata.ts b/apps/portal/src/components/Document/metadata.ts
@@ -14,7 +14,8 @@ type DynamicImageOptions = {
     | "wallets"
     | "auth"
     | "contract"
-    | "payment"
+    | "payments"
+    | "vault"
     | "infra"
     | "rpc"
     | "storage"
