add embed in chain, bridge page

MananTank · MananTank · commit 1405e11d42e9 · 2025-09-17T18:29:34.000+05:30
diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
@@ -255,6 +255,7 @@ type TokenSwapParams = {
   buyTokenAddress: string;
   sellTokenChainId: number;
   sellTokenAddress: string;
+  pageType: "asset" | "bridge" | "chain";
 };
 
 /**
diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
@@ -16,10 +16,12 @@ import { cn } from "@/lib/utils";
 import { parseError } from "@/utils/errorParser";
 import { getSDKTheme } from "@/utils/sdk-component-theme";
 
-export function BuyTokenEmbed(props: {
+export function BuyAndSwapEmbed(props: {
   client: ThirdwebClient;
   chain: Chain;
-  tokenAddress: string;
+  tokenAddress: string | undefined;
+  buyAmount: string | undefined;
+  pageType: "asset" | "bridge" | "chain";
 }) {
   const { theme } = useTheme();
   const [tab, setTab] = useState<"buy" | "swap">("swap");
@@ -41,7 +43,7 @@ export function BuyTokenEmbed(props: {
 
       {tab === "buy" && (
         <BuyWidget
-          amount="1"
+          amount={props.buyAmount || "1"}
           chain={props.chain}
           className="!rounded-2xl !w-full !border-none"
           title=""
@@ -51,19 +53,23 @@ export function BuyTokenEmbed(props: {
           }}
           onError={(e) => {
             const errorMessage = parseError(e);
-            reportAssetBuyFailed({
-              assetType: "coin",
-              chainId: props.chain.id,
-              contractType: "DropERC20",
-              error: errorMessage,
-            });
+            if (props.pageType === "asset") {
+              reportAssetBuyFailed({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: "DropERC20",
+                error: errorMessage,
+              });
+            }
           }}
           onSuccess={() => {
-            reportAssetBuySuccessful({
-              assetType: "coin",
-              chainId: props.chain.id,
-              contractType: "DropERC20",
-            });
+            if (props.pageType === "asset") {
+              reportAssetBuySuccessful({
+                assetType: "coin",
+                chainId: props.chain.id,
+                contractType: "DropERC20",
+              });
+            }
           }}
           theme={themeObj}
           tokenAddress={props.tokenAddress as `0x${string}`}
@@ -92,6 +98,7 @@ export function BuyTokenEmbed(props: {
               buyTokenAddress: quote.intent.destinationTokenAddress,
               sellTokenChainId: quote.intent.originChainId,
               sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
             });
           }}
           onSuccess={(quote) => {
@@ -100,6 +107,7 @@ export function BuyTokenEmbed(props: {
               buyTokenAddress: quote.intent.destinationTokenAddress,
               sellTokenChainId: quote.intent.originChainId,
               sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
             });
           }}
           onCancel={(quote) => {
@@ -108,6 +116,7 @@ export function BuyTokenEmbed(props: {
               buyTokenAddress: quote.intent.destinationTokenAddress,
               sellTokenChainId: quote.intent.originChainId,
               sellTokenAddress: quote.intent.originTokenAddress,
+              pageType: props.pageType,
             });
           }}
         />
diff --git a/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx b/apps/dashboard/src/@/components/blocks/grid-pattern-embed-container.tsx
@@ -0,0 +1,23 @@
+import { GridPattern } from "@/components/ui/background-patterns";
+
+export function GridPatternEmbedContainer(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className=" sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
+      <GridPattern
+        width={30}
+        height={30}
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className="text-border dark:text-border/70 hidden lg:block"
+        style={{
+          maskImage:
+            "linear-gradient(to bottom right,white,transparent,transparent)",
+        }}
+      />
+      <div className="sm:w-[420px] z-10">{props.children}</div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
@@ -1,24 +1,24 @@
 "use client";
-import { useTheme } from "next-themes";
-import { defineChain, type ThirdwebClient } from "thirdweb";
+import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
-import { BuyWidget } from "thirdweb/react";
-import { getSDKTheme } from "@/utils/sdk-component-theme";
+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;
 }) {
-  const { theme } = useTheme();
   return (
-    <section className="flex flex-col gap-4 items-center justify-center">
-      <BuyWidget
-        amount="0"
-        // eslint-disable-next-line no-restricted-syntax
-        chain={defineChain(props.chain.chainId)}
+    <GridPatternEmbedContainer>
+      <BuyAndSwapEmbed
         client={props.client}
-        theme={getSDKTheme(theme === "dark" ? "dark" : "light")}
+        // eslint-disable-next-line no-restricted-syntax
+        chain={defineDashboardChain(props.chain.chainId, props.chain)}
+        buyAmount={undefined}
+        tokenAddress={undefined}
+        pageType="chain"
       />
-    </section>
+    </GridPatternEmbedContainer>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
@@ -3,7 +3,8 @@ import type { ThirdwebContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { getContractMetadata } from "thirdweb/extensions/common";
 import { decimals, getActiveClaimCondition } from "thirdweb/extensions/erc20";
-import { GridPattern } from "@/components/ui/background-patterns";
+import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
+import { GridPatternEmbedContainer } from "@/components/blocks/grid-pattern-embed-container";
 import { HAS_USED_DASHBOARD } from "@/constants/cookie";
 import { resolveFunctionSelectors } from "@/lib/selectors";
 import { AssetPageView } from "../_components/asset-page-view";
@@ -14,7 +15,6 @@ import { TokenDropClaim } from "./_components/claim-tokens/claim-tokens-ui";
 import { ContractAnalyticsOverview } from "./_components/contract-analytics/contract-analytics";
 import { DexScreener } from "./_components/dex-screener";
 import { mapChainIdToDexScreenerChainSlug } from "./_components/dex-screener-chains";
-import { BuyTokenEmbed } from "./_components/PayEmbedSection";
 import { RecentTransfers } from "./_components/RecentTransfers";
 import { fetchTokenInfoFromBridge } from "./_utils/fetch-coin-info";
 import { getCurrencyMeta } from "./_utils/getCurrencyMeta";
@@ -104,31 +104,17 @@ export async function ERC20PublicPage(props: {
 
       {showBuyEmbed && (
         <div className="container max-w-7xl pb-10">
-          <div className=" sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
-            <GridPattern
-              width={30}
-              height={30}
-              x={-1}
-              y={-1}
-              strokeDasharray={"4 2"}
-              className="text-border dark:text-border/70"
-              style={{
-                maskImage:
-                  "linear-gradient(to bottom right,white,transparent,transparent)",
-              }}
+          <GridPatternEmbedContainer>
+            <BuyEmbed
+              chainMetadata={props.chainMetadata}
+              claimConditionMeta={claimConditionMeta}
+              clientContract={props.clientContract}
+              tokenAddress={props.clientContract.address}
+              tokenDecimals={tokenDecimals}
+              tokenName={contractMetadata.name}
+              tokenSymbol={contractMetadata.symbol}
             />
-            <div className="sm:w-[420px] z-10">
-              <BuyEmbed
-                chainMetadata={props.chainMetadata}
-                claimConditionMeta={claimConditionMeta}
-                clientContract={props.clientContract}
-                tokenAddress={props.clientContract.address}
-                tokenDecimals={tokenDecimals}
-                tokenName={contractMetadata.name}
-                tokenSymbol={contractMetadata.symbol}
-              />
-            </div>
-          </div>{" "}
+          </GridPatternEmbedContainer>
         </div>
       )}
 
@@ -185,10 +171,12 @@ function BuyEmbed(props: {
 }) {
   if (!props.claimConditionMeta) {
     return (
-      <BuyTokenEmbed
+      <BuyAndSwapEmbed
         chain={props.clientContract.chain}
         client={props.clientContract.client}
         tokenAddress={props.clientContract.address}
+        buyAmount={undefined}
+        pageType="asset"
       />
     );
   }
diff --git a/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx b/apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
@@ -1,10 +1,8 @@
 "use client";
 
-import { useTheme } from "next-themes";
-import type { Address } from "thirdweb";
-import { BuyWidget, type TokenInfo } from "thirdweb/react";
+import type { TokenInfo } from "thirdweb/react";
+import { BuyAndSwapEmbed } from "@/components/blocks/BuyAndSwapEmbed";
 import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
-import { getSDKTheme } from "@/utils/sdk-component-theme";
 import { bridgeAppThirdwebClient } from "../../constants";
 
 export function UniversalBridgeEmbed({
@@ -16,16 +14,17 @@ export function UniversalBridgeEmbed({
   token: TokenInfo | undefined;
   amount?: string;
 }) {
-  const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
-    <BuyWidget
-      client={bridgeAppThirdwebClient}
-      amount={amount || "0"}
-      chain={chain}
-      tokenAddress={token?.address as Address | undefined}
-      theme={getSDKTheme(theme === "light" ? "light" : "dark")}
-    />
+    <div className="lg:w-[400px]">
+      <BuyAndSwapEmbed
+        client={bridgeAppThirdwebClient}
+        chain={chain}
+        buyAmount={amount}
+        tokenAddress={token?.address}
+        pageType="bridge"
+      />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
@@ -49,7 +49,7 @@ export default async function BridgePage({
   }
 
   return (
-    <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
+    <div className="relative mx-auto flex h-dvh w-full flex-col items-center justify-center overflow-hidden border py-10">
       <main className="container z-10 flex justify-center">
         <UniversalBridgeEmbed
           amount={amount as string}
@@ -69,7 +69,7 @@ export default async function BridgePage({
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
         alt=""
-        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0"
+        className="-bottom-12 -right-12 pointer-events-none absolute lg:right-0 lg:bottom-0 opacity-20"
         src="/assets/login/background.svg"
       />
 
@@ -79,17 +79,17 @@ export default async function BridgePage({
             <div className="absolute inset-0 bg-gradient-to-br from-green-500/5 to-transparent" />
             <div className="relative flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
               <div className="flex flex-col gap-1">
-                <h3 className="font-medium text-lg">
-                  Get Started with thirdweb Payments
+                <h3 className="font-semibold text-base tracking-tight">
+                  Get Started with thirdweb Bridge
                 </h3>
                 <p className="text-muted-foreground text-sm">
-                  Simple, instant, and secure payments across any token and
-                  chain.
+                  thirdweb Bridge allows developers to easily bridge and swap
+                  tokens between chains and wallets.
                 </p>
               </div>
               <a
                 className="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 font-medium text-sm text-white transition-all hover:bg-green-600/90 hover:shadow-sm"
-                href="https://portal.thirdweb.com/payments"
+                href="https://portal.thirdweb.com/bridge"
                 rel="noopener noreferrer"
                 target="_blank"
               >
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx b/packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
@@ -360,7 +360,7 @@ export function FundWallet({
       {showThirdwebBranding ? (
         <div>
           <Spacer y="md" />
-          <PoweredByThirdweb />
+          <PoweredByThirdweb link="https://playground.thirdweb.com/payments/fund-wallet" />
         </div>
       ) : null}
       <Spacer y="md" />
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -398,7 +398,7 @@ export function SwapUI(props: SwapUIProps) {
       {props.showThirdwebBranding ? (
         <div>
           <Spacer y="md" />
-          <PoweredByThirdweb />
+          <PoweredByThirdweb link="https://thirdweb.com/monetize/bridge" />
         </div>
       ) : null}
     </Container>
