From 33fc3e5226091ee0adbb00fe8bf44158e5238863 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Wed, 24 Sep 2025 19:29:54 +0000
Subject: [PATCH] [MNY-196] SDK: Add SwapWidget render event (#8113)
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 introduces a new query using `useQuery` from `@tanstack/react-query` in the `SwapWidget` component to track the rendering event of the swap widget.

### Detailed summary
- Added `useQuery` to the `SwapWidget` component.
- Implemented a query function that calls `trackPayEvent` to log the rendering of the swap widget.
- The tracking event includes the `client` from `props` and an event identifier `"ub:ui:swap_widget:render"`.

> ✨ 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

* **Chores**
  * Added background telemetry for the Swap Widget to record render events for analytics. It runs automatically when the widget is displayed, requires no configuration, and does not change the UI or user experience. This helps track usage and adoption to inform future improvements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../react/web/ui/Bridge/swap-widget/SwapWidget.tsx  | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
index 226b83a339a..b585e34a1a7 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useState } from "react";
+import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { Buy, Sell } from "../../../../../bridge/index.js";
 import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
@@ -241,6 +243,17 @@ export type SwapWidgetProps = {
  * @bridge
  */
 export function SwapWidget(props: SwapWidgetProps) {
+  useQuery({
+    queryFn: () => {
+      trackPayEvent({
+        client: props.client,
+        event: "ub:ui:swap_widget:render",
+      });
+      return true;
+    },
+    queryKey: ["swap_widget:render"],
+  });
+
   return (
     <SwapWidgetContainer
       theme={props.theme}