Enhance configuration and optimize caching for improved performance

- Updated next.config.js to allow unoptimized images for local proxy API routes and added tree-shaking optimizations.
- Introduced bundle analyzer configuration to assist in analyzing the build size when the ANALYZE environment variable is set.
- Modified package.json to include a new script for analyzing the build.
- Refactored caching strategies in various API routes to optimize performance and reduce external API calls.
- Implemented caching middleware for tRPC queries to improve data fetching efficiency.
- Enhanced user and wallet data hooks with improved caching and stale time settings.

Author: QSchlegel

SECURITY_VULNERABILITIES_ANALYSIS.md

@@ -203,3 +203,4 @@ Most vulnerabilities are low-risk for production use, but should be addressed th
 - Monitoring for package updates
 
 
+

next.config.js

@@ -44,6 +44,8 @@ const config = {
         hostname: "gateway.pinata.cloud",
       },
     ],
+    // Allow unoptimized images for local proxy API routes
+    unoptimized: false,
   },
   // Turbopack configuration (Next.js 16+)
   // Empty config silences the warning about webpack/turbopack conflict
@@ -56,8 +58,23 @@ const config = {
       asyncWebAssembly: true,
       layers: true,
     };
+    
+    // Optimize tree-shaking by ensuring proper module resolution
+    config.optimization = {
+      ...config.optimization,
+      usedExports: true,
+      sideEffects: false,
+    };
+    
     return config;
   },
 };
 
-export default config;
+// Bundle analyzer - only enable when ANALYZE env var is set
+const withBundleAnalyzer = process.env.ANALYZE === 'true' 
+  ? require('@next/bundle-analyzer')({
+      enabled: true,
+    })
+  : (config) => config;
+
+export default withBundleAnalyzer(config);

package.json

@@ -18,7 +18,8 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "test:ci": "jest --ci --coverage --watchAll=false"
+    "test:ci": "jest --ci --coverage --watchAll=false",
+    "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
     "@auth/prisma-adapter": "^2.11.1",

prisma/schema.prisma

@@ -3,8 +3,8 @@ generator client {
 }
 
 datasource db {
-  provider = "postgresql"
-  url      = env("DATABASE_URL")
+  provider  = "postgresql"
+  url       = env("DATABASE_URL")
   // For Supabase + Vercel serverless optimization:
   // - DATABASE_URL: Use Supabase's connection pooling URL (Transaction mode)
   //   Example: postgresql://user:pass@host:6543/db?pgbouncer=true
@@ -55,6 +55,10 @@ model Transaction {
   txHash            String?
   createdAt         DateTime @default(now())
   updatedAt         DateTime @updatedAt
+
+  @@index([walletId])
+  @@index([state])
+  @@index([walletId, state])
 }
 
 model Signable {
@@ -122,6 +126,11 @@ model Proxy {
   createdAt    DateTime @default(now())
   updatedAt    DateTime @updatedAt
   userId       String?
+
+  @@index([walletId])
+  @@index([userId])
+  @@index([walletId, isActive])
+  @@index([userId, isActive])
 }
 
 model BalanceSnapshot {

src/components/common/cardano-objects/connect-wallet.tsx

@@ -320,31 +320,31 @@ function ConnectWalletContent({
     if (isConnecting) {
       return (
         <>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          <span className="font-medium">Connecting...</span>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin transition-opacity duration-300" />
+          <span className="font-medium transition-opacity duration-300">Connecting...</span>
         </>
       );
     }
     if (isConnected && isLoading) {
       return (
         <>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          <span className="font-medium">Loading...</span>
+          <Loader2 className="mr-2 h-4 w-4 animate-spin transition-opacity duration-300" />
+          <span className="font-medium transition-opacity duration-300">Loading...</span>
         </>
       );
     }
     if (isConnected && user && !userLoading) {
       return (
         <>
-          <CheckCircle2 className="mr-2 h-4 w-4" />
-          <span className="font-medium">{connectedWalletName || "Connected"}</span>
+          <CheckCircle2 className="mr-2 h-4 w-4 transition-all duration-300" />
+          <span className="font-medium transition-opacity duration-300">{connectedWalletName || "Connected"}</span>
         </>
       );
     }
     return (
       <>
-        <Wallet className="mr-2 h-4 w-4" />
-        <span className="font-medium">Connect Wallet</span>
+        <Wallet className="mr-2 h-4 w-4 transition-all duration-300" />
+        <span className="font-medium transition-opacity duration-300">Connect Wallet</span>
       </>
     );
   };
@@ -355,7 +355,8 @@ function ConnectWalletContent({
         <Button
           variant="secondary"
           className={cn(
-            "rounded-full px-4 py-2 h-auto transition-all duration-300 ease-in-out",
+            "rounded-full px-4 py-2 h-auto",
+            "transition-all duration-300 ease-in-out",
             "shadow-sm hover:shadow-md",
             "border border-zinc-200 dark:border-zinc-800",
             "bg-white dark:bg-zinc-900",

src/components/common/overall-layout/layout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, Component, ReactNode } from "react";
+import React, { useEffect, Component, ReactNode, useMemo, useCallback } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 import { useNostrChat } from "@jinglescode/nostr-chat-plugin";
@@ -32,6 +32,7 @@ import { MobileNavigation } from "@/components/ui/mobile-navigation";
 import { MobileActionsMenu } from "@/components/ui/mobile-actions-menu";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
 
 // Dynamically import ConnectWallet with SSR disabled to avoid production SSR issues
 // Using a version-based key ensures fresh mount on updates, preventing cache issues
@@ -127,23 +128,68 @@ export default function RootLayout({
   }, []);
 
   const { mutate: createUser } = api.user.createUser.useMutation({
+    onMutate: async (variables) => {
+      // Cancel outgoing refetches
+      await ctx.user.getUserByAddress.cancel({ address: variables.address });
+      
+      // Snapshot previous value
+      const previous = ctx.user.getUserByAddress.getData({ address: variables.address });
+      
+      // Optimistically update
+      ctx.user.getUserByAddress.setData(
+        { address: variables.address },
+        (old) => old ?? {
+          address: variables.address,
+          stakeAddress: variables.stakeAddress,
+          drepKeyHash: variables.drepKeyHash ?? "",
+          nostrKey: variables.nostrKey,
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        }
+      );
+      
+      return { previous };
+    },
+    onError: (err, variables, context) => {
+      // Rollback on error
+      if (context?.previous) {
+        ctx.user.getUserByAddress.setData({ address: variables.address }, context.previous);
+      }
+      console.error("Error creating user:", err);
+    },
     onSuccess: (_, variables) => {
       console.log("User created/updated successfully, invalidating user query");
-      // Invalidate the user query so it refetches the newly created user
+      // Invalidate to ensure we have the latest data
       void ctx.user.getUserByAddress.invalidate({ address: variables.address });
     },
-    onError: (e) => {
-      console.error("Error creating user:", e);
-    },
   });
   const { mutate: updateUser } = api.user.updateUser.useMutation({
+    onMutate: async (variables) => {
+      // Cancel outgoing refetches
+      await ctx.user.getUserByAddress.cancel({ address: variables.address });
+      
+      // Snapshot previous value
+      const previous = ctx.user.getUserByAddress.getData({ address: variables.address });
+      
+      // Optimistically update
+      ctx.user.getUserByAddress.setData(
+        { address: variables.address },
+        (old) => old ? { ...old, ...variables, updatedAt: new Date() } : old
+      );
+      
+      return { previous };
+    },
+    onError: (err, variables, context) => {
+      // Rollback on error
+      if (context?.previous) {
+        ctx.user.getUserByAddress.setData({ address: variables.address }, context.previous);
+      }
+      console.error("Error updating user:", err);
+    },
     onSuccess: (_, variables) => {
       console.log("User updated successfully, invalidating user query");
       void ctx.user.getUserByAddress.invalidate({ address: variables.address });
     },
-    onError: (e) => {
-      console.error("Error updating user:", e);
-    },
   });
 
   // Sync address from hook to store
@@ -196,12 +242,13 @@ export default function RootLayout({
     initializeWallet();
   }, [connected, activeWallet, user, address, createUser, generateNsec]);
 
-  const isWalletPath = router.pathname.includes("/wallets/[wallet]");
-  const walletPageRoute = router.pathname.split("/wallets/[wallet]/")[1];
-  const walletPageNames = walletPageRoute ? walletPageRoute.split("/") : [];
-  const pageIsPublic = publicRoutes.includes(router.pathname);
-  const isLoggedIn = !!user;
-  const isHomepage = router.pathname === "/";
+  // Memoize computed route values
+  const isWalletPath = useMemo(() => router.pathname.includes("/wallets/[wallet]"), [router.pathname]);
+  const walletPageRoute = useMemo(() => router.pathname.split("/wallets/[wallet]/")[1], [router.pathname]);
+  const walletPageNames = useMemo(() => walletPageRoute ? walletPageRoute.split("/") : [], [walletPageRoute]);
+  const pageIsPublic = useMemo(() => publicRoutes.includes(router.pathname), [router.pathname]);
+  const isLoggedIn = useMemo(() => !!user, [user]);
+  const isHomepage = useMemo(() => router.pathname === "/", [router.pathname]);
 
   // Keep track of the last visited wallet to show wallet menu even on other pages
   const [lastVisitedWalletId, setLastVisitedWalletId] = React.useState<string | null>(null);
@@ -224,7 +271,7 @@ export default function RootLayout({
     }
   }, [router.query.wallet, isWalletPath, appWallet, multisigWallet]);
 
-  const clearWalletContext = React.useCallback(() => {
+  const clearWalletContext = useCallback(() => {
     setLastVisitedWalletId(null);
     setLastVisitedWalletName(null);
     setLastWalletStakingEnabled(null);
@@ -237,11 +284,25 @@ export default function RootLayout({
     }
   }, [isHomepage, lastVisitedWalletId, clearWalletContext]);
 
-  const showWalletMenu = isLoggedIn && (isWalletPath || !!lastVisitedWalletId);
+  // Memoize computed values
+  const showWalletMenu = useMemo(() => isLoggedIn && (isWalletPath || !!lastVisitedWalletId), [isLoggedIn, isWalletPath, lastVisitedWalletId]);
+
+  // Don't show background loading when wallet is connecting or just connected (button already shows spinner)
+  // The connect button shows a spinner when: connecting OR (connected && (!user || userLoading))
+  const isConnecting = useMemo(() => String(walletState) === String(WalletState.CONNECTING), [walletState]);
+  const isButtonShowingSpinner = useMemo(() => isConnecting || (connected && (!user || isLoading)), [isConnecting, connected, user, isLoading]);
+  const shouldShowBackgroundLoading = useMemo(() => isLoading && !isButtonShowingSpinner, [isLoading, isButtonShowingSpinner]);
+  
+  // Memoize wallet ID for menu
+  const walletIdForMenu = useMemo(() => (router.query.wallet as string) || lastVisitedWalletId || undefined, [router.query.wallet, lastVisitedWalletId]);
 
   return (
     <div className="flex h-screen w-screen flex-col overflow-hidden">
-      {isLoading && <Loading />}
+      {shouldShowBackgroundLoading && (
+        <div className="fixed inset-0 z-50 transition-opacity duration-300 ease-in-out opacity-100">
+          <Loading />
+        </div>
+      )}
 
       {/* Header - full width, always on top */}
       <header
@@ -250,11 +311,11 @@ export default function RootLayout({
       >
           <div className="flex h-14 items-center gap-4 lg:h-16">
             {/* Mobile menu button - hidden only on public homepage (not logged in) */}
-            {(isLoggedIn || !isHomepage) && (
+              {(isLoggedIn || !isHomepage) && (
               <MobileNavigation
                 showWalletMenu={showWalletMenu}
                 isLoggedIn={isLoggedIn}
-                walletId={router.query.wallet as string || lastVisitedWalletId || undefined}
+                walletId={walletIdForMenu}
                 fallbackWalletName={lastVisitedWalletName}
                 onClearWallet={clearWalletContext}
                 stakingEnabled={lastWalletStakingEnabled ?? undefined}
@@ -342,7 +403,7 @@ export default function RootLayout({
                   {showWalletMenu && (
                     <div className="mt-4">
                       <MenuWallet
-                        walletId={router.query.wallet as string || lastVisitedWalletId || undefined}
+                        walletId={walletIdForMenu}
                         stakingEnabled={isWalletPath ? undefined : (lastWalletStakingEnabled ?? undefined)}
                       />
                     </div>

src/components/common/overall-layout/loading.tsx

@@ -2,7 +2,7 @@ export default function Loading() {
   return (
     <div
       role="status"
-      className="fixed flex h-screen w-screen items-center justify-center"
+      className="fixed flex h-screen w-screen items-center justify-center bg-background/80 backdrop-blur-sm"
     >
       <svg
         aria-hidden="true"