fix identity waves link click

components/waves/drops/WaveCreatorPreviewItem.tsx

@@ -15,10 +15,14 @@ import WavesIcon from "@/components/common/icons/WavesIcon";
 
 interface WaveCreatorPreviewItemProps {
   readonly wave: ApiWave;
+  readonly onSelect?:
+    | ((wave: ApiWave, href: string, event: React.MouseEvent) => void)
+    | undefined;
 }
 
 export const WaveCreatorPreviewItem: React.FC<WaveCreatorPreviewItemProps> = ({
   wave,
+  onSelect,
 }) => {
   const isDirectMessage = wave.chat.scope.group?.is_direct_message ?? false;
   const waveHref = getWaveRoute({
@@ -35,6 +39,12 @@ export const WaveCreatorPreviewItem: React.FC<WaveCreatorPreviewItemProps> = ({
     <Link
       href={waveHref}
       prefetch={false}
+      onClick={(event) => {
+        if (!onSelect) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(wave, waveHref, event);
+      }}
       className="tw-group tw-flex tw-items-center tw-gap-3 tw-rounded-lg tw-border tw-border-iron-800/70 tw-bg-iron-950/60 tw-px-4 tw-py-3 tw-no-underline tw-transition tw-duration-200 focus:tw-outline-none focus-visible:tw-ring-2 focus-visible:tw-ring-primary-400/60 desktop-hover:hover:tw-border-iron-700 desktop-hover:hover:tw-bg-iron-900/60"
     >
       <div className="tw-flex tw-h-10 tw-w-10 tw-flex-shrink-0 tw-items-center tw-justify-center tw-overflow-hidden tw-rounded-md tw-bg-iron-900 tw-ring-1 tw-ring-white/10">

components/waves/drops/WaveCreatorPreviewModal.tsx

@@ -57,7 +57,7 @@ export const WaveCreatorPreviewModal = ({
       <Dialog
         as="div"
         className="tw-relative tw-z-[9999] tw-cursor-default"
-        onClose={onClose}
+        onClose={() => {}}
       >
         <TransitionChild
           as={Fragment}
@@ -77,13 +77,7 @@ export const WaveCreatorPreviewModal = ({
           />
         </TransitionChild>
 
-        <div
-          className="tw-fixed tw-inset-0 tw-z-[100] tw-hidden tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 hover:tw-scrollbar-thumb-iron-300 sm:tw-block"
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose();
-          }}
-        >
+        <div className="tw-fixed tw-inset-0 tw-z-[100] tw-hidden tw-overflow-y-auto tw-scrollbar-thin tw-scrollbar-track-iron-800 tw-scrollbar-thumb-iron-500 hover:tw-scrollbar-thumb-iron-300 sm:tw-block">
           <div className="tw-flex tw-min-h-full tw-items-center tw-justify-center tw-p-4">
             <TransitionChild
               as={Fragment}
@@ -121,7 +115,10 @@ export const WaveCreatorPreviewModal = ({
                 leaveFrom="tw-translate-y-0"
                 leaveTo="tw-translate-y-full"
               >
-                <DialogPanel className="tw-pointer-events-auto tw-relative tw-max-h-[90vh] tw-w-screen tw-transform-gpu tw-overflow-hidden tw-rounded-t-xl tw-border-t tw-border-iron-800 tw-bg-iron-950 tw-shadow-2xl tw-shadow-black/25 tw-will-change-transform">
+                <DialogPanel
+                  className="tw-pointer-events-auto tw-relative tw-max-h-[90vh] tw-w-screen tw-transform-gpu tw-overflow-hidden tw-rounded-t-xl tw-border-t tw-border-iron-800 tw-bg-iron-950 tw-shadow-2xl tw-shadow-black/25 tw-will-change-transform"
+                  onClick={(e) => e.stopPropagation()}
+                >
                   <WaveCreatorPreviewModalContent
                     user={user}
                     isOpen={isOpen}

components/waves/drops/WaveCreatorPreviewModalContent.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useCallback } from "react";
 import type { ApiProfileMin } from "@/generated/models/ApiProfileMin";
 import { useWaves } from "@/hooks/useWaves";
 import CircleLoader, {
@@ -10,6 +10,8 @@ import CommonIntersectionElement from "@/components/utils/CommonIntersectionElem
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { WaveCreatorPreviewItem } from "./WaveCreatorPreviewItem";
 import { shortenAddress } from "@/helpers/address.helpers";
+import { useRouter } from "next/navigation";
+import type { ApiWave } from "@/generated/models/ApiWave";
 
 interface WaveCreatorPreviewModalContentProps {
   readonly user: ApiProfileMin;
@@ -21,6 +23,7 @@ interface WaveCreatorPreviewModalContentProps {
 export const WaveCreatorPreviewModalContent: React.FC<
   WaveCreatorPreviewModalContentProps
 > = ({ user, isOpen, onClose, isApp = false }) => {
+  const router = useRouter();
   const identity = user.handle ?? user.primary_address;
   const displayName = user.handle ?? shortenAddress(user.primary_address);
 
@@ -60,6 +63,12 @@ export const WaveCreatorPreviewModalContent: React.FC<
   const waveCountLabel = isInitialLoading
     ? "Loading waves..."
     : `Showing ${waves.length} wave${wavePlural}`;
+  const handleWaveSelect = useCallback(
+    (_wave: ApiWave, href: string) => {
+      router.push(href);
+    },
+    [router]
+  );
 
   return (
     <div className="tailwind-scope tw-relative tw-overflow-hidden tw-rounded-xl tw-border tw-border-white/5 tw-bg-[#0E1012] tw-shadow-[0_10px_40px_rgba(0,0,0,0.55)]">
@@ -118,7 +127,11 @@ export const WaveCreatorPreviewModalContent: React.FC<
               {waves.length > 0 && (
                 <div className="tw-flex tw-flex-col tw-gap-3">
                   {waves.map((wave) => (
-                    <WaveCreatorPreviewItem key={wave.id} wave={wave} />
+                    <WaveCreatorPreviewItem
+                      key={wave.id}
+                      wave={wave}
+                      onSelect={handleWaveSelect}
+                    />
                   ))}
                 </div>
               )}