[MNY-193] Dashboard: Update Client Ids for Buy and Swap widgets in chain, bridge and asset pages

Author: MananTank

apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useTheme } from "next-themes";
-import { useEffect, useRef, useState } from "react";
-import type { Chain, ThirdwebClient } from "thirdweb";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { Chain } from "thirdweb";
 import { BuyWidget, SwapWidget } from "thirdweb/react";
 import {
   reportAssetBuyCancelled,
@@ -14,16 +14,23 @@ import {
   reportTokenSwapSuccessful,
 } from "@/analytics/report";
 import { Button } from "@/components/ui/button";
+import {
+  NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID,
+  NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID,
+} from "@/constants/public-envs";
 import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
+import { getConfiguredThirdwebClient } from "../../constants/thirdweb.server";
+
+type PageType = "asset" | "bridge" | "chain";
 
 export function BuyAndSwapEmbed(props: {
-  client: ThirdwebClient;
   chain: Chain;
   tokenAddress: string | undefined;
   buyAmount: string | undefined;
-  pageType: "asset" | "bridge" | "chain";
+  pageType: PageType;
 }) {
   const { theme } = useTheme();
   const [tab, setTab] = useState<"buy" | "swap">("swap");
@@ -41,6 +48,21 @@ export function BuyAndSwapEmbed(props: {
     });
   }, [props.pageType]);
 
+  const client = useMemo(() => {
+    return getConfiguredThirdwebClient({
+      clientId:
+        props.pageType === "asset"
+          ? NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID
+          : props.pageType === "bridge"
+            ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID
+            : props.pageType === "chain"
+              ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID
+              : undefined,
+      secretKey: undefined,
+      teamId: undefined,
+    });
+  }, [props.pageType]);
+
   return (
     <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10">
       <div className="flex gap-2.5 p-4 border-b border-dashed">
@@ -62,7 +84,7 @@ export function BuyAndSwapEmbed(props: {
           chain={props.chain}
           className="!rounded-2xl !w-full !border-none"
           title=""
-          client={props.client}
+          client={client}
           connectOptions={{
             autoConnect: false,
           }}
@@ -103,7 +125,7 @@ export function BuyAndSwapEmbed(props: {
 
       {tab === "swap" && (
         <SwapWidget
-          client={props.client}
+          client={client}
           theme={themeObj}
           className="!rounded-2xl !border-none !w-full"
           prefill={{

apps/dashboard/src/@/constants/public-envs.ts

@@ -32,3 +32,12 @@ export const NEXT_PUBLIC_DEMO_ENGINE_URL =
 
 export const NEXT_PUBLIC_THIRDWEB_AI_HOST =
   process.env.NEXT_PUBLIC_THIRDWEB_AI_HOST || "https://nebula-api.thirdweb.com";
+
+export const NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID;
+
+export const NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID =
+  process.env.NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID;

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -25,6 +25,7 @@ import { getVercelEnv } from "@/utils/vercel";
 export function getConfiguredThirdwebClient(options: {
   secretKey: string | undefined;
   teamId: string | undefined;
+  clientId?: string;
 }): ThirdwebClient {
   if (getVercelEnv() !== "production") {
     // if not on production: run this when creating a client to set the domains
@@ -77,7 +78,8 @@ export function getConfiguredThirdwebClient(options: {
   }
 
   // During build time, provide fallbacks if credentials are missing
-  const clientId = NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
+  const clientId =
+    options.clientId || NEXT_PUBLIC_DASHBOARD_CLIENT_ID || "dummy-build-client";
   const secretKey = options.secretKey || undefined;
 
   return createThirdwebClient({

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx

@@ -1,18 +1,13 @@
 "use client";
-import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { GridPatternEmbedContainer } from "@/components/blocks/grid-pattern-embed-container";
 import { defineDashboardChain } from "@/lib/defineDashboardChain";
 
-export function BuyFundsSection(props: {
-  chain: ChainMetadata;
-  client: ThirdwebClient;
-}) {
+export function BuyFundsSection(props: { chain: ChainMetadata }) {
   return (
     <GridPatternEmbedContainer>
       <BuyAndSwapEmbed
-        client={props.client}
         // eslint-disable-next-line no-restricted-syntax
         chain={defineDashboardChain(props.chain.chainId, props.chain)}
         buyAmount={undefined}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -44,7 +44,7 @@ export default async function Page(props: {
       {chain.testnet ? (
         <FaucetSection chain={chain} client={client} isLoggedIn={!!account} />
       ) : chain.services.find((c) => c.service === "pay" && c.enabled) ? (
-        <BuyFundsSection chain={chain} client={client} />
+        <BuyFundsSection chain={chain} />
       ) : null}
 
       {/* Chain Overview */}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -173,7 +173,6 @@ function BuyEmbed(props: {
     return (
       <BuyAndSwapEmbed
         chain={props.clientContract.chain}
-        client={props.clientContract.client}
         tokenAddress={props.clientContract.address}
         buyAmount={undefined}
         pageType="asset"

apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -3,7 +3,6 @@
 import type { TokenInfo } from "thirdweb/react";
 import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
-import { bridgeAppThirdwebClient } from "../../constants";
 
 export function UniversalBridgeEmbed({
   chainId,
@@ -19,7 +18,6 @@ export function UniversalBridgeEmbed({
   return (
     <div className="w-full lg:w-[400px]">
       <BuyAndSwapEmbed
-        client={bridgeAppThirdwebClient}
         chain={chain}
         buyAmount={amount}
         tokenAddress={token?.address}