feat(SPV-1097): Added refresh button

src/components/ModeToggle/ModeToggle.tsx

@@ -1,5 +1,3 @@
-import { Moon, Sun } from 'lucide-react';
-
 import { Button } from '@/components/ui';
 import {
   DropdownMenu,
@@ -8,13 +6,14 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu.tsx';
 import { useTheme } from '@/contexts';
+import { Moon, Sun } from 'lucide-react';
 
 export function ModeToggle() {
   const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild className="ml-auto">
+      <DropdownMenuTrigger asChild>
         <Button variant="outline" size="icon">
           <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

src/routes/admin/_admin.tsx

@@ -1,9 +1,21 @@
-import { Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
+import { Button, Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
+import { cn } from '@/lib/utils.ts';
+import logger from '@/logger';
+import { useQueryClient } from '@tanstack/react-query';
 import { createFileRoute, Link, Outlet, redirect, useLocation } from '@tanstack/react-router';
-
-import { ArrowLeftRight, KeyRound, KeySquare, Mail, Route as RouteIcon, UsersRound, Webhook } from 'lucide-react';
+import {
+  ArrowLeftRight,
+  KeyRound,
+  KeySquare,
+  Mail,
+  RefreshCw,
+  Route as RouteIcon,
+  UsersRound,
+  Webhook,
+} from 'lucide-react';
 
 import { useEffect, useState } from 'react';
+import { toast } from 'sonner';
 
 export const Route = createFileRoute('/admin/_admin')({
   beforeLoad: ({ context, location }) => {
@@ -17,6 +29,23 @@ export const Route = createFileRoute('/admin/_admin')({
 function LayoutComponent() {
   const [route, setRoute] = useState<string>('/admin/xpub');
   const { pathname } = useLocation();
+  const queryClient = useQueryClient();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const onRefreshClick = async () => {
+    setIsRefreshing(true);
+    try {
+      // Wait for all queries invalidation (data refetching)
+      // and a minimum delay of 0.5sec before proceeding to make sure the UI doesn't flicker
+      await Promise.all([queryClient.invalidateQueries(), new Promise((resolve) => setTimeout(resolve, 500))]);
+      toast.success('Data refreshed');
+    } catch {
+      logger.error('Failed to refresh');
+      toast.error('Failed to refresh');
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
 
   useEffect(() => {
     setRoute(pathname);
@@ -129,6 +158,10 @@ function LayoutComponent() {
           <Sheet>
             <h1>SPV Wallet Admin</h1>
           </Sheet>
+          <Button variant="ghost" className="ml-auto" disabled={isRefreshing} onClick={onRefreshClick}>
+            <RefreshCw className={cn('h-4 w-4 mr-2', isRefreshing && 'animate-spin')} />
+            Refresh
+          </Button>
           <ModeToggle />
           <Profile />
         </header>