fixes

Author: joaquim-verges

apps/portal/src/components/others/AllSupportedWallets.tsx

@@ -1,17 +1,23 @@
 "use client";
 
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQuery,
+} from "@tanstack/react-query";
+import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react";
 import Image from "next/image";
-import { useState, useEffect, useMemo } from "react";
+import { useMemo, useState } from "react";
 import {
   getAllWalletsList,
   getWalletInfo,
   type WalletId,
 } from "thirdweb/wallets";
-import { DocLink, InlineCode } from "../Document";
+import { DocLink } from "../Document/DocLink";
+import { InlineCode } from "../Document/InlineCode";
 import { Table, TBody, Td, Th, Tr } from "../Document/Table";
-import { Input } from "../ui/input";
 import { Button } from "../ui/button";
-import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react";
+import { Input } from "../ui/input";
 
 const specialWallets: {
   [key in WalletId]?: boolean;
@@ -22,46 +28,44 @@ const specialWallets: {
 
 const ITEMS_PER_PAGE = 20;
 
-interface WalletInfo {
-  id: string;
-  name: string;
-}
+const queryClient = new QueryClient();
 
 export function AllSupportedWallets() {
-  const [wallets, setWallets] = useState<WalletInfo[]>([]);
-  const [loading, setLoading] = useState(true);
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AllSupportedWalletsContent />
+    </QueryClientProvider>
+  );
+}
+
+function AllSupportedWalletsContent() {
   const [searchQuery, setSearchQuery] = useState("");
   const [currentPage, setCurrentPage] = useState(1);
 
-  useEffect(() => {
-    async function loadWallets() {
-      try {
-        const allWallets = await getAllWalletsList();
-        const filteredWallets = allWallets
-          .filter((w) => !(w.id in specialWallets))
-          .map((w) => ({
-            id: w.id,
-            name: w.name,
-          }));
-        setWallets(filteredWallets);
-      } catch (error) {
-        console.error("Failed to load wallets:", error);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadWallets();
-  }, []);
+  const { data: wallets, isLoading: loading } = useQuery({
+    queryKey: ["allWalletsList"],
+    queryFn: async () => {
+      const allWallets = await getAllWalletsList();
+      return allWallets
+        .filter((w) => !(w.id in specialWallets))
+        .map((w) => ({
+          id: w.id,
+          name: w.name,
+        }));
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
 
   const filteredWallets = useMemo(() => {
-    if (!searchQuery) return wallets;
-    
+    if (!searchQuery) return wallets || [];
+    if (!wallets) return [];
+
+    setCurrentPage(1);
     const query = searchQuery.toLowerCase();
     return wallets.filter(
       (wallet) =>
         wallet.name.toLowerCase().includes(query) ||
-        wallet.id.toLowerCase().includes(query)
+        wallet.id.toLowerCase().includes(query),
     );
   }, [wallets, searchQuery]);
 
@@ -70,11 +74,6 @@ export function AllSupportedWallets() {
   const endIndex = startIndex + ITEMS_PER_PAGE;
   const currentWallets = filteredWallets.slice(startIndex, endIndex);
 
-  // Reset to first page when search changes
-  useEffect(() => {
-    setCurrentPage(1);
-  }, [searchQuery]);
-
   const handlePreviousPage = () => {
     setCurrentPage((prev) => Math.max(prev - 1, 1));
   };
@@ -99,7 +98,7 @@ export function AllSupportedWallets() {
     <div className="space-y-6">
       {/* Search Input */}
       <div className="relative">
-        <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <SearchIcon className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
         <Input
           type="text"
           placeholder="Search wallets by name or ID..."
@@ -111,9 +110,9 @@ export function AllSupportedWallets() {
 
       {/* Results count */}
       <div className="text-sm text-muted-foreground">
-        {filteredWallets.length === wallets.length
+        {filteredWallets.length === wallets?.length
           ? `Showing ${filteredWallets.length} wallets`
-          : `Found ${filteredWallets.length} of ${wallets.length} wallets`}
+          : `Found ${filteredWallets.length} of ${wallets?.length} wallets`}
       </div>
 
       {/* Table */}
@@ -126,8 +125,13 @@ export function AllSupportedWallets() {
 
           {currentWallets.length === 0 ? (
             <Tr>
-              <Td colSpan={2} className="text-center text-muted-foreground py-8">
-                {searchQuery ? "No wallets found matching your search." : "No wallets available."}
+              <Td
+                colSpan={2}
+                className="text-center text-muted-foreground py-8"
+              >
+                {searchQuery
+                  ? "No wallets found matching your search."
+                  : "No wallets available."}
               </Td>
             </Tr>
           ) : (
@@ -155,30 +159,32 @@ export function AllSupportedWallets() {
       {totalPages > 1 && (
         <div className="flex items-center justify-between">
           <div className="text-sm text-muted-foreground">
-            Page {currentPage} of {totalPages} 
+            Page {currentPage} of {totalPages}
             {filteredWallets.length > 0 && (
               <span className="ml-2">
-                (showing {startIndex + 1}-{Math.min(endIndex, filteredWallets.length)} of {filteredWallets.length})
+                (showing {startIndex + 1}-
+                {Math.min(endIndex, filteredWallets.length)} of{" "}
+                {filteredWallets.length})
               </span>
             )}
           </div>
-          
+
           <div className="flex items-center space-x-2">
             <Button
               variant="outline"
               size="sm"
               onClick={handlePreviousPage}
               disabled={currentPage === 1}
             >
-              <ChevronLeftIcon className="h-4 w-4" />
+              <ChevronLeftIcon className="size-4" />
               Previous
             </Button>
 
             {/* Page numbers */}
             <div className="flex items-center space-x-1">
               {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
-                let pageNumber;
-                
+                let pageNumber: number;
+
                 if (totalPages <= 5) {
                   pageNumber = i + 1;
                 } else if (currentPage <= 3) {
@@ -210,7 +216,7 @@ export function AllSupportedWallets() {
               disabled={currentPage === totalPages}
             >
               Next
-              <ChevronRightIcon className="h-4 w-4" />
+              <ChevronRightIcon className="size-4" />
             </Button>
           </div>
         </div>
@@ -219,8 +225,19 @@ export function AllSupportedWallets() {
   );
 }
 
-async function WalletImage(props: { id: WalletId }) {
-  const img = await getWalletInfo(props.id, true);
+function WalletImage(props: { id: WalletId }) {
+  const { data: img } = useQuery({
+    queryKey: ["wallet-image", props.id],
+    queryFn: () => getWalletInfo(props.id, true),
+    staleTime: 1000 * 60 * 60 * 24, // 24 hours
+  });
+
+  if (!img) {
+    return (
+      <div className="rounded-lg bg-muted" style={{ width: 44, height: 44 }} />
+    );
+  }
+
   return (
     <Image alt="" className="rounded-lg" height={44} src={img} width={44} />
   );