[TOOL-4898] Dashboard: Replace PayEmbed with BuyWidget in asset page, add tracking

Author: MananTank

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}`}
     />
   );
 }

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: {

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

@@ -141,8 +141,6 @@ function BuyEmbed(props: {
         chain={props.clientContract.chain}
         client={props.clientContract.client}
         tokenAddress={props.clientContract.address}
-        tokenName={props.tokenName}
-        tokenSymbol={props.tokenSymbol}
       />
     );
   }