[MNY-257] Dashboard: Add query params in bridge page to configure token selection

Author: MananTank

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,67 @@ 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 inputChain = getStringFromSearchParams(searchParams, "inputChain");
+  const outputChain = getStringFromSearchParams(searchParams, "outputChain");
+  const _inputCurrency = getStringFromSearchParams(
+    searchParams,
+    "inputCurrency",
+  );
+  const _outputCurrency = getStringFromSearchParams(
+    searchParams,
+    "outputCurrency",
+  );
+
+  const inputCurrency =
+    _inputCurrency && isAddress(_inputCurrency) ? _inputCurrency : undefined;
+  const outputCurrency =
+    _outputCurrency && isAddress(_outputCurrency) ? _outputCurrency : undefined;
+
+  const inputChainParsed = Number(inputChain);
+  const outputChainParsed = Number(outputChain);
+
+  const inputChainNumber = Number.isNaN(inputChainParsed)
+    ? undefined
+    : inputChainParsed;
+
+  const outputChainNumber = Number.isNaN(outputChainParsed)
+    ? undefined
+    : outputChainParsed;
+
+  // output is buy, input is sell
+
   return (
     <BridgePageUI
-      buyTab={undefined}
-      swapTab={undefined}
+      buyTab={{
+        buyToken: outputChainNumber
+          ? {
+              chainId: outputChainNumber,
+              tokenAddress: outputCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+      }}
+      swapTab={{
+        sellToken: inputChainNumber
+          ? {
+              chainId: inputChainNumber,
+              tokenAddress: inputCurrency || NATIVE_TOKEN_ADDRESS,
+            }
+          : undefined,
+        buyToken: outputChainNumber
+          ? {
+              chainId: outputChainNumber,
+              tokenAddress: outputCurrency || 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 +85,14 @@ export default function Page() {
     />
   );
 }
+
+function getStringFromSearchParams(
+  searchParams: SearchParams,
+  key: string,
+): string | undefined {
+  const value = searchParams[key];
+  if (typeof value === "string") {
+    return value;
+  }
+  return undefined;
+}