From e814248d9ceeeafc48ea4d9204a40df881958414 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 27 Jun 2025 16:43:21 +0000
Subject: [PATCH] [TOOL-4898] Dashboard: Replace PayEmbed with BuyWidget in
 asset page, add tracking (#7459)
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 focuses on updating the `PayEmbed` component to `BuyWidget` in the `BuyTokenEmbed` function, enhancing the functionality with error reporting and success tracking for asset purchases.

### Detailed summary
- Replaced `PayEmbed` with `BuyWidget` in `BuyTokenEmbed`.
- Added `amount`, `chain`, and `className` props to `BuyWidget`.
- Implemented `onError` and `onSuccess` callbacks for analytics reporting.
- Updated the token address prop to ensure correct type.
- Modified chart className in `contract-analytics.tsx`.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Updated the buy token section to use an improved widget with enhanced error and success handling, including dynamic titles and analytics reporting.

* **Style**
  * Adjusted the chart's aspect ratio for better display across different screen sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../erc20/_components/PayEmbedSection.tsx     | 50 ++++++++++---------
 .../contract-analytics/contract-analytics.tsx |  2 +-
 .../public-pages/erc20/erc20.tsx              |  2 -
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
index 98b5dc47fb3..b4156ca0430 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/PayEmbedSection.tsx
@@ -2,45 +2,47 @@
 
 import { useTheme } from "next-themes";
 import type { Chain, ThirdwebClient } from "thirdweb";
-import { PayEmbed } from "thirdweb/react";
-import { getSDKTheme } from "../../../../../../../../../@/utils/sdk-component-theme";
+import { BuyWidget } from "thirdweb/react";
+import {
+  reportAssetBuyFailed,
+  reportAssetBuySuccessful,
+} from "@/analytics/report";
+import { parseError } from "@/utils/errorParser";
+import { getSDKTheme } from "@/utils/sdk-component-theme";
 
 export function BuyTokenEmbed(props: {
   client: ThirdwebClient;
   chain: Chain;
-  tokenSymbol: string;
-  tokenName: string;
   tokenAddress: string;
 }) {
   const { theme } = useTheme();
   return (
-    <PayEmbed
+    <BuyWidget
+      amount="1"
+      chain={props.chain}
       className="!rounded-xl !w-full"
       client={props.client}
       connectOptions={{
         autoConnect: false,
       }}
-      payOptions={{
-        metadata: {
-          name: `Buy ${props.tokenSymbol}`,
-        },
-        mode: "fund_wallet",
-        prefillBuy: {
-          allowEdits: {
-            amount: true,
-            chain: false,
-            token: false,
-          },
-          amount: "1",
-          chain: props.chain,
-          token: {
-            address: props.tokenAddress,
-            name: props.tokenName,
-            symbol: props.tokenSymbol,
-          },
-        },
+      onError={(e) => {
+        const errorMessage = parseError(e);
+        reportAssetBuyFailed({
+          assetType: "coin",
+          chainId: props.chain.id,
+          contractType: "DropERC20",
+          error: errorMessage,
+        });
+      }}
+      onSuccess={() => {
+        reportAssetBuySuccessful({
+          assetType: "coin",
+          chainId: props.chain.id,
+          contractType: "DropERC20",
+        });
       }}
       theme={getSDKTheme(theme === "light" ? "light" : "dark")}
+      tokenAddress={props.tokenAddress as `0x${string}`}
     />
   );
 }
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
index 794413a155a..2720dcfd187 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/contract-analytics/contract-analytics.tsx
@@ -39,7 +39,7 @@ export function ContractAnalyticsOverview(props: {
       </div>
       <ThirdwebAreaChart
         cardContentClassName="p-0"
-        chartClassName="aspect-[1.5] lg:aspect-[3]"
+        chartClassName="aspect-[1.2] lg:aspect-[2.6]"
         className="border-none bg-background p-0"
         config={{
           events: {
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
index 74891718523..ddbc48b278e 100644
--- 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
@@ -152,8 +152,6 @@ function BuyEmbed(props: {
         chain={props.clientContract.chain}
         client={props.clientContract.client}
         tokenAddress={props.clientContract.address}
-        tokenName={props.tokenName}
-        tokenSymbol={props.tokenSymbol}
       />
     );
   }