From 23c0cd47f9086dd1b1b9b97f0e1f3bfe6335c411 Mon Sep 17 00:00:00 2001
From: chris-4chain <152964795+chris-4chain@users.noreply.github.com>
Date: Wed, 23 Oct 2024 14:35:00 +0200
Subject: [PATCH 1/2] fix: refresh button also for non-admin user (#1045)

Co-authored-by: Damian Orzepowski <damian.orzepowski@4chain.studio>
---
 .../PageRefreshButton/PageRefreshButton.tsx   | 34 +++++++++++++++
 src/components/PageRefreshButton/index.ts     |  1 +
 src/routes/admin/_admin.tsx                   | 41 +++----------------
 src/routes/user/_user.tsx                     |  6 ++-
 4 files changed, 44 insertions(+), 38 deletions(-)
 create mode 100644 src/components/PageRefreshButton/PageRefreshButton.tsx
 create mode 100644 src/components/PageRefreshButton/index.ts

diff --git a/src/components/PageRefreshButton/PageRefreshButton.tsx b/src/components/PageRefreshButton/PageRefreshButton.tsx
new file mode 100644
index 00000000..5b28ed1c
--- /dev/null
+++ b/src/components/PageRefreshButton/PageRefreshButton.tsx
@@ -0,0 +1,34 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import logger from '@/logger';
+import { RefreshCw } from 'lucide-react';
+import { cn } from '@/lib/utils.ts';
+import { Button } from '@/components';
+
+export const PageRefreshButton = () => {
+  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);
+    }
+  };
+
+  return (
+    <Button variant="ghost" className="ml-auto" disabled={isRefreshing} onClick={onRefreshClick}>
+      <RefreshCw className={cn('h-4 w-4 mr-2', isRefreshing && 'animate-spin')} />
+      Refresh
+    </Button>
+  );
+};
diff --git a/src/components/PageRefreshButton/index.ts b/src/components/PageRefreshButton/index.ts
new file mode 100644
index 00000000..c13a648e
--- /dev/null
+++ b/src/components/PageRefreshButton/index.ts
@@ -0,0 +1 @@
+export * from './PageRefreshButton.tsx';
diff --git a/src/routes/admin/_admin.tsx b/src/routes/admin/_admin.tsx
index 50db2cb9..856b3770 100644
--- a/src/routes/admin/_admin.tsx
+++ b/src/routes/admin/_admin.tsx
@@ -1,21 +1,9 @@
-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 { Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
 import { createFileRoute, Link, Outlet, redirect, useLocation } from '@tanstack/react-router';
-import {
-  ArrowLeftRight,
-  KeyRound,
-  KeySquare,
-  Mail,
-  RefreshCw,
-  Route as RouteIcon,
-  UsersRound,
-  Webhook,
-} from 'lucide-react';
+import { ArrowLeftRight, KeyRound, KeySquare, Mail, Route as RouteIcon, UsersRound, Webhook } from 'lucide-react';
 
 import { useEffect, useState } from 'react';
-import { toast } from 'sonner';
+import { PageRefreshButton } from '@/components/PageRefreshButton';
 
 export const Route = createFileRoute('/admin/_admin')({
   beforeLoad: ({ context, location }) => {
@@ -29,23 +17,6 @@ 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);
@@ -56,6 +27,7 @@ function LayoutComponent() {
       return 'bg-accent text-accent-foreground';
     }
   };
+
   return (
     <div className="flex min-h-screen w-full flex-col bg-muted/40">
       <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
@@ -158,10 +130,7 @@ 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>
+          <PageRefreshButton />
           <ModeToggle />
           <Profile />
         </header>
diff --git a/src/routes/user/_user.tsx b/src/routes/user/_user.tsx
index 7b9534b3..48e0f38c 100644
--- a/src/routes/user/_user.tsx
+++ b/src/routes/user/_user.tsx
@@ -1,10 +1,11 @@
-import { Outlet, createFileRoute, Link, useLocation, redirect } from '@tanstack/react-router';
+import { createFileRoute, Link, Outlet, redirect, useLocation } from '@tanstack/react-router';
 
-import { KeySquare, Route as RouteIcon, ArrowLeftRight } from 'lucide-react';
+import { ArrowLeftRight, KeySquare, Route as RouteIcon } from 'lucide-react';
 
 import { useEffect, useState } from 'react';
 
 import { Logo, ModeToggle, Profile, Sheet, Tooltip, TooltipContent, TooltipTrigger } from '@/components';
+import { PageRefreshButton } from '@/components/PageRefreshButton';
 
 export const Route = createFileRoute('/user/_user')({
   beforeLoad: ({ context, location }) => {
@@ -82,6 +83,7 @@ function LayoutComponent() {
           <Sheet>
             <h1>SPV Wallet Admin</h1>
           </Sheet>
+          <PageRefreshButton />
           <ModeToggle />
           <Profile />
         </header>

From ba0a4685ec33e9640bd20c3e4cd8d434d7183975 Mon Sep 17 00:00:00 2001
From: Nazarii-4chain <150656925+Nazarii-4chain@users.noreply.github.com>
Date: Wed, 23 Oct 2024 15:38:42 +0300
Subject: [PATCH 2/2] feat(SPV-1118): fix long texts in confirmation boxes
 (#1042)

Co-authored-by: Krzysztof Tomecki <152964795+chris-4chain@users.noreply.github.com>
---
 .../ContactAcceptDialog.tsx                   |  9 ++--
 .../ContactDeleteDialog.tsx                   |  5 +-
 .../ContactRejectDialog.tsx                   |  9 ++--
 .../PaymailDeleteDialog.tsx                   | 47 +++++++++++--------
 .../RevokeKeyDialog/RevokeKeyDialog.tsx       | 11 +++--
 .../UnsubscribeWebhook/UnsubscribeWebhook.tsx |  5 +-
 6 files changed, 51 insertions(+), 35 deletions(-)

diff --git a/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx b/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx
index 7a7bc99f..f48e58a5 100644
--- a/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx
+++ b/src/components/ContactAcceptDialog/ContactAcceptDialog.tsx
@@ -73,11 +73,10 @@ export const ContactAcceptDialog = ({ row }: ContactAcceptDialogProps) => {
       </DialogTrigger>
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle>Accept Contact</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to accept <span className="font-bold text-black">{row.getValue('paymail')}</span> as a
-            contact ?
-          </DialogDescription>
+          <DialogTitle>
+            Are you sure you want to <u>accept</u> the contact?
+          </DialogTitle>
+          <DialogDescription className="break-all font-bold">{row.getValue('paymail')}</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
           <Button onClick={handleAcceptContact} disabled={isPending}>
diff --git a/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx b/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx
index b77cab85..73e3cfb6 100644
--- a/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx
+++ b/src/components/ContactDeleteDialog/ContactDeleteDialog.tsx
@@ -62,7 +62,10 @@ export const ContactDeleteDialog = ({ row }: ContactDeleteDialogProps) => {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Are you sure you want to delete {row.original.paymail} contact?</DialogTitle>
+          <DialogTitle>
+            Are you sure you want to <u>delete</u> the contact?
+          </DialogTitle>
+          <DialogDescription className="break-all font-bold">{row.original.paymail}</DialogDescription>
           <DialogDescription>This action cannot be undone. Please confirm your decision to proceed.</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
diff --git a/src/components/ContactRejectDialog/ContactRejectDialog.tsx b/src/components/ContactRejectDialog/ContactRejectDialog.tsx
index ff0731ec..f475e074 100644
--- a/src/components/ContactRejectDialog/ContactRejectDialog.tsx
+++ b/src/components/ContactRejectDialog/ContactRejectDialog.tsx
@@ -76,11 +76,10 @@ export const ContactRejectDialog = ({ row }: ContactRejectDialogProps) => {
       </DialogTrigger>
       <DialogContent className="max-w-xl">
         <DialogHeader>
-          <DialogTitle>Reject Contact</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to reject <span className="font-bold text-black">{row.getValue('paymail')}</span> as a
-            contact ?
-          </DialogDescription>
+          <DialogTitle>
+            Are you sure you want to <u>reject</u> the contact?
+          </DialogTitle>
+          <DialogDescription className="break-all font-bold">{row.getValue('paymail')}</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
           <Button variant="destructive" onClick={handleRejectContact} disabled={isPending}>
diff --git a/src/components/PaymailDeleteDialog/PaymailDeleteDialog.tsx b/src/components/PaymailDeleteDialog/PaymailDeleteDialog.tsx
index f14b5841..709bae86 100644
--- a/src/components/PaymailDeleteDialog/PaymailDeleteDialog.tsx
+++ b/src/components/PaymailDeleteDialog/PaymailDeleteDialog.tsx
@@ -8,6 +8,7 @@ import {
   DialogTrigger,
   DropdownMenuItem,
   LoadingSpinner,
+  TooltipProvider,
 } from '@/components';
 
 import { useSpvWalletClient } from '@/contexts';
@@ -59,24 +60,32 @@ export const PaymailDeleteDialog = ({ row }: PaymailDeleteDialogProps) => {
   const { isPending } = deletePaymailMutation;
 
   return (
-    <Dialog open={isDeleteDialogOpen} onOpenChange={handleDeleteDialogOpen}>
-      <DialogTrigger className="w-full">
-        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete</DropdownMenuItem>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Are you sure you want to delete {address} paymail?</DialogTitle>
-          <DialogDescription>This action cannot be undone. Please confirm your decision to proceed.</DialogDescription>
-        </DialogHeader>
-        <div className="grid grid-cols-2 gap-4">
-          <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
-            Delete {isPending && <LoadingSpinner className="ml-2" />}
-          </Button>
-          <Button variant="ghost" onClick={handleDeleteDialogOpen}>
-            Cancel
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
+    <TooltipProvider>
+      <Dialog open={isDeleteDialogOpen} onOpenChange={handleDeleteDialogOpen}>
+        <DialogTrigger className="w-full">
+          <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Delete</DropdownMenuItem>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              Are you sure you want to delete the paymail?
+              <br />
+            </DialogTitle>
+            <DialogDescription className="break-all font-bold">{address}</DialogDescription>
+            <DialogDescription>
+              This action cannot be undone. Please confirm your decision to proceed.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-2 gap-4">
+            <Button variant="destructive" onClick={handleDelete} disabled={isPending}>
+              Delete {isPending && <LoadingSpinner className="ml-2" />}
+            </Button>
+            <Button variant="ghost" onClick={handleDeleteDialogOpen}>
+              Cancel
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </TooltipProvider>
   );
 };
diff --git a/src/components/RevokeKeyDialog/RevokeKeyDialog.tsx b/src/components/RevokeKeyDialog/RevokeKeyDialog.tsx
index e13d0ea1..26ba1664 100644
--- a/src/components/RevokeKeyDialog/RevokeKeyDialog.tsx
+++ b/src/components/RevokeKeyDialog/RevokeKeyDialog.tsx
@@ -58,10 +58,15 @@ export const RevokeKeyDialog = ({ row }: RevokeKeyDialogProps) => {
         <DropdownMenuItem onSelect={(e) => e.preventDefault()}>Revoke</DropdownMenuItem>
       </DialogTrigger>
       <DialogContent className="">
-        <DialogHeader className="min-w-0">
-          <DialogTitle className="min-w-0 break-words">
-            Are you sure you want to revoke {row.original.id} access key?
+        <DialogHeader>
+          <DialogTitle>
+            Are you sure you want to <u>revoke</u> selected access key?
           </DialogTitle>
+          <DialogDescription className="break-all font-bold text-xs">
+            Access key ID:
+            <br />
+            {row.original.id}
+          </DialogDescription>
           <DialogDescription>This action cannot be undone. Please confirm your decision to proceed.</DialogDescription>
         </DialogHeader>
         <div className="grid grid-cols-2 gap-4">
diff --git a/src/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx b/src/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx
index 5cdd55fa..40fcb38c 100644
--- a/src/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx
+++ b/src/components/UnsubscribeWebhook/UnsubscribeWebhook.tsx
@@ -57,9 +57,10 @@ export const UnsubscribeWebhook = ({ row }: UnsubscribeWebhookProps) => {
         </DialogTrigger>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>Unsubscribe webhook</DialogTitle>
+            <DialogTitle>Are you sure you want to unsubscribe a webhook ?</DialogTitle>
           </DialogHeader>
-          <DialogDescription>Are you sure you want to unsubscribe a webhook ?</DialogDescription>
+          <DialogDescription className="break-all font-bold text-xs">{row.original.url}</DialogDescription>
+          <DialogDescription>This action cannot be undone. Please confirm your decision to proceed.</DialogDescription>
           <div className="grid grid-cols-2 gap-4">
             <Button onClick={onRemove}>Unsubscribe</Button>
             <Button variant="ghost" onClick={handleIsOpenToggle}>