Make Transaction history private

src/components/Home/HomeHistory.tsx

@@ -26,7 +26,14 @@ const HomeHistory = ({ isPublic = false, username }: { isPublic?: boolean; usern
     // fetch the latest 5 transaction history entries
     const mode = isPublic ? 'public' : 'latest'
     const limit = isPublic ? 20 : 5
-    const { data: historyData, isLoading, isError, error } = useTransactionHistory({ mode, limit, username })
+    // Only filter when user is requesting for some different user's history
+    const filterMutualTxs = !isPublic && username !== user?.user.username
+    const {
+        data: historyData,
+        isLoading,
+        isError,
+        error,
+    } = useTransactionHistory({ mode, limit, username, filterMutualTxs, enabled: isLoggedIn })
     const kycStatus: KYCStatus = user?.user?.kycStatus || 'not_started'
 
     // WebSocket for real-time updates

src/components/Profile/components/PublicProfile.tsx

@@ -16,6 +16,7 @@ import { useRouter } from 'next/navigation'
 import { formatExtendedNumber } from '@/utils'
 import Card from '@/components/Global/Card'
 import { useAuth } from '@/context/authContext'
+import chillPeanutAnim from '@/animations/GIF_ALPHA_BACKGORUND/512X512_ALPHA_GIF_konradurban_01.gif'
 
 interface PublicProfileProps {
     username: string
@@ -124,9 +125,8 @@ const PublicProfile: React.FC<PublicProfileProps> = ({
                         </div>
                     </div>
                 )}
-
-                {/*
-                {!hasTransactions && (
+                {/* Show create account box to guest users */}
+                {!isLoggedIn && (
                     <div className="relative flex flex-col items-center">
                         <Card position="single" className="z-10 mt-28 space-y-2 p-4 text-center">
                             {isLoggedIn ? (
@@ -170,8 +170,9 @@ const PublicProfile: React.FC<PublicProfileProps> = ({
                         </div>
                     </div>
                 )}
-                */}
-                <HomeHistory isPublic={true} username={username} />
+
+                {/* Show history to logged in users  */}
+                {isLoggedIn && <HomeHistory isPublic={false} username={username} />}
             </div>
         </div>
     )

src/hooks/useTransactionHistory.ts

@@ -81,13 +81,15 @@ type UseTransactionHistoryOptions = {
     limit?: number
     enabled?: boolean
     username?: string
+    filterMutualTxs?: boolean
 }
 
 export function useTransactionHistory(options: {
     mode: 'latest' | 'public'
     limit?: number
     enabled?: boolean
     username?: string
+    filterMutualTxs?: boolean
 }): LatestHistoryResult
 
 export function useTransactionHistory(options: {
@@ -106,6 +108,7 @@ export function useTransactionHistory({
     limit = 50,
     enabled = true,
     username,
+    filterMutualTxs,
 }: UseTransactionHistoryOptions): LatestHistoryResult | InfiniteHistoryResult {
     const fetchHistory = async ({
         cursor,
@@ -119,6 +122,8 @@ export function useTransactionHistory({
         const queryParams = new URLSearchParams()
         if (cursor) queryParams.append('cursor', cursor)
         if (limit) queryParams.append('limit', limit.toString())
+        // append targetUsername to the query params if filterMutualTxs is true and username is provided
+        if (filterMutualTxs && username) queryParams.append('targetUsername', username)
 
         let url: string
         if (isPublic) {
@@ -222,8 +227,10 @@ export function useTransactionHistory({
 
     // Latest transactions mode (for home page)
     if (mode === 'latest') {
+        // if filterMutualTxs is true, we need to add the username to the query key to invalidate the query when the username changes
+        const queryKeyTxn = TRANSACTIONS + (filterMutualTxs ? username : '')
         return useQuery({
-            queryKey: [TRANSACTIONS, 'latest', { limit }],
+            queryKey: [queryKeyTxn, 'latest', { limit }],
             queryFn: () => fetchHistory({ limit }),
             enabled,
             staleTime: 5 * 60 * 1000, // 5 minutes