Merge pull request #14 from DLC-link/feat/error-handling

feat: added error handling for blockchain interactions

package.json

@@ -40,7 +40,6 @@
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-query": "^3.39.3",
     "react-redux": "^8.1.3",
     "react-youtube": "^10.1.0",
     "redux": "^4.2.1",

src/app/app.tsx

@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from "react-query";
 import { Route } from "react-router-dom";
 
 import { AppLayout } from "@components/app.layout";
@@ -9,19 +8,15 @@ import { About } from "./pages/about/about";
 import { Dashboard } from "./pages/dashboard/dashboard";
 import { BlockchainContextProvider } from "./providers/blockchain-context-provider";
 
-const queryClient = new QueryClient();
-
 export function App(): React.JSX.Element {
   return (
-    <QueryClientProvider client={queryClient}>
-      <BlockchainContextProvider>
-        <AppLayout>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/my-vaults" element={<MyVaults />} />
-          <Route path="/how-it-works" element={<About />} />
-        </AppLayout>
-        <ModalContainer />
-      </BlockchainContextProvider>
-    </QueryClientProvider>
+    <BlockchainContextProvider>
+      <AppLayout>
+        <Route path="/" element={<Dashboard />} />
+        <Route path="/my-vaults" element={<MyVaults />} />
+        <Route path="/how-it-works" element={<About />} />
+      </AppLayout>
+      <ModalContainer />
+    </BlockchainContextProvider>
   );
 }

src/app/components/mint-unmint/components/transaction-form/transaction-form.tsx

@@ -6,13 +6,15 @@ import {
   FormErrorMessage,
   Text,
   VStack,
+  useToast,
 } from "@chakra-ui/react";
 import { customShiftValue } from "@common/utilities";
 import { Form, Formik } from "formik";
 
 import { BlockchainContext } from "../../../../providers/blockchain-context-provider";
 import { TransactionFormInput } from "./components/transaction-form-input";
 import { TransactionFormWarning } from "./components/transaction-form-warning";
+import { EthereumError } from "@models/error-types";
 
 export interface TransactionFormValues {
   amount: number;
@@ -21,6 +23,7 @@ export interface TransactionFormValues {
 const initialValues: TransactionFormValues = { amount: 0.001 };
 
 export function TransactionForm(): React.JSX.Element {
+  const toast = useToast();
   const blockchainContext = useContext(BlockchainContext);
   const ethereum = blockchainContext?.ethereum;
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -36,7 +39,13 @@ export function TransactionForm(): React.JSX.Element {
       await ethereum?.setupVault(shiftedBTCDepositAmount);
     } catch (error) {
       setIsSubmitting(false);
-      throw new Error("Error setting up vault");
+      toast({
+        title: "Failed to create vault",
+        description: error instanceof EthereumError ? error.message : "",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
     }
   }
 

src/app/components/vault/vault-card.tsx

@@ -9,6 +9,8 @@ import { VaultCardLayout } from "./components/vault-card.layout";
 import { VaultExpandedInformation } from "./components/vault-expanded-information/vault-expanded-information";
 import { VaultInformation } from "./components/vault-information";
 import { VaultProgressBar } from "./components/vault-progress-bar";
+import { useToast } from "@chakra-ui/react";
+import { BitcoinError } from "@models/error-types";
 
 interface VaultCardProps {
   vault: Vault;
@@ -23,6 +25,7 @@ export function VaultCard({
   isSelectable = false,
   handleSelect,
 }: VaultCardProps): React.JSX.Element {
+  const toast = useToast();
   const blockchainContext = useContext(BlockchainContext);
   const bitcoin = blockchainContext?.bitcoin;
 
@@ -36,7 +39,13 @@ export function VaultCard({
       await bitcoin?.fetchBitcoinContractOfferAndSendToUserWallet(vault);
     } catch (error) {
       setIsSubmitting(false);
-      throw new Error("Error locking vault");
+      toast({
+        title: "Failed to lock Bitcoin",
+        description: error instanceof BitcoinError ? error.message : "",
+        status: "error",
+        duration: 9000,
+        isClosable: true,
+      });
     }
   }
 

src/app/hooks/use-bitcoin.ts

@@ -1,6 +1,6 @@
-// import { Dispatch } from 'react';
 import { useDispatch } from "react-redux";
 
+import { BitcoinError } from "@models/error-types";
 import { Vault } from "@models/vault";
 import { mintUnmintActions } from "@store/slices/mintunmint/mintunmint.actions";
 import { vaultActions } from "@store/slices/vault/vault.actions";
@@ -17,7 +17,7 @@ export function useBitcoin(): UseBitcoinReturnType {
 
   function createURLParams(bitcoinContractOffer: any) {
     if (!routerWalletURL) {
-      throw new Error("Router wallet URL is undefined");
+      throw new BitcoinError("Router wallet URL is undefined");
     }
 
     const counterPartyWalletDetails = {
@@ -47,8 +47,10 @@ export function useBitcoin(): UseBitcoinReturnType {
         }),
       );
       dispatch(mintUnmintActions.setMintStep(2));
-    } catch (error) {
-      throw new Error(`Could not send contract offer for signing: ${error}`);
+    } catch (error: any) {
+      throw new BitcoinError(
+        `Could not send contract offer for signing: ${error.error.message}`,
+      );
     }
   }
 
@@ -63,12 +65,12 @@ export function useBitcoin(): UseBitcoinReturnType {
       });
       const responseStream = await response.json();
       if (!response.ok) {
-        throw new Error(responseStream.error);
+        throw new BitcoinError(responseStream.error.message);
       }
       return responseStream;
-    } catch (error) {
-      throw new Error(
-        `Could not fetch contract offer from counterparty wallet: ${error}`,
+    } catch (error: any) {
+      throw new BitcoinError(
+        `Could not fetch contract offer from counterparty wallet: ${error.message}`,
       );
     }
   }