Re-organize frontend modules

1. "Components" refers to React components. "Types" and "HttpError"
are not React components and should thus be moved out.
2. Only components use JSX syntax, other files can/should have a regular
.ts extension.
3. If a file only exports one thing, make it a default export.

taker-frontend/src/App.tsx

@@ -20,6 +20,7 @@ import Footer from "./components/Footer";
 import History from "./components/History";
 import Nav from "./components/NavBar";
 import Trade from "./components/Trade";
+import { Wallet, WalletInfoBar } from "./components/Wallet";
 import {
     BXBTData,
     Cfd,
@@ -31,8 +32,7 @@ import {
     Order,
     StateGroupKey,
     WalletInfo,
-} from "./components/Types";
-import { Wallet, WalletInfoBar } from "./components/Wallet";
+} from "./types";
 import useLatestEvent from "./useLatestEvent";
 import usePostRequest from "./usePostRequest";
 

taker-frontend/src/components/HttpError.tsx → taker-frontend/src/HttpError.ts

@@ -1,6 +1,6 @@
 // A wrapper to parse RFC 7807
 // Pass result of `await response.json()` into the constructor.
-export class HttpError extends Error {
+export default class HttpError extends Error {
     title: string;
     detail?: string;
 

taker-frontend/src/components/ErrorToast.tsx

@@ -1,4 +1,4 @@
-import { HttpError } from "./HttpError";
+import HttpError from "../HttpError";
 
 // A generic way of creating an error toast
 // TODO: Don't use any (`toast: typeof useToast` did not work :( )

taker-frontend/src/components/History.tsx

@@ -28,8 +28,8 @@ import {
     VStack,
 } from "@chakra-ui/react";
 import * as React from "react";
+import { Cfd, StateGroupKey, StateKey, Tx, TxLabel } from "../types";
 import usePostRequest from "../usePostRequest";
-import { Cfd, StateGroupKey, StateKey, Tx, TxLabel } from "./Types";
 
 interface HistoryProps {
     cfds: Cfd[];

taker-frontend/src/components/NavBar.tsx

@@ -17,7 +17,7 @@ import * as React from "react";
 import { useNavigate } from "react-router-dom";
 import logoBlack from "../images/logo_nav_bar_black.svg";
 import logoWhite from "../images/logo_nav_bar_white.svg";
-import { WalletInfo } from "./Types";
+import { WalletInfo } from "../types";
 
 interface NavProps {
     walletInfo: WalletInfo | null;

taker-frontend/src/components/Timestamp.tsx

@@ -1,6 +1,6 @@
 import { Text } from "@chakra-ui/react";
 import React from "react";
-import { unixTimestampToDate } from "./Types";
+import { unixTimestampToDate } from "../types";
 
 interface Props {
     timestamp: number;

taker-frontend/src/components/Trade.tsx

@@ -45,7 +45,7 @@ import {
 } from "@chakra-ui/react";
 import { motion } from "framer-motion";
 import * as React from "react";
-import { CfdOrderRequestPayload } from "./Types";
+import { CfdOrderRequestPayload } from "../types";
 
 const MotionBox = motion<BoxProps>(Box);
 

taker-frontend/src/components/Wallet.tsx

@@ -26,9 +26,9 @@ import {
 import * as React from "react";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { WalletInfo, WithdrawRequest } from "../types";
 import usePostRequest from "../usePostRequest";
 import Timestamp from "./Timestamp";
-import { WalletInfo, WithdrawRequest } from "./Types";
 
 interface WalletProps {
     walletInfo: WalletInfo | null;