Display error toasts from failed actions in the taker

frontend/src/TakerApp.tsx

@@ -20,6 +20,7 @@ import { useAsync } from "react-async";
 import { useEventSource } from "react-sse-hooks";
 import { CfdTable } from "./components/cfdtables/CfdTable";
 import CurrencyInputField from "./components/CurrencyInputField";
+import createErrorToast from "./components/ErrorToast";
 import useLatestEvent from "./components/Hooks";
 import { HttpError } from "./components/HttpError";
 import { Cfd, intoCfd, intoOrder, Order, StateGroupKey, WalletInfo } from "./components/Types";
@@ -84,15 +85,7 @@ export default function App() {
                 let res = await getMargin(payload as MarginRequestPayload);
                 setMargin(res.margin.toString());
             } catch (e) {
-                const description = typeof e === "string" ? e : JSON.stringify(e);
+                createErrorToast(toast, e);
-
-                toast({
-                    title: "Error",
-                    description,
-                    status: "error",
-                    duration: 9000,
-                    isClosable: true,
-                });
             }
         },
     });
@@ -122,15 +115,7 @@ export default function App() {
             try {
                 await postCfdOrderRequest(payload as CfdOrderRequestPayload);
             } catch (e) {
-                const description = typeof e === "string" ? e : JSON.stringify(e);
+                createErrorToast(toast, e);
-
-                toast({
-                    title: "Error",
-                    description,
-                    status: "error",
-                    duration: 9000,
-                    isClosable: true,
-                });
             }
         },
     });