Error dialog

xch-dev · Dec 8, 2024 · b3f82d5 · b3f82d5
1 parent e9921b7
commit b3f82d5
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 117 deletions.
diff --git a/src/components/ErrorDialog.tsx b/src/components/ErrorDialog.tsx
diff --git a/src/contexts/ErrorContext.tsx b/src/contexts/ErrorContext.tsx
@@ -1,7 +1,9 @@
+import { Button } from '@/components/ui/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
@@ -41,23 +43,62 @@ export function ErrorProvider({ children }: { children: ReactNode }) {
     <ErrorContext.Provider value={{ errors, addError }}>
       {children}
 
-      <Dialog
-        open={errors.length > 0}
-        onOpenChange={(open) => {
-          if (!open) {
-            setErrors([]);
-          }
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Errors</DialogTitle>
-            <DialogDescription>
-              There are {errors.length} errors.
-            </DialogDescription>
-          </DialogHeader>
-        </DialogContent>
-      </Dialog>
+      {errors.length > 0 && (
+        <ErrorDialog
+          error={errors[0]}
+          setError={() => setErrors(errors.slice(1))}
+        />
+      )}
     </ErrorContext.Provider>
   );
 }
+
+export interface ErrorDialogProps {
+  error: Error | null;
+  setError: (error: Error | null) => void;
+}
+
+export default function ErrorDialog({ error, setError }: ErrorDialogProps) {
+  let kind: string | null;
+
+  switch (error?.kind) {
+    case 'api':
+      kind = 'API';
+      break;
+
+    case 'internal':
+      kind = 'Internal';
+      break;
+
+    case 'not_found':
+      kind = 'Not Found';
+      break;
+
+    case 'unauthorized':
+      kind = 'Auth';
+      break;
+
+    case 'wallet':
+      kind = 'Wallet';
+      break;
+
+    default:
+      kind = null;
+  }
+
+  return (
+    <Dialog open={error !== null} onOpenChange={() => setError(null)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{kind ? `${kind} ` : ''}Error</DialogTitle>
+          <DialogDescription>{error?.reason}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button onClick={() => setError(null)} autoFocus>
+            Ok
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/CreateProfile.tsx b/src/pages/CreateProfile.tsx
@@ -18,9 +18,8 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import * as z from 'zod';
-import { commands, Error, TransactionResponse } from '../bindings';
+import { commands, TransactionResponse } from '../bindings';
 import Container from '../components/Container';
-import ErrorDialog from '../components/ErrorDialog';
 import { useWalletState } from '../state';
 
 export default function CreateProfile() {
@@ -29,7 +28,6 @@ export default function CreateProfile() {
   const navigate = useNavigate();
   const walletState = useWalletState();
 
-  const [error, setError] = useState<Error | null>(null);
   const [response, setResponse] = useState<TransactionResponse | null>(null);
 
   const formSchema = z.object({
@@ -108,7 +106,6 @@ export default function CreateProfile() {
         </Form>
       </Container>
 
-      <ErrorDialog error={error} setError={setError} />
       <ConfirmationDialog
         response={response}
         close={() => setResponse(null)}

diff --git a/src/pages/MintNft.tsx b/src/pages/MintNft.tsx
@@ -27,9 +27,8 @@ import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import * as z from 'zod';
-import { commands, Error, TransactionResponse } from '../bindings';
+import { commands, TransactionResponse } from '../bindings';
 import Container from '../components/Container';
-import ErrorDialog from '../components/ErrorDialog';
 import { useWalletState } from '../state';
 
 export default function MintNft() {
@@ -39,7 +38,6 @@ export default function MintNft() {
   const { dids } = useDids();
   const { addError } = useErrors();
 
-  const [error, setError] = useState<Error | null>(null);
   const [pending, setPending] = useState(false);
   const [response, setResponse] = useState<TransactionResponse | null>(null);
 
@@ -273,7 +271,6 @@ export default function MintNft() {
         </Form>
       </Container>
 
-      <ErrorDialog error={error} setError={setError} />
       <ConfirmationDialog
         response={response}
         close={() => setResponse(null)}

diff --git a/src/pages/Send.tsx b/src/pages/Send.tsx
@@ -22,13 +22,11 @@ import * as z from 'zod';
 import {
   CatRecord,
   commands,
-  Error,
   events,
   SendXch,
   TransactionResponse,
 } from '../bindings';
 import Container from '../components/Container';
-import ErrorDialog from '../components/ErrorDialog';
 
 export default function Send() {
   const { asset_id: assetId } = useParams();
@@ -42,7 +40,6 @@ export default function Send() {
   const [asset, setAsset] = useState<(CatRecord & { decimals: number }) | null>(
     null,
   );
-  const [error, setError] = useState<Error | null>(null);
   const [response, setResponse] = useState<TransactionResponse | null>(null);
 
   const updateCat = useCallback(
@@ -226,7 +223,6 @@ export default function Send() {
         </Form>
       </Container>
 
-      <ErrorDialog error={error} setError={setError} />
       <ConfirmationDialog
         response={response}
         close={() => setResponse(null)}

diff --git a/src/pages/ViewOffer.tsx b/src/pages/ViewOffer.tsx
@@ -1,7 +1,6 @@
-import { commands, Error, OfferSummary, TakeOfferResponse } from '@/bindings';
+import { commands, OfferSummary, TakeOfferResponse } from '@/bindings';
 import ConfirmationDialog from '@/components/ConfirmationDialog';
 import Container from '@/components/Container';
-import ErrorDialog from '@/components/ErrorDialog';
 import Header from '@/components/Header';
 import { OfferCard } from '@/components/OfferCard';
 import { Button } from '@/components/ui/button';
@@ -23,7 +22,6 @@ export function ViewOffer() {
 
   const [summary, setSummary] = useState<OfferSummary | null>(null);
   const [response, setResponse] = useState<TakeOfferResponse | null>(null);
-  const [error, setError] = useState<Error | null>(null);
   const [fee, setFee] = useState('');
 
   useEffect(() => {
@@ -97,14 +95,6 @@ export function ViewOffer() {
 
           <Button onClick={take}>Take Offer</Button>
         </div>
-
-        <ErrorDialog
-          error={error}
-          setError={(error) => {
-            setError(error);
-            if (error === null) navigate('/offers');
-          }}
-        />
       </Container>
 
       <ConfirmationDialog

diff --git a/src/pages/ViewSavedOffer.tsx b/src/pages/ViewSavedOffer.tsx
@@ -1,20 +1,16 @@
-import { commands, Error, OfferRecord } from '@/bindings';
+import { commands, OfferRecord } from '@/bindings';
 import Container from '@/components/Container';
-import ErrorDialog from '@/components/ErrorDialog';
 import Header from '@/components/Header';
 import { OfferCard } from '@/components/OfferCard';
 import { useErrors } from '@/hooks/useErrors';
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 export function ViewSavedOffer() {
-  const navigate = useNavigate();
-
   const { offer_id: offerId } = useParams();
   const { addError } = useErrors();
 
   const [record, setRecord] = useState<OfferRecord | null>(null);
-  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
     if (!offerId) return;
@@ -29,17 +25,7 @@ export function ViewSavedOffer() {
     <>
       <Header title='Saved Offer' />
 
-      <Container>
-        {record && <OfferCard summary={record.summary} />}
-
-        <ErrorDialog
-          error={error}
-          setError={(error) => {
-            setError(error);
-            if (error === null) navigate('/offers');
-          }}
-        />
-      </Container>
+      <Container>{record && <OfferCard summary={record.summary} />}</Container>
     </>
   );
 }