diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
index b847063b594..a1b404ad1b7 100644
--- a/apps/dashboard/src/@/analytics/report.ts
+++ b/apps/dashboard/src/@/analytics/report.ts
@@ -547,3 +547,27 @@ export function reportChainInfraRpcOmissionAgreed(properties: {
}) {
posthog.capture("chain infra checkout rpc omission agreed", properties);
}
+
+// ----------------------------
+// FEEDBACK
+// ----------------------------
+
+/**
+ * ### Why do we need to report this event?
+ * - To track user feedback and sentiment about the product
+ * - To identify common issues or feature requests
+ * - To measure user satisfaction and engagement
+ * - To prioritize product improvements based on user input
+ *
+ * ### Who is responsible for this event?
+ * @gisellechacon
+ */
+export function reportProductFeedback(properties: {
+ feedback: string;
+ source: "desktop" | "mobile";
+}) {
+ posthog.capture("product feedback submitted", {
+ feedback: properties.feedback,
+ source: properties.source,
+ });
+}
diff --git a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx
index bb74c1224f2..c8828651399 100644
--- a/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx
+++ b/apps/dashboard/src/app/(app)/components/Header/SecondaryNav/SecondaryNav.tsx
@@ -1,7 +1,13 @@
+"use client";
+
import Link from "next/link";
import type React from "react";
+import { useState } from "react";
+import { toast } from "sonner";
import type { ThirdwebClient } from "thirdweb";
+import { reportProductFeedback } from "@/analytics/report";
import { NotificationsButton } from "@/components/notifications/notification-button";
+import { NavLink } from "@/components/ui/NavLink";
import type { Account } from "@/hooks/useApi";
import { AccountButton } from "./account-button.client";
import { ResourcesDropdownButton } from "./ResourcesDropdownButton";
@@ -31,6 +37,32 @@ export function SecondaryNav(props: {
}
export function SecondaryNavLinks() {
+ const [showFeedbackDropdown, setShowFeedbackDropdown] = useState(false);
+ const [modalFeedback, setModalFeedback] = useState("");
+
+ const handleModalSubmit = (e?: React.FormEvent) => {
+ e?.preventDefault();
+
+ // Report feedback to PostHog
+ reportProductFeedback({
+ feedback: modalFeedback,
+ source: "desktop",
+ });
+
+ // Show success notification
+ toast.success("Feedback submitted successfully!", {
+ description: "Thank you for your feedback. We'll review it shortly.",
+ });
+
+ setModalFeedback("");
+ setShowFeedbackDropdown(false);
+ };
+
+ const handleModalCancel = () => {
+ setModalFeedback("");
+ setShowFeedbackDropdown(false);
+ };
+
return (
@@ -44,14 +76,77 @@ export function SecondaryNavLinks() {
Docs
-
- Feedback
-
+
+
+
+ {showFeedbackDropdown && (
+
+
+ Share your feedback with us:
+
+
+
+ )}
+
);
}
diff --git a/apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx b/apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx
index afbc19209b6..5b00a5dd7d0 100644
--- a/apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx
+++ b/apps/dashboard/src/app/(app)/components/MobileBurgerMenuButton.tsx
@@ -1,6 +1,8 @@
"use client";
import {
+ ChevronDownIcon,
+ ChevronUpIcon,
LogOutIcon,
MenuIcon,
MoonIcon,
@@ -12,8 +14,11 @@ import {
import Link from "next/link";
import { useTheme } from "next-themes";
import { useLayoutEffect, useState } from "react";
+import { toast } from "sonner";
import type { ThirdwebClient } from "thirdweb";
+import { reportProductFeedback } from "@/analytics/report";
import { Button } from "@/components/ui/button";
+import { NavLink } from "@/components/ui/NavLink";
import { Separator } from "@/components/ui/separator";
import { SkeletonContainer } from "@/components/ui/skeleton";
import { useEns } from "@/hooks/contract-hooks";
@@ -36,6 +41,8 @@ export function MobileBurgerMenuButton(
},
) {
const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [showFeedbackSection, setShowFeedbackSection] = useState(false);
+ const [modalFeedback, setModalFeedback] = useState("");
const { setTheme, theme } = useTheme();
const ensQuery = useEns({
addressOrEnsName:
@@ -44,6 +51,29 @@ export function MobileBurgerMenuButton(
});
// const [isCMDSearchModalOpen, setIsCMDSearchModalOpen] = useState(false);
+ const handleModalSubmit = (e?: React.FormEvent) => {
+ e?.preventDefault();
+
+ // Report feedback to PostHog
+ reportProductFeedback({
+ feedback: modalFeedback,
+ source: "mobile",
+ });
+
+ // Show success notification
+ toast.success("Feedback submitted successfully!", {
+ description: "Thank you for your feedback. We'll review it shortly.",
+ });
+
+ setModalFeedback("");
+ setShowFeedbackSection(false);
+ };
+
+ const handleModalCancel = () => {
+ setModalFeedback("");
+ setShowFeedbackSection(false);
+ };
+
useLayoutEffect(() => {
if (isMenuOpen) {
document.body.style.overflow = "hidden";
@@ -71,7 +101,7 @@ export function MobileBurgerMenuButton(
{isMenuOpen && (
-
+