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();

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);
+                createErrorToast(toast, e);
-
-                toast({
-                    title: "Error",
-                    description,
-                    status: "error",
-                    duration: 9000,
-                    isClosable: true,
-                });
             }
         },
     });
@@ -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);
+    }
 }