Merge branch 'adminV2' into SPV-1043/FixFilterButtons

src/components/AddXpubDialog/AddXpubDialog.tsx

@@ -134,7 +134,7 @@ export const AddXpubDialog = ({ className }: AddXpubDialogProps) => {
   };
 
   const onXPubClear = () => {
-    form.resetField('xPub');
+    form.reset();
     if (xPubRef.current) {
       xPubRef.current?.focus();
     }

src/components/DataTable/DataTable.tsx

@@ -19,13 +19,13 @@ import {
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
   Row,
-  SortingState,
   useReactTable,
 } from '@tanstack/react-table';
 import { EllipsisVertical } from 'lucide-react';
 
-import React, { useState } from 'react';
+import React from 'react';
 
 export type RowType = XPub | Contact | AccessKey | Destination | PaymailAddress | Tx;
 
@@ -44,21 +44,15 @@ export function DataTable<TData, TValue>({
   renderItem,
   renderInlineItem,
 }: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([initialSorting]);
-
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    onSortingChange: setSorting,
-    manualSorting: true,
+    getSortedRowModel: getSortedRowModel(),
     initialState: {
       sorting: [initialSorting],
     },
-    state: {
-      sorting,
-    },
   });
 
   return (

src/components/RevokeKeyDialog/RevokeKeyDialog.tsx

@@ -34,15 +34,19 @@ export const RevokeKeyDialog = ({ row }: RevokeKeyDialogProps) => {
       // At this point, spvWalletClient is defined; using non-null assertion.
       return await spvWalletClient!.RevokeAccessKey(row.original.id);
     },
-    onSuccess: () =>
+    onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ['accessKeys'],
-      }),
+      });
+      toast.success('Access key revoked');
+    },
+    onError: () => {
+      toast.error('Error revoking access key');
+    },
   });
 
   const handleRevokeAccessKey = () => {
     mutation.mutate();
-    toast.success('Access key revoked');
     setIsRevokeDialogOpen(false);
   };
   return (

src/components/Searchbar/Searchbar.tsx

@@ -1,32 +1,26 @@
-import { CircleX, Search } from 'lucide-react';
+import { Input } from '@/components';
+import { Search } from 'lucide-react';
 
 import React from 'react';
 
-import { Input } from '@/components';
-
 export interface SearchbarProps {
   filter: string;
   setFilter: React.Dispatch<React.SetStateAction<string>>;
+  placeholder?: string;
 }
 
-export const Searchbar = ({ filter, setFilter }: SearchbarProps) => {
+export const Searchbar = ({ filter, setFilter, placeholder }: SearchbarProps) => {
   const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setFilter(event.target.value);
   };
 
   return (
     <div className="relative flex-1 md:grow-0 mr-3">
       <Search className="absolute left-2.5 top-3 h-4 w-4 text-muted-foreground" />
-      {filter.length > 0 && (
-        <CircleX
-          onClick={() => setFilter('')}
-          className="h-4 w-4 right-2.5 top-3 text-muted-foreground absolute cursor-pointer"
-        />
-      )}
       <Input
         type="search"
-        placeholder="Search"
-        className="w-full h-10 rounded-lg bg-background pl-8 pr-8 md:w-[200px] lg:w-[336px]"
+        placeholder={placeholder || 'Search'}
+        className="w-full h-10 rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
         value={filter}
         onChange={handleFilterChange}
       />

src/components/TransactionEditDialog/TransactionEditDialog.tsx

@@ -1,10 +1,3 @@
-import { Metadata, Tx } from '@bsv/spv-wallet-js-client';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Row } from '@tanstack/react-table';
-import React, { useState } from 'react';
-
-import { toast } from 'sonner';
-
 import {
   Button,
   Dialog,
@@ -19,6 +12,12 @@ import {
 
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';
+import { Metadata, Tx } from '@bsv/spv-wallet-js-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Row } from '@tanstack/react-table';
+import React, { useState } from 'react';
+
+import { toast } from 'sonner';
 
 export interface TransactionEditDialogProps {
   row: Row<Tx>;
@@ -42,18 +41,23 @@ export const TransactionEditDialog = ({ row }: TransactionEditDialogProps) => {
       return await spvWalletClient!.UpdateTransactionMetadata(row.original.id, metadata);
     },
     onSuccess: () => {
+      toast.success('Transaction edited');
+
       return queryClient.invalidateQueries({
         queryKey: ['transactions'],
       });
     },
+    onError: (error) => {
+      errorWrapper(error);
+      toast.error('Failed to edit transaction');
+    },
   });
 
   const handleEdit = async () => {
     try {
       const metadataParsed = JSON.parse(metadata) as Metadata;
       mutation.mutate(metadataParsed);
 
-      toast.success('Transaction edited');
       setMetadata(JSON.stringify({}));
       setIsEditDialogOpen(false);
     } catch (err) {

src/routes/admin/_admin.access-keys.tsx

@@ -9,9 +9,11 @@ import {
   TabsTrigger,
   Toaster,
 } from '@/components';
+import { useSpvWalletClient } from '@/contexts';
 
-import { addStatusField, getDeletedElements, getRevokedElements } from '@/utils';
-import { createFileRoute, useLoaderData, useNavigate, useSearch } from '@tanstack/react-router';
+import { accessKeysAdminQueryOptions, addStatusField, getDeletedElements, getRevokedElements } from '@/utils';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router';
 
 import { useEffect, useState } from 'react';
 
@@ -41,26 +43,47 @@ export const Route = createFileRoute('/admin/_admin/access-keys')({
   loader: async ({
     context: {
       spvWallet: { spvWalletClient },
+      queryClient,
     },
     deps: { order_by_field, sort_direction, xpubId, createdRange, revokedRange, updatedRange },
-  }) =>
-    await spvWalletClient!.AdminGetAccessKeys(
-      { xpubId, createdRange, updatedRange, revokedRange },
-      {},
-      { order_by_field, sort_direction },
-    ),
+  }) => {
+    await queryClient.ensureQueryData(
+      accessKeysAdminQueryOptions({
+        spvWalletClient: spvWalletClient!,
+        xpubId,
+        createdRange,
+        updatedRange,
+        revokedRange,
+        sort_direction,
+        order_by_field,
+      }),
+    );
+  },
 });
 
 export function AccessKeys() {
   const [tab, setTab] = useState<string>('all');
   const [filter, setFilter] = useState<string>('');
 
-  const { xpubId } = useSearch({ from: '/admin/_admin/access-keys' });
+  const { xpubId, order_by_field, sort_direction, createdRange, updatedRange, revokedRange } = useSearch({
+    from: '/admin/_admin/access-keys',
+  });
 
   const [debouncedFilter] = useDebounce(filter, 500);
   const navigate = useNavigate({ from: Route.fullPath });
 
-  const accessKeys = useLoaderData({ from: '/admin/_admin/access-keys' });
+  const { spvWalletClient } = useSpvWalletClient();
+
+  const { data: accessKeys } = useSuspenseQuery(
+    accessKeysAdminQueryOptions({
+      spvWalletClient: spvWalletClient!,
+      order_by_field,
+      sort_direction,
+      createdRange,
+      updatedRange,
+      revokedRange,
+    }),
+  );
 
   const mappedAccessKeys = addStatusField(accessKeys);
   const revokedKeys = getRevokedElements(mappedAccessKeys);
@@ -106,12 +129,12 @@ export function AccessKeys() {
             <TabsTrigger value="deleted">Deleted</TabsTrigger>
           </TabsList>
           <div className="flex">
-            <Searchbar filter={filter} setFilter={setFilter} />
+            <Searchbar filter={filter} setFilter={setFilter} placeholder="Search by xpubID" />
             <DateRangeFilter withRevokedRange />
           </div>
         </div>
         <TabsContent value="all">
-          <AccessKeysTabContent accessKeys={mappedAccessKeys} hasRevokeKeyDialog />
+          <AccessKeysTabContent accessKeys={mappedAccessKeys} />
         </TabsContent>
         <TabsContent value="revoked">
           <AccessKeysTabContent accessKeys={revokedKeys} />

src/routes/admin/_admin.contacts.tsx

@@ -150,7 +150,7 @@ export function Contacts() {
             <TabsTrigger value="deleted">Deleted</TabsTrigger>
           </TabsList>
           <div className="flex">
-            <Searchbar filter={filter} setFilter={setFilter} />
+            <Searchbar filter={filter} setFilter={setFilter} placeholder="Search by ID, Paymail or PubKey" />
             <DateRangeFilter />
           </div>
         </div>

src/routes/admin/_admin.destinations.tsx

@@ -9,9 +9,12 @@ import {
   Toaster,
 } from '@/components';
 import { DestinationsTabContent } from '@/components/DestinationsTabContent';
+import { useSpvWalletClient } from '@/contexts';
 import { destinationSearchSchema } from '@/searchSchemas/destinationSearchSchema.tsx';
 import { addStatusField, getAddress, getDeletedElements, getLockingScript } from '@/utils';
-import { createFileRoute, useLoaderData, useNavigate, useSearch } from '@tanstack/react-router';
+import { destinationsAdminQueryOptions } from '@/utils/destinationsAdminQueryOptions.tsx';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router';
 import { useEffect, useState } from 'react';
 import { useDebounce } from 'use-debounce';
 
@@ -30,26 +33,48 @@ export const Route = createFileRoute('/admin/_admin/destinations')({
   loader: async ({
     context: {
       spvWallet: { spvWalletClient },
+      queryClient,
     },
     deps: { lockingScript, address, order_by_field, sort_direction, createdRange, updatedRange },
-  }) =>
-    await spvWalletClient!.AdminGetDestinations(
-      { lockingScript, address, createdRange, updatedRange },
-      {},
-      { order_by_field, sort_direction },
-    ),
+  }) => {
+    await queryClient.ensureQueryData(
+      destinationsAdminQueryOptions({
+        spvWalletClient: spvWalletClient!,
+        address,
+        lockingScript,
+        order_by_field,
+        sort_direction,
+        createdRange,
+        updatedRange,
+      }),
+    );
+  },
 });
 
 export function Destinations() {
   const [tab, setTab] = useState<string>('all');
   const [filter, setFilter] = useState<string>('');
 
-  const { lockingScript, address } = useSearch({ from: '/admin/_admin/destinations' });
+  const { lockingScript, address, order_by_field, sort_direction, createdRange, updatedRange } = useSearch({
+    from: '/admin/_admin/destinations',
+  });
 
   const [debouncedFilter] = useDebounce(filter, 200);
   const navigate = useNavigate({ from: Route.fullPath });
 
-  const destinations = useLoaderData({ from: '/admin/_admin/destinations' });
+  const { spvWalletClient } = useSpvWalletClient();
+
+  const { data: destinations } = useSuspenseQuery(
+    destinationsAdminQueryOptions({
+      spvWalletClient: spvWalletClient!,
+      address,
+      lockingScript,
+      order_by_field,
+      sort_direction,
+      createdRange,
+      updatedRange,
+    }),
+  );
 
   const mappedDestinations = addStatusField(destinations);
   const deletedDests = getDeletedElements(mappedDestinations);
@@ -95,7 +120,7 @@ export function Destinations() {
             <TabsTrigger value="deleted">Deleted</TabsTrigger>
           </TabsList>
           <div className="flex">
-            <Searchbar filter={filter} setFilter={setFilter} />
+            <Searchbar filter={filter} setFilter={setFilter} placeholder="Search by lockingScript or address" />
             <DateRangeFilter />
           </div>
         </div>

src/routes/admin/_admin.paymails.tsx

@@ -120,7 +120,7 @@ export function Paymails() {
           </TabsList>
           <div className="flex">
             <AddPaymailDialog className="mr-3" />
-            <Searchbar filter={filter} setFilter={setFilter} />
+            <Searchbar filter={filter} setFilter={setFilter} placeholder="Search by xpubID" />
             <DateRangeFilter />
           </div>
         </div>

src/routes/admin/_admin.transactions.tsx

@@ -81,14 +81,13 @@ export function Transactions() {
           </TabsList>
           <div className="flex">
             {hasRecordTransaction && <RecordTxDialogAdmin />}
-            <Searchbar filter={blockHeight} setFilter={setBlockHeight} />
+            <Searchbar filter={blockHeight} setFilter={setBlockHeight} placeholder="Search by block height" />
           </div>
         </div>
         <TabsContent value="all">
           <TransactionsTabContent
             transactions={transactions}
             hasRecordTransaction={hasRecordTransaction}
-            hasTransactionEditDialog
             TxDialog={RecordTxDialogAdmin}
           />
         </TabsContent>

src/routes/admin/_admin.xpub.tsx

@@ -1,11 +1,3 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
-import { createFileRoute, useSearch } from '@tanstack/react-router';
-import { useState } from 'react';
-
-import { useDebounce } from 'use-debounce';
-
-import { z } from 'zod';
-
 import {
   AddXpubDialog,
   CustomErrorComponent,
@@ -21,6 +13,13 @@ import {
 import { useSpvWalletClient } from '@/contexts';
 
 import { addStatusField, xPubQueryOptions } from '@/utils';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, useSearch } from '@tanstack/react-router';
+import { useState } from 'react';
+
+import { useDebounce } from 'use-debounce';
+
+import { z } from 'zod';
 
 export const Route = createFileRoute('/admin/_admin/xpub')({
   validateSearch: z.object({
@@ -57,7 +56,7 @@ export function Xpub() {
           </TabsList>
           <div className="flex">
             <AddXpubDialog className="mr-3" />
-            <Searchbar filter={filter} setFilter={setFilter} />
+            <Searchbar filter={filter} setFilter={setFilter} placeholder="Search by ID" />
           </div>
         </div>
         <TabsContent value="all">