SPV-1010/WebhookView (#1033)

Co-authored-by: chris-4chain <[email protected]>

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@4chain-ag/react-configuration": "^1.0.4",
     "@bsv/sdk": "^1.0.37",
-    "@bsv/spv-wallet-js-client": "^1.0.0-beta.20",
+    "@bsv/spv-wallet-js-client": "^1.0.0-beta.21",
     "@estruyf/github-actions-reporter": "^1.9.2",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^3.9.0",

src/components/AccessKeysTabContent/AccessKeysTabContent.tsx

@@ -7,6 +7,7 @@ import {
   DataTable,
   NoRecordsText,
   RevokeKeyDialog,
+  ViewDialog,
 } from '@/components';
 import { AccessKeyExtended } from '@/interfaces';
 
@@ -26,7 +27,12 @@ export const AccessKeysTabContent = ({ accessKeys, hasRevokeKeyDialog }: AccessK
           <DataTable
             columns={accessKeysColumns}
             data={accessKeys}
-            renderItem={(row) => hasRevokeKeyDialog && <RevokeKeyDialog row={row} />}
+            renderItem={(row) => (
+              <>
+                <ViewDialog row={row} />
+                {hasRevokeKeyDialog && <RevokeKeyDialog row={row} />}
+              </>
+            )}
           />
         ) : (
           <NoRecordsText message="No Access Keys to show." />

src/components/ContactsTabContent/ContactsTabContent.tsx

@@ -11,6 +11,7 @@ import {
   ContactStatus,
   DataTable,
   NoRecordsText,
+  ViewDialog,
 } from '@/components';
 import { ContactExtended } from '@/interfaces/contacts.ts';
 
@@ -29,16 +30,19 @@ export const ContactsTabContent = ({ contacts }: ContactsTabContentProps) => {
           <DataTable
             columns={contactsColumns}
             data={contacts}
-            renderInlineItem={(row) =>
-              row.getValue('status') === ContactStatus.Awaiting ? (
-                <div className="grid grid-cols-2 items-center w-fit gap-4 ">
-                  <ContactAcceptDialog row={row} />
-                  <ContactRejectDialog row={row} />
-                </div>
-              ) : null
-            }
+            renderInlineItem={(row) => (
+              <>
+                {row.getValue('status') === ContactStatus.Awaiting ? (
+                  <div className="grid grid-cols-2 items-center w-fit gap-4 ">
+                    <ContactAcceptDialog row={row} />
+                    <ContactRejectDialog row={row} />
+                  </div>
+                ) : null}
+              </>
+            )}
             renderItem={(row) => (
               <>
+                <ViewDialog row={row} />
                 <ContactEditDialog row={row} />
                 <ContactDeleteDialog row={row} />
               </>

src/components/DataTable/DataTable.tsx

@@ -11,7 +11,6 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-  ViewDialog,
 } from '@/components';
 import { AccessKey, Contact, Destination, PaymailAddress, Tx, XPub } from '@bsv/spv-wallet-js-client';
 import {
@@ -79,20 +78,22 @@ export function DataTable<TData, TValue>({
                   <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                 ))}
                 <TableCell>{renderInlineItem ? renderInlineItem(row) : null}</TableCell>
-                <TableCell>
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <Button variant="ghost" className="h-8 w-8 p-0">
-                        <EllipsisVertical className="h-4 w-4" />
-                      </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
-                      <ViewDialog row={row as Row<RowType>} />
-                      {renderItem ? renderItem(row) : null}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
+
+                {renderItem && (
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="h-8 w-8 p-0">
+                          <EllipsisVertical className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                        {renderItem ? renderItem(row) : null}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                )}
               </TableRow>
             ))
           ) : (

src/components/DestinationsTabContent/DestinationsTabContent.tsx

@@ -7,6 +7,7 @@ import {
   DestinationEditDialog,
   destinationsColumns,
   NoRecordsText,
+  ViewDialog,
 } from '@/components';
 import { DestinationExtended } from '@/interfaces/destination.ts';
 
@@ -26,7 +27,12 @@ export const DestinationsTabContent = ({ destinations, hasDestinationEditDialog
           <DataTable
             columns={destinationsColumns}
             data={destinations}
-            renderItem={(row) => hasDestinationEditDialog && <DestinationEditDialog row={row} />}
+            renderItem={(row) => (
+              <>
+                <ViewDialog row={row} />
+                {hasDestinationEditDialog && <DestinationEditDialog row={row} />}
+              </>
+            )}
           />
         ) : (
           <NoRecordsText message="No Destinations to show." />

src/components/PaymailsTabContent/PaymailsTabContent.tsx

@@ -7,6 +7,7 @@ import {
   NoRecordsText,
   paymailColumns,
   PaymailDeleteDialog,
+  ViewDialog,
 } from '@/components';
 import { PaymailExtended } from '@/interfaces/paymail.ts';
 
@@ -26,9 +27,12 @@ export const PaymailsTabContent = ({ paymails, hasPaymailDeleteDialog }: Paymail
           <DataTable
             columns={paymailColumns}
             data={paymails}
-            renderItem={(row) =>
-              hasPaymailDeleteDialog && row.original.status !== 'deleted' && <PaymailDeleteDialog row={row} />
-            }
+            renderItem={(row) => (
+              <>
+                <ViewDialog row={row} />
+                {hasPaymailDeleteDialog && row.original.status !== 'deleted' && <PaymailDeleteDialog row={row} />}
+              </>
+            )}
           />
         ) : (
           <NoRecordsText message="No Paymails to show." />

src/components/TransactionsTabContent/TransactionsTabContent.tsx

@@ -1,4 +1,4 @@
-import { Card, CardContent, CardHeader, CardTitle, DataTable, TransactionEditDialog } from '@/components';
+import { Card, CardContent, CardHeader, CardTitle, DataTable, TransactionEditDialog, ViewDialog } from '@/components';
 import { columns } from '@/components/TransactionsColumns/columns.tsx';
 import { Tx } from '@bsv/spv-wallet-js-client';
 import React from 'react';
@@ -26,7 +26,12 @@ export const TransactionsTabContent = ({
           <DataTable
             columns={columns}
             data={transactions}
-            renderItem={(row) => hasTransactionEditDialog && <TransactionEditDialog row={row} />}
+            renderItem={(row) => (
+              <>
+                <ViewDialog row={row} />
+                {hasTransactionEditDialog && <TransactionEditDialog row={row} />}
+              </>
+            )}
           />
         ) : (
           <div className="flex flex-col items-center gap-1 text-center">

src/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx

@@ -0,0 +1,73 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components';
+import { useSpvWalletClient } from '@/contexts';
+import { errorWrapper } from '@/utils';
+import { Webhook } from '@bsv/spv-wallet-js-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { Row } from '@tanstack/react-table';
+import { CircleMinus } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+interface UnsubscribeWebhookProps {
+  row: Row<Webhook>;
+}
+
+export const UnsubscribeWebhook = ({ row }: UnsubscribeWebhookProps) => {
+  const { spvWalletClient } = useSpvWalletClient();
+  const queryClient = useQueryClient();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleIsOpenToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+
+  const mutation = useMutation({
+    mutationFn: async (url: string) => {
+      // At this point, spvWalletClient is defined; using non-null assertion.
+      return await spvWalletClient!.AdminDeleteWebhook(url);
+    },
+    onSuccess: () => queryClient.invalidateQueries(),
+  });
+  const onRemove = () => {
+    mutation.mutate(row.original.url, {
+      onSuccess: () => {
+        toast.success('Webhook unsubscribed');
+      },
+      onError: (error) => {
+        toast.error('Failed to unsubscribe webhook');
+        errorWrapper(error);
+      },
+    });
+  };
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={handleIsOpenToggle}>
+        <DialogTrigger asChild className="w-full">
+          <Button variant="destructive" className="h-8 max-w-min">
+            <CircleMinus className="w-4 h-4 mr-2" /> Unsubscribe
+          </Button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Unsubscribe webhook</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>Are you sure you want to unsubscribe a webhook ?</DialogDescription>
+          <div className="grid grid-cols-2 gap-4">
+            <Button onClick={onRemove}>Unsubscribe</Button>
+            <Button variant="ghost" onClick={handleIsOpenToggle}>
+              Cancel
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};

src/components/UnsubscribeWebhook/index.ts

@@ -0,0 +1 @@
+export * from './UnsubscribeWebhook.tsx';

src/components/ViewDialog/ViewDialog.tsx

@@ -30,10 +30,10 @@ export const ViewDialog = ({ row }: ViewDialogProps) => {
           </div>
         );
       }
-
       return (
         <div key={field} className="break-all">
-          <span className="text-gray-400">{field}:</span> {value as React.ReactNode}
+          <span className="text-gray-400">{field}:</span>{' '}
+          {typeof value === 'boolean' ? value.toString() : (value as React.ReactNode)}
         </div>
       );
     });

src/components/WebhooksColumns/WebhooksColumns.tsx

@@ -0,0 +1,51 @@
+import { Badge, Button } from '@/components/ui';
+import { getSortDirection } from '@/utils';
+import { Webhook } from '@bsv/spv-wallet-js-client';
+import { Link } from '@tanstack/react-router';
+import { ColumnDef } from '@tanstack/react-table';
+
+import { ArrowUpDown } from 'lucide-react';
+
+export interface WebhooksColumns extends Webhook {
+  status: string;
+}
+
+export const webhookColumns: ColumnDef<WebhooksColumns>[] = [
+  {
+    accessorKey: 'url',
+    header: ({ column }) => {
+      return (
+        <Link
+          search={(prev) => ({
+            ...prev,
+            order_by_field: 'url',
+            sort_direction: getSortDirection(column),
+          })}
+        >
+          <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+            URL
+            <ArrowUpDown className="ml-2 h-4 w-4" />
+          </Button>
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: ({ column }) => {
+      return (
+        <Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
+          Status
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      return row.getValue('status') === 'banned' ? (
+        <Badge variant="secondary">Banned</Badge>
+      ) : (
+        <Badge variant="outline">Active</Badge>
+      );
+    },
+  },
+];

src/components/WebhooksTabContent/WebhooksTabContent.tsx

@@ -0,0 +1,34 @@
+import { Card, CardContent, CardHeader, CardTitle, DataTable, webhookColumns } from '@/components';
+import { UnsubscribeWebhook } from '@/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx';
+import { WebhookExtended } from '@/interfaces/webhook.ts';
+
+export interface WebhooksTabContentProps {
+  webhooks: WebhookExtended[];
+}
+
+export const WebhooksTabContent = ({ webhooks }: WebhooksTabContentProps) => {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Webhooks</CardTitle>
+      </CardHeader>
+      <CardContent className="mb-2">
+        {webhooks.length > 0 ? (
+          <DataTable
+            columns={webhookColumns}
+            data={webhooks}
+            renderInlineItem={(row) => (
+              <>
+                <UnsubscribeWebhook row={row} />
+              </>
+            )}
+          />
+        ) : (
+          <div className="flex flex-col items-center gap-1 text-center">
+            <h3 className="text-2xl font-bold tracking-tight">You have no webhooks</h3>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

src/components/WebhooksTabContent/index.ts

@@ -0,0 +1 @@
+export * from './WebhooksTabContent.tsx';

src/components/XpubsTabContent/XpubsTabContent.tsx

@@ -1,4 +1,13 @@
-import { AddXpubDialog, Card, CardContent, CardHeader, CardTitle, DataTable, xPubsColumns } from '@/components';
+import {
+  AddXpubDialog,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  ViewDialog,
+  xPubsColumns,
+} from '@/components';
 import { XpubExtended } from '@/interfaces';
 
 export interface XpubsTabContentProps {
@@ -13,7 +22,7 @@ export const XpubsTabContent = ({ xpubs }: XpubsTabContentProps) => {
       </CardHeader>
       <CardContent className="mb-2">
         {xpubs.length > 0 ? (
-          <DataTable columns={xPubsColumns} data={xpubs} />
+          <DataTable columns={xPubsColumns} data={xpubs} renderItem={(row) => <ViewDialog row={row} />} />
         ) : (
           <div className="flex flex-col items-center gap-1 text-center">
             <h3 className="text-2xl font-bold tracking-tight">You have no xPubs</h3>

src/components/index.ts

@@ -34,3 +34,6 @@ export * from './XpubsSkeleton';
 export * from './XpubsTabContent';
 export * from './CustomErrorComponent';
 export * from './LoadingSpinner';
+export * from './WebhooksColumns/WebhooksColumns.tsx';
+export * from './WebhooksTabContent';
+export * from './UnsubscribeWebhook';

src/interfaces/webhook.ts

@@ -0,0 +1,5 @@
+import { Webhook } from '@bsv/spv-wallet-js-client';
+
+export interface WebhookExtended extends Webhook {
+  status: string;
+}