From c36cfbb5c7caa39a55fc1b08e73742cdc9be906d Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 22 Oct 2025 21:57:01 +0000
Subject: [PATCH] [MNY-257] Dashboard: Add query params in bridge page to
 configure token selection (#8293)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 enhances the `Page` component in `apps/dashboard/src/app/bridge/page.tsx` by introducing asynchronous handling of search parameters and improving the logic for processing input and output chains and currencies.

### Detailed summary

- Added a `SearchParams` type to define search parameters.
- Updated `Page` to accept `searchParams` as a `Promise`.
- Implemented `onlyAddress` and `onlyNumber` functions for validation.
- Introduced a `parse` function to extract values from search parameters.
- Updated the `BridgePageUI` props for `buyTab` and `swapTab` to handle dynamic token data.

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

<!-- end pr-codex -->
---
 apps/dashboard/src/app/bridge/page.tsx | 56 ++++++++++++++++++++++++--
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
index c6121b422ab..9c3d796c9dd 100644
--- a/apps/dashboard/src/app/bridge/page.tsx
+++ b/apps/dashboard/src/app/bridge/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import { isAddress, NATIVE_TOKEN_ADDRESS } from "thirdweb";
 import { BridgePageUI } from "./components/bridge-page";
 
 const title = "thirdweb Bridge: Buy, Bridge & Swap Crypto on 85+ Chains";
@@ -14,11 +15,50 @@ export const metadata: Metadata = {
   title,
 };
 
-export default function Page() {
+type SearchParams = {
+  [key: string]: string | string[] | undefined;
+};
+
+export default async function Page(props: {
+  searchParams: Promise<SearchParams>;
+}) {
+  const searchParams = await props.searchParams;
+
+  const onlyAddress = (v: string) => (isAddress(v) ? v : undefined);
+  const onlyNumber = (v: string) =>
+    Number.isNaN(Number(v)) ? undefined : Number(v);
+
+  // output is buy, input is sell
+  const sellChain = parse(searchParams.inputChain, onlyNumber);
+  const sellCurrency = parse(searchParams.inputCurrency, onlyAddress);
+
+  const buyChain = parse(searchParams.outputChain, onlyNumber);
+  const buyCurrency = parse(searchParams.outputCurrency, onlyAddress);
+
   return (
     <BridgePageUI
-      buyTab={undefined}
-      swapTab={undefined}
+      buyTab={{
+        buyToken: buyChain
+          ? {
+              chainId: buyChain,
+              tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+      }}
+      swapTab={{
+        sellToken: sellChain
+          ? {
+              chainId: sellChain,
+              tokenAddress: sellCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+        buyToken: buyChain
+          ? {
+              chainId: buyChain,
+              tokenAddress: buyCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+      }}
       title={
         <h1 className="text-3xl md:text-6xl font-semibold tracking-tighter text-balance text-center">
           Bridge and Swap tokens <br className="max-sm:hidden" /> across any
@@ -28,3 +68,13 @@ export default function Page() {
     />
   );
 }
+
+function parse<T>(
+  value: string | string[] | undefined,
+  fn: (value: string) => T | undefined,
+): T | undefined {
+  if (typeof value === "string") {
+    return fn(value);
+  }
+  return undefined;
+}