diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx index ab67e638b6c..0ad2382fb9c 100644 --- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx +++ b/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, @@ -17,16 +17,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"); @@ -44,6 +51,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 (