Display error toast from failed actions from CfdTable

This code concerns both maker and taker UIs.

frontend/src/TakerApp.tsx

@@ -21,6 +21,7 @@ import { useEventSource } from "react-sse-hooks";
 import { CfdTable } from "./components/cfdtables/CfdTable";
 import CurrencyInputField from "./components/CurrencyInputField";
 import useLatestEvent from "./components/Hooks";
+import { HttpError } from "./components/HttpError";
 import { Cfd, intoCfd, intoOrder, Order, StateGroupKey, WalletInfo } from "./components/Types";
 import Wallet from "./components/Wallet";
 
@@ -43,7 +44,8 @@ async function postCfdOrderRequest(payload: CfdOrderRequestPayload) {
     let res = await fetch(`/api/cfd/order`, { method: "POST", body: JSON.stringify(payload) });
 
     if (!res.status.toString().startsWith("2")) {
-        throw new Error("failed to create new CFD order request: " + res.status + ", " + res.statusText);
+        const resp = await res.json();
+        throw new HttpError(resp);
     }
 }
 
@@ -51,7 +53,8 @@ async function getMargin(payload: MarginRequestPayload): Promise<MarginResponse>
     let res = await fetch(`/api/calculate/margin`, { method: "POST", body: JSON.stringify(payload) });
 
     if (!res.status.toString().startsWith("2")) {
-        throw new Error("failed to create new CFD order request: " + res.status + ", " + res.statusText);
+        const resp = await res.json();
+        throw new HttpError(resp);
     }
 
     return res.json();
@@ -106,10 +109,10 @@ export default function App() {
         };
         calculateMargin(payload);
     }, // Eslint demands us to include `calculateMargin` in the list of dependencies.
-     // We don't want that as we will end up in an endless loop. It is safe to ignore `calculateMargin` because
-    // nothing in `calculateMargin` depends on outside values, i.e. is guaranteed to be stable.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [margin, effectiveQuantity, order]);
+        // We don't want that as we will end up in an endless loop. It is safe to ignore `calculateMargin` because
+        // nothing in `calculateMargin` depends on outside values, i.e. is guaranteed to be stable.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [margin, effectiveQuantity, order]);
 
     const format = (val: any) => `$` + val;
     const parse = (val: any) => val.replace(/^\$/, "");

frontend/src/components/cfdtables/CfdTable.tsx

@@ -31,6 +31,8 @@ import {
 import React from "react";
 import { useAsync } from "react-async";
 import { Column, Row, useExpanded, useSortBy, useTable } from "react-table";
+import createErrorToast from "../ErrorToast";
+import { HttpError } from "../HttpError";
 import Timestamp from "../Timestamp";
 import { Action, Cfd } from "../Types";
 
@@ -48,15 +50,7 @@ export function CfdTable(
             try {
                 await doPostAction(orderId, action);
             } catch (e) {
-                const description = typeof e === "string" ? e : JSON.stringify(e);
-
-                toast({
-                    title: "Error",
-                    description,
-                    status: "error",
-                    duration: 9000,
-                    isClosable: true,
-                });
+                createErrorToast(toast, e);
             }
         },
     });
@@ -400,8 +394,12 @@ export function Table({ columns, tableData, hiddenColumns, renderDetails }: Tabl
 }
 
 async function doPostAction(id: string, action: string) {
-    await fetch(
+    let res = await fetch(
         `/api/cfd/${id}/${action}`,
         { method: "POST", credentials: "include" },
     );
+    if (!res.status.toString().startsWith("2")) {
+        const resp = await res.json();
+        throw new HttpError(resp);
+    }
 }