chore(ui): a11y skip-link, useMemo, hook fixes, dead-code cleanup

src/components/common/ImgDragAndDrop.tsx

@@ -225,6 +225,7 @@ export default function ImgDragAndDrop({ onImageUpload, initialUrl }: ImgDragAnd
       </div>
       <Input
         type="url"
+        aria-label="Image URL"
         className="w-full rounded-md border border-gray-300 p-2"
         placeholder="Enter your own image URL..."
         value={filePath}

src/components/common/MeshProviderClient.tsx

@@ -1,5 +1,3 @@
- "use client";
-
 import "@meshsdk/react/styles.css";
 import { MeshProvider } from "@meshsdk/react";
 

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

@@ -94,56 +94,6 @@ class WalletErrorBoundary extends Component<
   }
 }
 
-// Component to track layout content changes
-function LayoutContentTracker({ 
-  children, 
-  router, 
-  pageIsPublic, 
-  userAddress 
-}: { 
-  children: ReactNode; 
-  router: ReturnType<typeof useRouter>;
-  pageIsPublic: boolean;
-  userAddress: string | undefined;
-}) {
-  const prevPathRef = useRef<string>(router.pathname);
-  const prevQueryRef = useRef<string>(JSON.stringify(router.query));
-
-  useEffect(() => {
-    const handleRouteChangeStart = (url: string) => {
-      // Route change started
-    };
-
-    const handleRouteChangeComplete = (url: string) => {
-      prevPathRef.current = router.pathname;
-      prevQueryRef.current = JSON.stringify(router.query);
-    };
-
-    const handleRouteChangeError = (err: Error, url: string) => {
-      // Route change error
-    };
-
-    router.events.on('routeChangeStart', handleRouteChangeStart);
-    router.events.on('routeChangeComplete', handleRouteChangeComplete);
-    router.events.on('routeChangeError', handleRouteChangeError);
-
-    return () => {
-      router.events.off('routeChangeStart', handleRouteChangeStart);
-      router.events.off('routeChangeComplete', handleRouteChangeComplete);
-      router.events.off('routeChangeError', handleRouteChangeError);
-    };
-  }, [router]);
-
-  useEffect(() => {
-    if (router.pathname !== prevPathRef.current || JSON.stringify(router.query) !== prevQueryRef.current) {
-      prevPathRef.current = router.pathname;
-      prevQueryRef.current = JSON.stringify(router.query);
-    }
-  }, [router.pathname, router.query]);
-
-  return <>{children}</>;
-}
-
 export default function RootLayout({
   children,
 }: {
@@ -552,6 +502,13 @@ export default function RootLayout({
 
   return (
     <div className="flex h-screen w-screen flex-col overflow-hidden">
+      {/* Skip link for keyboard users */}
+      <a
+        href="#main-content"
+        className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[200] focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+      >
+        Skip to main content
+      </a>
       {(shouldShowBackgroundLoading || showPostAuthLoading) && (
         <div className="fixed inset-0 z-50 transition-opacity duration-300 ease-in-out opacity-100">
           <Loading />
@@ -677,7 +634,11 @@ export default function RootLayout({
         )}
 
         {/* Main content */}
-        <main className="relative flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 md:p-8">
+        <main
+          id="main-content"
+          tabIndex={-1}
+          className="relative flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 md:p-8 focus:outline-none"
+        >
           <WalletErrorBoundary
             fallback={
               <div className="flex flex-col items-center justify-center h-full min-h-[400px] px-4">
@@ -712,9 +673,7 @@ export default function RootLayout({
               </div>
             }
           >
-            <LayoutContentTracker router={router} pageIsPublic={pageIsPublic} userAddress={userAddress}>
-              {pageIsPublic || userAddress ? children : <PageHomepage />}
-            </LayoutContentTracker>
+            {pageIsPublic || userAddress ? children : <PageHomepage />}
           </WalletErrorBoundary>
         </main>
       </div>

src/components/multisig/proxy/index.ts

@@ -1,3 +1,2 @@
 export { default as ProxyControl } from "./ProxyControl";
-export { default as ProxyControlExample } from "./ProxyControlExample";
 export { MeshProxyContract } from "./offchain";

src/components/pages/user/BotManagementCard.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { Bot, Trash2, Loader2, Pencil, Link } from "lucide-react";
 import CardUI from "@/components/ui/card-content";

src/components/pages/wallet/info/signers/card-show-signers.tsx

@@ -155,24 +155,18 @@ export default function ShowSigners({ appWallet }: ShowSignersProps) {
       }
     }
 
-    function handleConnectDiscord() {
-      // Discord OAuth2 URL with required scopes
-      const DISCORD_CLIENT_ID = process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID;
-      const redirectUri = encodeURIComponent(
-        `${process.env.NODE_ENV === "production" ? "https://multisig.meshjs.dev" : "http://localhost:3000"}/api/auth/discord/callback`,
-      );
-      const scope = encodeURIComponent("identify");
-      const state = encodeURIComponent(userAddress || "");
-
-      const url = `https://discord.com/api/oauth2/authorize?client_id=${DISCORD_CLIENT_ID}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}`;
-      console.log({
-        endpoint: "https://discord.com/api/oauth2/token",
-        client_id: process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID,
-        client_secret_set: !!process.env.DISCORD_CLIENT_SECRET,
-        redirect_uri: redirectUri,
-        grant_type: "authorization_code",
-      });
-      window.location.href = url;
+    async function handleConnectDiscord() {
+      try {
+        const r = await fetch("/api/auth/discord/start", { credentials: "include" });
+        if (!r.ok) {
+          throw new Error("Failed to start Discord auth");
+        }
+        const data = (await r.json()) as { url?: string };
+        if (!data.url) throw new Error("No Discord auth URL");
+        window.location.href = data.url;
+      } catch (err) {
+        console.error("Discord auth start failed:", err instanceof Error ? err.message : err);
+      }
     }
 
     return appWallet.signersAddresses.map((address, index) => {

src/components/pages/wallet/signing/index.tsx

@@ -86,7 +86,7 @@ export default function WalletSigning() {
     const signedAddresses = [];
     signedAddresses.push(userAddress);
     const signatures = [];
-    signatures.push(`signature: ${signature.signature}, key: ${signature.key}`);
+    signatures.push(JSON.stringify({ signature: signature.signature, key: signature.key }));
 
     let submitTx = false;
 

src/components/pages/wallet/signing/signable-card.tsx

@@ -185,7 +185,7 @@ function SignableCard({
 
       const signatures = signable.signatures;
       signatures.push(
-        `signature: ${signature.signature}, key: ${signature.key}`,
+        JSON.stringify({ signature: signature.signature, key: signature.key }),
       );
 
       let submitTx = false;
@@ -342,9 +342,22 @@ function SignableCard({
                 </TableHeader>
                 <TableBody>
                   {signable.signatures.map((sigStr, idx) => {
-                    const [sigPart = "", keyPart = ""] =
-                      sigStr.split(", key: ");
-                    const signature = sigPart.replace("signature: ", "");
+                    // New format: JSON {signature, key}.
+                    // Legacy format: "signature: <sig>, key: <key>".
+                    let signature = "";
+                    let keyPart = "";
+                    try {
+                      const parsed = JSON.parse(sigStr) as {
+                        signature?: unknown;
+                        key?: unknown;
+                      };
+                      if (typeof parsed.signature === "string") signature = parsed.signature;
+                      if (typeof parsed.key === "string") keyPart = parsed.key;
+                    } catch {
+                      const [sigPart = "", k = ""] = sigStr.split(", key: ");
+                      signature = sigPart.replace("signature: ", "");
+                      keyPart = k;
+                    }
                     return (
                       <TableRow key={idx}>
                         <TableCell>

src/components/pages/wallet/transactions/transaction-card.tsx

@@ -53,7 +53,6 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/components/ui/collapsible";
-import { get } from "http";
 import { getProvider } from "@/utils/get-provider";
 import { useSiteStore } from "@/lib/zustand/site";
 import {
@@ -73,7 +72,7 @@ export default function TransactionCard({
   const { activeWallet, isWalletReady, isAnyWalletConnected } = useActiveWallet();
   const { appWallet } = useAppWallet();
   const userAddress = useUserStore((state) => state.userAddress);
-  const txJson = JSON.parse(transaction.txJson);
+  const txJson = useMemo(() => JSON.parse(transaction.txJson), [transaction.txJson]);
   const [loading, setLoading] = useState<boolean>(false);
   const [isSignersOpen, setIsSignersOpen] = useState<boolean>(false);
   const { toast } = useToast();

src/components/ui/background.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"

src/hooks/useAppWallet.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useUserStore } from "@/lib/zustand/user";
 import { api } from "@/utils/api";
 import { buildWallet } from "@/utils/common";
@@ -21,9 +22,11 @@ export default function useAppWallet() {
     },
   );
 
-  if (wallet) {
-    return { appWallet: buildWallet(wallet as DbWalletWithLegacy, network, walletsUtxos[walletId]), isLoading };
-  }
+  const utxos = walletsUtxos[walletId];
+  const appWallet = useMemo(() => {
+    if (!wallet) return undefined;
+    return buildWallet(wallet as DbWalletWithLegacy, network, utxos);
+  }, [wallet, network, utxos]);
 
-  return { appWallet: undefined, isLoading };
+  return { appWallet, isLoading };
 }

src/hooks/useMultisigWallet.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useRouter } from "next/router";
 
 import { api } from "@/utils/api";
@@ -19,9 +20,11 @@ export default function useMultisigWallet() {
       enabled: walletId !== undefined && userAddress !== undefined,
     },
   );
-  if (wallet) {
-    return { multisigWallet: buildMultisigWallet(wallet as DbWalletWithLegacy, network), wallet, isLoading };
-  }
 
-  return { multisigWallet: undefined, wallet: undefined, isLoading };
+  const multisigWallet = useMemo(() => {
+    if (!wallet) return undefined;
+    return buildMultisigWallet(wallet as DbWalletWithLegacy, network);
+  }, [wallet, network]);
+
+  return { multisigWallet, wallet, isLoading };
 }