fix: Better error handling UX

Author: wzrdx

src/components/account/Invoicing.tsx

@@ -1,24 +1,18 @@
 import { Skeleton } from '@heroui/skeleton';
 import { getInvoiceDrafts } from '@lib/api/backend';
 import { BorderedCard } from '@shared/cards/BorderedCard';
+import { DetailedAlert } from '@shared/DetailedAlert';
 import EmptyData from '@shared/EmptyData';
 import ListHeader from '@shared/ListHeader';
 import { InvoiceDraft } from '@typedefs/general';
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import { RiDraftLine, RiErrorWarningLine, RiFileInfoLine } from 'react-icons/ri';
+import { RiCloseCircleLine, RiDraftLine, RiFileInfoLine } from 'react-icons/ri';
 import BillingMonthSelect from './BillingMonthSelect';
 import DraftInvoiceCard from './DraftInvoiceCard';
 
 function Invoicing() {
-    const [billingInfo, _setBillingInfo] = useState({
-        companyName: '—',
-        billingEmail: '—',
-        vatNumber: '—',
-        paymentAddress: '—',
-    });
-
     const [uniqueMonths, setUniqueMonths] = useState<string[]>([]);
     const [invoiceDrafts, setInvoiceDrafts] = useState<InvoiceDraft[] | undefined>();
 
@@ -62,8 +56,9 @@ function Invoicing() {
             setUniqueMonths(months);
         } catch (error: any) {
             console.error(error);
-            setError(error.message);
-            toast.error('Failed to fetch invoice drafts.');
+            const errorMessage = 'Failed to fetch invoice drafts';
+            setError(errorMessage);
+            toast.error(errorMessage);
         } finally {
             setLoading(false);
         }
@@ -112,9 +107,14 @@ function Invoicing() {
                             ))}
                         </>
                     ) : error !== null ? (
-                        <div className="row gap-1.5 rounded-lg bg-red-100 p-4 text-red-700">
-                            <RiErrorWarningLine className="text-xl" />
-                            <div className="text-sm font-medium">{error}</div>
+                        <div className="py-8 lg:py-12">
+                            <DetailedAlert
+                                variant="red"
+                                icon={<RiCloseCircleLine />}
+                                title="Error"
+                                description={<div>{error}</div>}
+                                isCompact
+                            />
                         </div>
                     ) : invoiceDrafts === undefined || selectedMonth === undefined || !invoiceDrafts.length ? (
                         <div className="center-all w-full p-14">

src/pages/tunnels/Tunnels.tsx

@@ -16,7 +16,7 @@ import { TunnelingSecrets } from '@typedefs/general';
 import { Tunnel } from '@typedefs/tunnels';
 import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
-import { RiAddLine, RiDoorLockLine, RiDraftLine, RiErrorWarningLine, RiPencilLine } from 'react-icons/ri';
+import { RiAddLine, RiCloseCircleLine, RiDoorLockLine, RiDraftLine, RiPencilLine } from 'react-icons/ri';
 import { useAccount, useSignMessage } from 'wagmi';
 
 function Tunnels() {
@@ -242,9 +242,14 @@ function Tunnels() {
                     </div>
 
                     {error && !isFetchingTunnels && (
-                        <div className="row gap-1.5 rounded-lg bg-red-100 p-4 text-red-700">
-                            <RiErrorWarningLine className="text-xl" />
-                            <div className="text-sm font-medium">{error}</div>
+                        <div className="py-8 lg:py-12">
+                            <DetailedAlert
+                                variant="red"
+                                icon={<RiCloseCircleLine />}
+                                title="Error"
+                                description={<div>{error}</div>}
+                                isCompact
+                            />
                         </div>
                     )}
 

src/shared/DetailedAlert.tsx

@@ -8,6 +8,7 @@ interface Props {
     description: JSX.Element;
     largeTitle?: boolean;
     fullWidth?: boolean;
+    isCompact?: boolean;
 }
 
 export const DetailedAlert: FunctionComponent<PropsWithChildren<Props>> = ({
@@ -18,6 +19,7 @@ export const DetailedAlert: FunctionComponent<PropsWithChildren<Props>> = ({
     description,
     largeTitle = false,
     fullWidth = false,
+    isCompact = false,
 }) => {
     const bgColorClass = {
         primary: 'bg-primary-100',
@@ -30,12 +32,12 @@ export const DetailedAlert: FunctionComponent<PropsWithChildren<Props>> = ({
     };
 
     return (
-        <div className="col items-center gap-6">
+        <div className={clsx('col items-center', { 'gap-4': isCompact, 'gap-6': !isCompact })}>
             <div className={`center-all rounded-full ${bgColorClass[variant]} p-4`}>
                 <div className={`text-3xl ${textColorClass[variant]}`}>{icon}</div>
             </div>
 
-            <div className="col gap-2 text-center">
+            <div className={clsx('col text-center', { 'gap-1': isCompact, 'gap-2': !isCompact })}>
                 <div
                     className={clsx('text-primary-800 font-bold tracking-wider uppercase', {
                         'text-xl': !largeTitle,