From c3dbeefbb514fcf2fccc3de0651ee56147247cc0 Mon Sep 17 00:00:00 2001
From: im-adithya <imadithyavardhan@gmail.com>
Date: Wed, 6 May 2026 12:32:45 +0530
Subject: [PATCH] fix: replace highlighted dropdown links with menu actions

---
 frontend/src/components/WalletActionsMenu.tsx | 40 ++++++++-----------
 frontend/src/screens/apps/AppDetails.tsx      | 18 ++++-----
 2 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/WalletActionsMenu.tsx b/frontend/src/components/WalletActionsMenu.tsx
index a7e264e3..305268ea 100644
--- a/frontend/src/components/WalletActionsMenu.tsx
+++ b/frontend/src/components/WalletActionsMenu.tsx
@@ -5,8 +5,7 @@ import {
   DownloadIcon,
   EllipsisVerticalIcon,
 } from "lucide-react";
-import { Link } from "react-router";
-import ExternalLink from "src/components/ExternalLink";
+import { useNavigate } from "react-router";
 import { Button } from "src/components/ui/button";
 import {
   DropdownMenu,
@@ -16,6 +15,7 @@ import {
   DropdownMenuTrigger,
 } from "src/components/ui/dropdown-menu";
 import { ProDropdownMenuItem } from "src/components/UpgradeDialog";
+import { openLink } from "src/utils/openLink";
 import { handleExportTransactions } from "./transactions-utils";
 
 export function WalletActionsMenu({
@@ -23,6 +23,8 @@ export function WalletActionsMenu({
 }: {
   hasChannelManagement: boolean;
 }) {
+  const navigate = useNavigate();
+
   return (
     <DropdownMenu>
       <Button asChild size="icon" variant="ghost">
@@ -33,30 +35,22 @@ export function WalletActionsMenu({
       <DropdownMenuContent align="end">
         <div className="sm:hidden">
           {hasChannelManagement && (
-            <DropdownMenuItem asChild>
-              <Link to="/wallet/swap" className="w-full cursor-pointer">
-                <ArrowDownUpIcon className="h-4 w-4" />
-                Swap
-              </Link>
+            <DropdownMenuItem onClick={() => navigate("/wallet/swap")}>
+              <ArrowDownUpIcon className="h-4 w-4" />
+              Swap
             </DropdownMenuItem>
           )}
-          <DropdownMenuItem asChild>
-            <Link
-              to="/internal-apps/zapplanner"
-              className="w-full cursor-pointer"
-            >
-              <CalendarSyncIcon className="h-4 w-4" />
-              Recurring
-            </Link>
+          <DropdownMenuItem
+            onClick={() => navigate("/internal-apps/zapplanner")}
+          >
+            <CalendarSyncIcon className="h-4 w-4" />
+            Recurring
           </DropdownMenuItem>
-          <DropdownMenuItem asChild>
-            <ExternalLink
-              to="https://www.getalby.com/topup"
-              className="w-full cursor-pointer"
-            >
-              <CreditCardIcon className="h-4 w-4" />
-              Buy
-            </ExternalLink>
+          <DropdownMenuItem
+            onClick={() => openLink("https://www.getalby.com/topup")}
+          >
+            <CreditCardIcon className="h-4 w-4" />
+            Buy
           </DropdownMenuItem>
           <DropdownMenuSeparator />
         </div>
diff --git a/frontend/src/screens/apps/AppDetails.tsx b/frontend/src/screens/apps/AppDetails.tsx
index 22ebad81..21137bb8 100644
--- a/frontend/src/screens/apps/AppDetails.tsx
+++ b/frontend/src/screens/apps/AppDetails.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useLocation, useParams } from "react-router";
+import { Link, useLocation, useNavigate, useParams } from "react-router";
 
 import {
   App,
@@ -99,6 +99,7 @@ type AppInternalProps = {
 
 function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
   const location = useLocation();
+  const navigate = useNavigate();
   const [isEditingPermissions, setIsEditingPermissions] = React.useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
   const [showConnectionDetails, setShowConnectionDetails] =
@@ -272,14 +273,13 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
                           )}
                         <DropdownMenuGroup>
                           {appStoreApp && (
-                            <DropdownMenuItem asChild>
-                              <Link
-                                to={`/apps/new?app=${appStoreApp.id}`}
-                                className="flex flex-1 items-center gap-2"
-                              >
-                                <PlusIcon className="size-4" /> Add Another
-                                Connection
-                              </Link>
+                            <DropdownMenuItem
+                              onClick={() =>
+                                navigate(`/apps/new?app=${appStoreApp.id}`)
+                              }
+                            >
+                              <PlusIcon className="size-4" /> Add Another
+                              Connection
                             </DropdownMenuItem>
                           )}
                           <DropdownMenuItem asChild>