From 342de4007a63f5e452caa0924a65d98f962d014d Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Wed, 16 Sep 2026 13:02:21 +0700
Subject: [PATCH 1/2] feat: instrument the delegation funnel with Vercel Web
 Analytics

Adds custom events for the delegation funnel (nav click, page views,
wallet connect, form start, transaction submit/confirm/fail) per the
instrumentation plan in #722, so delegator UX changes can be measured
against a baseline instead of guessed at.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 components/DelegatingWidget/Delegate.tsx   |   1 +
 components/DelegatingWidget/index.tsx      |  18 ++-
 components/Drawer/index.tsx                |   1 +
 hooks/useExplorerStore.tsx                 |   1 +
 hooks/useHandleTransaction.tsx             |   4 +
 layouts/main.tsx                           |  21 +++
 lib/analytics.ts                           | 148 +++++++++++++++++++++
 package.json                               |   1 +
 pages/_app.tsx                             |   4 +
 pages/accounts/[account]/delegating.tsx    |  21 +++
 pages/accounts/[account]/orchestrating.tsx |  15 +++
 pages/orchestrators.tsx                    |   7 +
 pnpm-lock.yaml                             |  45 ++++++-
 13 files changed, 282 insertions(+), 5 deletions(-)
 create mode 100644 lib/analytics.ts

diff --git a/components/DelegatingWidget/Delegate.tsx b/components/DelegatingWidget/Delegate.tsx
index 272f3b44..536d22ee 100644
--- a/components/DelegatingWidget/Delegate.tsx
+++ b/components/DelegatingWidget/Delegate.tsx
@@ -127,6 +127,7 @@ const Delegate = ({
   const bondWithHintArgs = {
     amount: amount?.toString() ? parseEther(amount) : BigInt(0),
     to,
+    isTransferStake,
     oldDelegateNewPosPrev,
     oldDelegateNewPosNext,
     currDelegateNewPosPrev,
diff --git a/components/DelegatingWidget/index.tsx b/components/DelegatingWidget/index.tsx
index a2988ed9..02896afc 100644
--- a/components/DelegatingWidget/index.tsx
+++ b/components/DelegatingWidget/index.tsx
@@ -1,3 +1,4 @@
+import { trackVercelAnalyticsEvent } from "@lib/analytics";
 import { EnsIdentity } from "@lib/api/types/get-ens";
 import { Box, Card, Flex, Text } from "@livepeer/design-system";
 import { formatLPT } from "@utils/numberFormatters";
@@ -9,7 +10,7 @@ import {
   useIsWrongRouteChain,
   usePendingFeesAndStakeData,
 } from "hooks";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import ArrowDown from "../../public/img/arrow-down.svg";
 import Footer from "./Footer";
@@ -72,6 +73,21 @@ const Index = ({
     fromWei(pendingFeesAndStake?.pendingStake ?? "0")
   );
 
+  // Fire once, the first time the form goes from clean to dirty - not again
+  // on every subsequent clear/refill of the amount. Covers both typed
+  // amounts and the "max" shortcut.
+  const hasTrackedFormStart = useRef(false);
+  useEffect(() => {
+    if (
+      !hasTrackedFormStart.current &&
+      selectedStakingAction === "delegate" &&
+      parseFloat(amount) > 0
+    ) {
+      hasTrackedFormStart.current = true;
+      trackVercelAnalyticsEvent("delegation_form_started");
+    }
+  }, [amount, selectedStakingAction]);
+
   return (
     <Box
       css={{
diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
index 3c5bc21f..053ac18e 100644
--- a/components/Drawer/index.tsx
+++ b/components/Drawer/index.tsx
@@ -93,6 +93,7 @@ const Index = ({
               href={item.href}
               passHref
               variant="subtle"
+              onClick={item.onClick}
               css={{
                 color:
                   asPath.split("?")[0] === item.as
diff --git a/hooks/useExplorerStore.tsx b/hooks/useExplorerStore.tsx
index 2d36084a..09bd354a 100644
--- a/hooks/useExplorerStore.tsx
+++ b/hooks/useExplorerStore.tsx
@@ -35,6 +35,7 @@ export type InputData = {
   delegate?: Address;
   fees?: bigint;
   isOrchestrator?: boolean;
+  isTransferStake?: boolean;
   newDelegate?: Address;
   newPosNext?: string;
   newPosPrev?: string;
diff --git a/hooks/useHandleTransaction.tsx b/hooks/useHandleTransaction.tsx
index ef28206e..b883ae59 100644
--- a/hooks/useHandleTransaction.tsx
+++ b/hooks/useHandleTransaction.tsx
@@ -1,3 +1,4 @@
+import { trackTransactionEvent } from "@lib/analytics";
 import { useAddRecentTransaction } from "@rainbow-me/rainbowkit";
 import { capitalCase } from "change-case";
 import { useEffect } from "react";
@@ -45,6 +46,7 @@ export const useHandleTransaction = (
   useEffect(() => {
     if (data) {
       setLatestTransactionDetails(data, id, args);
+      trackTransactionEvent(id, "submitted", args);
 
       if (onSuccess) {
         onSuccess(data);
@@ -56,6 +58,7 @@ export const useHandleTransaction = (
   useEffect(() => {
     if (isSuccess) {
       setLatestTransactionConfirmed();
+      trackTransactionEvent(id, "confirmed", args);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSuccess]);
@@ -64,6 +67,7 @@ export const useHandleTransaction = (
     if (error) {
       console.error(error);
       setLatestTransactionError(error.message.replace("GraphQL error: ", ""));
+      trackTransactionEvent(id, "failed", args, error);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error]);
diff --git a/layouts/main.tsx b/layouts/main.tsx
index 2e404ad4..7b4ad726 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -10,6 +10,10 @@ import { SnackbarProvider } from "@components/Snackbar";
 import TxStartedDialog from "@components/TxStartedDialog";
 import TxSummaryDialog from "@components/TxSummaryDialog";
 import URLVerificationBanner from "@components/URLVerificationBanner";
+import {
+  trackVercelAnalyticsEvent,
+  trackWalletConnected,
+} from "@lib/analytics";
 import { IS_L2 } from "@lib/chains";
 import { globalStyles } from "@lib/globalStyles";
 import {
@@ -63,6 +67,7 @@ import { FiInfo } from "react-icons/fi";
 import { LuRadioTower } from "react-icons/lu";
 import { useWindowSize } from "react-use";
 import { Chain } from "viem";
+import { useAccountEffect } from "wagmi";
 
 import {
   useAccountAddress,
@@ -107,6 +112,7 @@ export type DrawerItem = {
   as: string;
   icon: React.ElementType;
   className?: string;
+  onClick?: () => void;
 };
 
 const DesignSystemProviderTyped = DesignSystemProvider as React.FC<{
@@ -265,6 +271,15 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
     ReactGA.pageview(window.location.pathname + window.location.search);
   }, []);
 
+  useAccountEffect({
+    onConnect: ({ isReconnected }) => {
+      // Reconnects restore a previous session, so they don't count.
+      if (!isReconnected) {
+        trackWalletConnected(asPath);
+      }
+    },
+  });
+
   const items: DrawerItem[] = [
     {
       name: "Overview",
@@ -279,6 +294,7 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
       as: "/orchestrators",
       icon: DNS,
       className: "orchestrators",
+      onClick: () => trackVercelAnalyticsEvent("orchestrators_nav_clicked"),
     },
     {
       name: "Gateways",
@@ -548,6 +564,11 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                           <Link passHref href="/orchestrators">
                             <Button
                               size="3"
+                              onClick={() =>
+                                trackVercelAnalyticsEvent(
+                                  "orchestrators_nav_clicked"
+                                )
+                              }
                               css={{
                                 marginLeft: "$1",
                                 backgroundColor: isOrchestratorsNavActive
diff --git a/lib/analytics.ts b/lib/analytics.ts
new file mode 100644
index 00000000..4e5c4a27
--- /dev/null
+++ b/lib/analytics.ts
@@ -0,0 +1,148 @@
+import { type BeforeSend, track } from "@vercel/analytics";
+import type { InputData, TransactionIdentifier } from "hooks/useExplorerStore";
+import { type BaseError, type RpcError, UserRejectedRequestError } from "viem";
+
+/**
+ * Replaces wallet addresses in tracked URLs (e.g. `/accounts/0x…`), so
+ * pageviews and events can't be tied to a visitor's wallet.
+ */
+export const redactAddresses: BeforeSend = (event) => ({
+  ...event,
+  url: event.url.replace(/0x[0-9a-fA-F]{40}/g, "[address]"),
+});
+
+export type DelegationFunnelEvent =
+  | "orchestrators_nav_clicked"
+  | "orchestrators_page_viewed"
+  | "orchestrator_detail_viewed"
+  | "wallet_connected"
+  | "delegation_form_started"
+  | "delegation_transaction_submitted"
+  | "delegation_transaction_confirmed"
+  | "delegation_transaction_failed"
+  | "account_delegating_tab_viewed"
+  | "redelegation_started"
+  | "unbonding_or_exit_started";
+
+export const trackVercelAnalyticsEvent = (
+  event: DelegationFunnelEvent,
+  properties?: Parameters<typeof track>[1]
+) => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  track(event, properties);
+};
+
+const NON_DELEGATION_PATHS = ["/migrate", "/voting", "/treasury"];
+
+/** Coarse entry point a wallet was connected from; never identifying. */
+const getWalletConnectSurface = (path: string) => {
+  if (path === "/") {
+    return "home";
+  }
+  if (path.startsWith("/orchestrators")) {
+    return "orchestrators_list";
+  }
+  if (path.startsWith("/accounts/")) {
+    return path.includes("/orchestrating") ? "orchestrator_detail" : "account";
+  }
+  return "other";
+};
+
+/**
+ * Tracks a wallet connect as delegation intent, tagged with the page it was
+ * made from. Migration and governance need a wallet for their own reasons,
+ * so connects there aren't tracked at all.
+ */
+export const trackWalletConnected = (asPath: string) => {
+  const path = asPath.split("?")[0];
+
+  if (
+    NON_DELEGATION_PATHS.some((nonDelegation) => path.startsWith(nonDelegation))
+  ) {
+    return;
+  }
+
+  trackVercelAnalyticsEvent("wallet_connected", {
+    surface: getWalletConnectSurface(path),
+  });
+};
+
+const trackedOnce = new Set<string>();
+
+/**
+ * Tracks `event` at most once per page session for `key`, e.g. once per
+ * orchestrator no matter how often its pages are revisited.
+ */
+export const trackVercelAnalyticsEventOnce = (
+  event: DelegationFunnelEvent,
+  key: string
+) => {
+  const id = `${event}:${key.toLowerCase()}`;
+
+  if (!trackedOnce.has(id)) {
+    trackedOnce.add(id);
+    trackVercelAnalyticsEvent(event);
+  }
+};
+
+type TransactionEvents = Partial<
+  Record<TransactionStage, DelegationFunnelEvent>
+>;
+
+const REDELEGATION_EVENTS: TransactionEvents = {
+  submitted: "redelegation_started",
+};
+
+const DELEGATION_EVENTS: Partial<
+  Record<TransactionIdentifier, TransactionEvents>
+> = {
+  bond: {
+    submitted: "delegation_transaction_submitted",
+    confirmed: "delegation_transaction_confirmed",
+    failed: "delegation_transaction_failed",
+  },
+  unbond: { submitted: "unbonding_or_exit_started" },
+  rebond: REDELEGATION_EVENTS,
+  rebondFromUnbonded: REDELEGATION_EVENTS,
+};
+
+type TransactionStage = "submitted" | "confirmed" | "failed";
+
+/**
+ * Whether the user rejected the request in their wallet. viem nests the
+ * wallet's error in `cause`; matched on its code rather than `instanceof`
+ * because several viem copies are installed.
+ */
+const isUserRejection = (error?: Error) =>
+  Boolean(
+    (error as BaseError | undefined)?.walk?.(
+      (e) => (e as RpcError).code === UserRejectedRequestError.code
+    )
+  );
+
+/**
+ * Tracks the funnel event, if any, for a contract interaction reaching
+ * `stage`. "Move Delegated Stake" is a `bond` but counts as a redelegation.
+ * A rejected signature isn't a failed transaction: nothing was submitted.
+ */
+export const trackTransactionEvent = (
+  id: TransactionIdentifier,
+  stage: TransactionStage,
+  args: InputData,
+  error?: Error
+) => {
+  if (stage === "failed" && isUserRejection(error)) {
+    return;
+  }
+
+  const isRedelegation = id === "bond" && args.isTransferStake;
+  const events = isRedelegation ? REDELEGATION_EVENTS : DELEGATION_EVENTS[id];
+  const eventName = events?.[stage];
+
+  if (eventName) {
+    trackVercelAnalyticsEvent(eventName);
+  }
+};
diff --git a/package.json b/package.json
index e7b3e733..55c5fae3 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@rainbow-me/rainbowkit": "^2.2.11",
     "@reach/tabs": "^0.17.0",
     "@tanstack/react-query": "^5.102.8",
+    "@vercel/analytics": "^2.0.1",
     "change-case": "^4.1.2",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.23",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f3d36faf..a1741ce1 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,8 +2,10 @@ import "@rainbow-me/rainbowkit/styles.css";
 import "../styles/globals.css";
 
 import { ApolloProvider } from "@apollo/client";
+import { redactAddresses } from "@lib/analytics";
 import { fetcher } from "@lib/fetcher";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Analytics } from "@vercel/analytics/react";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import { useRouter } from "next/router";
@@ -37,6 +39,8 @@ function App({ Component, pageProps, fallback = null }) {
         <title>Livepeer Explorer</title>
       </Head>
 
+      <Analytics beforeSend={redactAddresses} />
+
       <ApolloProvider client={client}>
         <Tooltip.Provider>
           <QueryClientProvider client={queryClient}>
diff --git a/pages/accounts/[account]/delegating.tsx b/pages/accounts/[account]/delegating.tsx
index 612b0441..ea7dcb04 100644
--- a/pages/accounts/[account]/delegating.tsx
+++ b/pages/accounts/[account]/delegating.tsx
@@ -1,6 +1,7 @@
 import ErrorComponent from "@components/Error";
 import AccountLayout from "@layouts/account";
 import { getLayout } from "@layouts/main";
+import { trackVercelAnalyticsEventOnce } from "@lib/analytics";
 import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
 import { EnsIdentity } from "@lib/api/types/get-ens";
 import {
@@ -8,6 +9,9 @@ import {
   getApollo,
   OrchestratorsSortedQueryResult,
 } from "apollo";
+import { useAccountAddress } from "hooks";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { isAddress } from "viem";
 
 type PageProps = {
@@ -18,6 +22,23 @@ type PageProps = {
 };
 
 const Delegating = ({ hadError, account, sortedOrchestrators }: PageProps) => {
+  const { query } = useRouter();
+  const accountAddress = useAccountAddress();
+  const viewedAccount = String(query.account);
+  const isMyAccount =
+    !!accountAddress &&
+    accountAddress.toLowerCase() === viewedAccount.toLowerCase();
+
+  // Re-runs when the wallet reconnects after the page has mounted.
+  useEffect(() => {
+    if (!hadError && isMyAccount) {
+      trackVercelAnalyticsEventOnce(
+        "account_delegating_tab_viewed",
+        viewedAccount
+      );
+    }
+  }, [hadError, isMyAccount, viewedAccount]);
+
   if (hadError) {
     return <ErrorComponent statusCode={500} />;
   }
diff --git a/pages/accounts/[account]/orchestrating.tsx b/pages/accounts/[account]/orchestrating.tsx
index 6ca44f89..d4834f96 100644
--- a/pages/accounts/[account]/orchestrating.tsx
+++ b/pages/accounts/[account]/orchestrating.tsx
@@ -1,6 +1,7 @@
 import ErrorComponent from "@components/Error";
 import AccountLayout from "@layouts/account";
 import { getLayout } from "@layouts/main";
+import { trackVercelAnalyticsEventOnce } from "@lib/analytics";
 import { getAccount, getSortedOrchestrators } from "@lib/api/ssr";
 import { EnsIdentity } from "@lib/api/types/get-ens";
 import {
@@ -8,6 +9,8 @@ import {
   getApollo,
   OrchestratorsSortedQueryResult,
 } from "apollo";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 import { isAddress } from "viem";
 
 type PageProps = {
@@ -22,6 +25,18 @@ const Orchestrating = ({
   account,
   sortedOrchestrators,
 }: PageProps) => {
+  const { query } = useRouter();
+  const viewedAccount = String(query.account);
+
+  useEffect(() => {
+    if (!hadError) {
+      trackVercelAnalyticsEventOnce(
+        "orchestrator_detail_viewed",
+        viewedAccount
+      );
+    }
+  }, [hadError, viewedAccount]);
+
   if (hadError) {
     return <ErrorComponent statusCode={500} />;
   }
diff --git a/pages/orchestrators.tsx b/pages/orchestrators.tsx
index 7e76aded..da009bfd 100644
--- a/pages/orchestrators.tsx
+++ b/pages/orchestrators.tsx
@@ -2,6 +2,7 @@ import ErrorComponent from "@components/Error";
 import OrchestratorList from "@components/OrchestratorList";
 import { LAYOUT_MAX_WIDTH } from "@layouts/constants";
 import { getLayout } from "@layouts/main";
+import { trackVercelAnalyticsEvent } from "@lib/analytics";
 import { getOrchestrators, getProtocol } from "@lib/api/ssr";
 import { EnsIdentity } from "@lib/api/types/get-ens";
 import {
@@ -43,6 +44,12 @@ const OrchestratorsPage = ({
     return () => cancelAnimationFrame(id);
   }, []);
 
+  useEffect(() => {
+    if (!hadError) {
+      trackVercelAnalyticsEvent("orchestrators_page_viewed");
+    }
+  }, [hadError]);
+
   if (hadError) {
     return <ErrorComponent statusCode={500} />;
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 47023c3f..413532dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,9 @@ importers:
       '@tanstack/react-query':
         specifier: ^5.102.8
         version: 5.102.8(react@19.2.1)
+      '@vercel/analytics':
+        specifier: ^2.0.1
+        version: 2.0.1(next@16.3.4(@babel/core@7.29.7)(@types/node@24.13.3)(babel-plugin-macros@3.1.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)
       change-case:
         specifier: ^4.1.2
         version: 4.1.2
@@ -4443,6 +4446,35 @@ packages:
     peerDependencies:
       '@vanilla-extract/css': ^1.0.0
 
+  '@vercel/analytics@2.0.1':
+    resolution: {integrity: sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==}
+    peerDependencies:
+      '@remix-run/react': ^2
+      '@sveltejs/kit': ^1 || ^2
+      next: '>= 13'
+      nuxt: '>= 3'
+      react: ^18 || ^19 || ^19.0.0-rc
+      svelte: '>= 4'
+      vue: ^3
+      vue-router: ^4
+    peerDependenciesMeta:
+      '@remix-run/react':
+        optional: true
+      '@sveltejs/kit':
+        optional: true
+      next:
+        optional: true
+      nuxt:
+        optional: true
+      react:
+        optional: true
+      svelte:
+        optional: true
+      vue:
+        optional: true
+      vue-router:
+        optional: true
+
   '@wagmi/connectors@6.2.0':
     resolution: {integrity: sha512-2NfkbqhNWdjfibb4abRMrn7u6rPjEGolMfApXss6HCDVt9AW2oVC6k8Q5FouzpJezElxLJSagWz9FW1zaRlanA==}
     peerDependencies:
@@ -9015,8 +9047,8 @@ packages:
   third-party-web@0.26.7:
     resolution: {integrity: sha512-buUzX4sXC4efFX6xg2bw6/eZsCUh8qQwSavC4D9HpONMFlRbcHhD8Je5qwYdCpViR6q0qla2wPP+t91a2vgolg==}
 
-  third-party-web@0.29.2:
-    resolution: {integrity: sha512-fegtha91tq2DHphyoiBXVHjVi2YG9zFaRnboT9C28tO1en9Y3wJsfspuy40F+u5wl3hHVbw7cnd1b67kEGHb8g==}
+  third-party-web@0.30.0:
+    resolution: {integrity: sha512-p+PfyL5U0ediGzvwPzMSdD9MnC8rHW6nWJJVLIQvqN7RsSqfaZ+7n4c9GILqH36EYR0eXB9CzAeCRnKFr/9uJg==}
 
   thread-stream@0.15.2:
     resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
@@ -12635,7 +12667,7 @@ snapshots:
   '@paulirish/trace_engine@0.0.53':
     dependencies:
       legacy-javascript: 0.0.1
-      third-party-web: 0.29.2
+      third-party-web: 0.30.0
 
   '@paulmillr/qr@0.2.1': {}
 
@@ -15373,6 +15405,11 @@ snapshots:
     dependencies:
       '@vanilla-extract/css': 1.20.1(babel-plugin-macros@3.1.0)
 
+  '@vercel/analytics@2.0.1(next@16.3.4(@babel/core@7.29.7)(@types/node@24.13.3)(babel-plugin-macros@3.1.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1))(react@19.2.1)':
+    optionalDependencies:
+      next: 16.3.4(@babel/core@7.29.7)(@types/node@24.13.3)(babel-plugin-macros@3.1.0)(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+      react: 19.2.1
+
   '@wagmi/connectors@6.2.0(@tanstack/react-query@5.102.8(react@19.2.1))(@types/react@19.2.2)(@wagmi/core@2.22.1(@tanstack/query-core@5.102.8)(@types/react@19.2.2)(react@19.2.1)(typescript@5.9.2)(use-sync-external-store@1.4.0(react@19.2.1))(viem@2.56.3(bufferutil@4.1.0)(typescript@5.9.2)(utf-8-validate@5.0.10)(zod@4.5.4)))(bufferutil@4.1.0)(encoding@0.1.13)(react@19.2.1)(typescript@5.9.2)(use-sync-external-store@1.4.0(react@19.2.1))(utf-8-validate@5.0.10)(viem@2.56.3(bufferutil@4.1.0)(typescript@5.9.2)(utf-8-validate@5.0.10)(zod@4.5.4))(wagmi@2.19.5(@tanstack/query-core@5.102.8)(@tanstack/react-query@5.102.8(react@19.2.1))(@types/react@19.2.2)(bufferutil@4.1.0)(encoding@0.1.13)(react@19.2.1)(typescript@5.9.2)(utf-8-validate@5.0.10)(viem@2.56.3(bufferutil@4.1.0)(typescript@5.9.2)(utf-8-validate@5.0.10)(zod@4.5.4))(zod@4.5.4))(zod@4.5.4)':
     dependencies:
       '@base-org/account': 2.4.0(@types/react@19.2.2)(bufferutil@4.1.0)(react@19.2.1)(typescript@5.9.2)(use-sync-external-store@1.4.0(react@19.2.1))(utf-8-validate@5.0.10)(zod@4.5.4)
@@ -21609,7 +21646,7 @@ snapshots:
 
   third-party-web@0.26.7: {}
 
-  third-party-web@0.29.2: {}
+  third-party-web@0.30.0: {}
 
   thread-stream@0.15.2:
     dependencies:

From f91ccde0a76e3150c3a69eb63c55411859d735ac Mon Sep 17 00:00:00 2001
From: jipstavenuiter <jipstavenuiter@gmail.com>
Date: Mon, 21 Sep 2026 10:54:18 +0700
Subject: [PATCH 2/2] fix: track delegation transaction result from the receipt

delegation_transaction_confirmed fired as soon as the wallet returned a
hash, so a delegation that later reverted on chain still counted as
confirmed and the submitted -> confirmed rate always read ~100%. Await the
receipt instead, outside React so the result is still tracked when the
sending component unmounts.

Rejected signatures and failed sends no longer count as failures either,
since neither ever submits a transaction, which keeps failures within
submissions.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 hooks/useHandleTransaction.tsx |  8 ++---
 lib/analytics.ts               | 57 ++++++++++++++++------------------
 2 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/hooks/useHandleTransaction.tsx b/hooks/useHandleTransaction.tsx
index b883ae59..67a765ca 100644
--- a/hooks/useHandleTransaction.tsx
+++ b/hooks/useHandleTransaction.tsx
@@ -1,7 +1,8 @@
-import { trackTransactionEvent } from "@lib/analytics";
+import { trackTransaction } from "@lib/analytics";
 import { useAddRecentTransaction } from "@rainbow-me/rainbowkit";
 import { capitalCase } from "change-case";
 import { useEffect } from "react";
+import { useConfig } from "wagmi";
 
 import {
   InputData,
@@ -25,6 +26,7 @@ export const useHandleTransaction = (
     setLatestTransactionDetails,
   } = useExplorerStore();
   const addRecentTransaction = useAddRecentTransaction();
+  const config = useConfig();
 
   useEffect(() => {
     if (isLoading) {
@@ -46,7 +48,7 @@ export const useHandleTransaction = (
   useEffect(() => {
     if (data) {
       setLatestTransactionDetails(data, id, args);
-      trackTransactionEvent(id, "submitted", args);
+      trackTransaction(config, id, args, data);
 
       if (onSuccess) {
         onSuccess(data);
@@ -58,7 +60,6 @@ export const useHandleTransaction = (
   useEffect(() => {
     if (isSuccess) {
       setLatestTransactionConfirmed();
-      trackTransactionEvent(id, "confirmed", args);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSuccess]);
@@ -67,7 +68,6 @@ export const useHandleTransaction = (
     if (error) {
       console.error(error);
       setLatestTransactionError(error.message.replace("GraphQL error: ", ""));
-      trackTransactionEvent(id, "failed", args, error);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [error]);
diff --git a/lib/analytics.ts b/lib/analytics.ts
index 4e5c4a27..d0121a5c 100644
--- a/lib/analytics.ts
+++ b/lib/analytics.ts
@@ -1,6 +1,7 @@
 import { type BeforeSend, track } from "@vercel/analytics";
 import type { InputData, TransactionIdentifier } from "hooks/useExplorerStore";
-import { type BaseError, type RpcError, UserRejectedRequestError } from "viem";
+import type { Config } from "wagmi";
+import { waitForTransactionReceipt } from "wagmi/actions";
 
 /**
  * Replaces wallet addresses in tracked URLs (e.g. `/accounts/0x…`), so
@@ -88,9 +89,11 @@ export const trackVercelAnalyticsEventOnce = (
   }
 };
 
-type TransactionEvents = Partial<
-  Record<TransactionStage, DelegationFunnelEvent>
->;
+type TransactionEvents = {
+  submitted: DelegationFunnelEvent;
+  confirmed?: DelegationFunnelEvent;
+  failed?: DelegationFunnelEvent;
+};
 
 const REDELEGATION_EVENTS: TransactionEvents = {
   submitted: "redelegation_started",
@@ -109,40 +112,34 @@ const DELEGATION_EVENTS: Partial<
   rebondFromUnbonded: REDELEGATION_EVENTS,
 };
 
-type TransactionStage = "submitted" | "confirmed" | "failed";
-
-/**
- * Whether the user rejected the request in their wallet. viem nests the
- * wallet's error in `cause`; matched on its code rather than `instanceof`
- * because several viem copies are installed.
- */
-const isUserRejection = (error?: Error) =>
-  Boolean(
-    (error as BaseError | undefined)?.walk?.(
-      (e) => (e as RpcError).code === UserRejectedRequestError.code
-    )
-  );
-
 /**
- * Tracks the funnel event, if any, for a contract interaction reaching
- * `stage`. "Move Delegated Stake" is a `bond` but counts as a redelegation.
- * A rejected signature isn't a failed transaction: nothing was submitted.
+ * Tracks the funnel events for a submitted contract interaction: submitted
+ * right away, then confirmed or failed once it is mined. The receipt is
+ * awaited outside React, so the result is still tracked if the sending
+ * component unmounts, e.g. when the mobile delegate sheet is closed.
+ * "Move Delegated Stake" is a `bond` but counts as a redelegation.
  */
-export const trackTransactionEvent = (
+export const trackTransaction = (
+  config: Config,
   id: TransactionIdentifier,
-  stage: TransactionStage,
   args: InputData,
-  error?: Error
+  hash: `0x${string}`
 ) => {
-  if (stage === "failed" && isUserRejection(error)) {
+  const isRedelegation = id === "bond" && args.isTransferStake;
+  const events = isRedelegation ? REDELEGATION_EVENTS : DELEGATION_EVENTS[id];
+
+  if (!events) {
     return;
   }
 
-  const isRedelegation = id === "bond" && args.isTransferStake;
-  const events = isRedelegation ? REDELEGATION_EVENTS : DELEGATION_EVENTS[id];
-  const eventName = events?.[stage];
+  trackVercelAnalyticsEvent(events.submitted);
 
-  if (eventName) {
-    trackVercelAnalyticsEvent(eventName);
+  const { confirmed, failed } = events;
+  if (confirmed || failed) {
+    // Rejects when the transaction reverts on chain.
+    waitForTransactionReceipt(config, { hash }).then(
+      () => confirmed && trackVercelAnalyticsEvent(confirmed),
+      () => failed && trackVercelAnalyticsEvent(failed)
+    );
   }
 };