lukechilds
/
itchysats
mirror of https://github.com/lukechilds/itchysats.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Remove deprecated taker-ui 

resolves #500
reconnect-to-maker
bonomat 3 years ago
parent
a2e432c706
commit
69590b2fc4
No known key found for this signature in database GPG Key ID: E5F8E74C672BC666
3 changed files with 0 additions and 265 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      maker-frontend/src/TakerApp.test.tsx
  2. 227
      maker-frontend/src/TakerApp.tsx
  3. 21
      maker-frontend/src/taker.tsx

17
maker-frontend/src/TakerApp.test.tsx
View File

@ -1,17 +0,0 @@
import { ChakraProvider } from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom";
import Taker from "./TakerApp";
import theme from "./theme";
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<Taker />
</ChakraProvider>
</React.StrictMode>,
div,
);
});

227
maker-frontend/src/TakerApp.tsx
View File

@ -1,227 +0,0 @@
import {
Box,
Button,
Container,
Divider,
Grid,
GridItem,
HStack,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
useToast,
VStack,
} from "@chakra-ui/react";
import React, { useEffect, useState } from "react";
import { useAsync } from "react-async";
import { useEventSource } from "react-sse-hooks";
import { useBackendMonitor } from "./components/BackendMonitor";
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";
import Wallet from "./components/Wallet";
interface CfdOrderRequestPayload {
order_id: string;
quantity: number;
}
interface MarginRequestPayload {
price: number;
quantity: number;
leverage: number;
}
interface MarginResponse {
margin: number;
}
async function postCfdOrderRequest(payload: CfdOrderRequestPayload) {
let res = await fetch(`/api/cfd/order`, { method: "POST", body: JSON.stringify(payload) });
if (!res.status.toString().startsWith("2")) {
const resp = await res.json();
throw new HttpError(resp);
}
}
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")) {
const resp = await res.json();
throw new HttpError(resp);
}
return res.json();
}
export default function App() {
const toast = useToast();
useBackendMonitor(toast, 5000); // 5s timeout
document.title = "Hermes Taker";
let source = useEventSource({ source: "/api/feed" });
const cfdsOrUndefined = useLatestEvent<Cfd[]>(source, "cfds", intoCfd);
let cfds = cfdsOrUndefined ? cfdsOrUndefined! : [];
const order = useLatestEvent<Order>(source, "order", intoOrder);
const walletInfo = useLatestEvent<WalletInfo>(source, "wallet");
let [quantity, setQuantity] = useState("0");
let [margin, setMargin] = useState("0");
let [userHasEdited, setUserHasEdited] = useState(false);
let effectiveQuantity = userHasEdited ? quantity : (order?.min_quantity.toString() || "0");
let { run: calculateMargin } = useAsync({
deferFn: async ([payload]: any[]) => {
try {
let res = await getMargin(payload as MarginRequestPayload);
setMargin(res.margin.toString());
} catch (e) {
createErrorToast(toast, e);
}
},
});
useEffect(() => {
if (!order) {
return;
}
let quantity = effectiveQuantity ? Number.parseFloat(effectiveQuantity) : 0;
let payload: MarginRequestPayload = {
leverage: order.leverage,
price: order.price,
quantity,
};
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]);
const format = (val: any) => `$` + val;
const parse = (val: any) => val.replace(/^\$/, "");
let { run: makeNewOrderRequest, isLoading: isCreatingNewOrderRequest } = useAsync({
deferFn: async ([payload]: any[]) => {
try {
await postCfdOrderRequest(payload as CfdOrderRequestPayload);
} catch (e) {
createErrorToast(toast, e);
}
},
});
const opening = cfds.filter((value) => value.state.getGroup() === StateGroupKey.OPENING);
const open = cfds.filter((value) => value.state.getGroup() === StateGroupKey.OPEN);
const closed = cfds.filter((value) => value.state.getGroup() === StateGroupKey.CLOSED);
return (
<Container maxWidth="120ch" marginTop="1rem">
<HStack spacing={5}>
<VStack>
<Wallet walletInfo={walletInfo} />
<Grid
gridTemplateColumns="max-content auto"
shadow="md"
padding={5}
rowGap={5}
columnGap={5}
width="100%"
alignItems="center"
>
<Text align={"left"}>Order Price:</Text>
<Text>{order?.price}</Text>
<Text align={"left"}>Available Quantity:</Text>
<Text>
{order ? (format(order?.min_quantity) + "-" + format!(order?.max_quantity)) : "None"}
</Text>
<Text>Quantity:</Text>
<CurrencyInputField
onChange={(valueString: string) => {
setUserHasEdited(true);
setQuantity(parse(valueString));
if (!order) {
return;
}
let quantity = valueString ? Number.parseFloat(valueString) : 0;
let payload: MarginRequestPayload = {
leverage: order.leverage,
price: order.price,
quantity,
};
calculateMargin(payload);
}}
value={format(effectiveQuantity)}
min={order?.min_quantity}
max={order?.max_quantity}
/>
<Text>Margin in BTC:</Text>
<Text>{margin}</Text>
<Text>Leverage:</Text>
<HStack spacing={5}>
<Button disabled={true}>x1</Button>
<Button colorScheme="blue" variant="solid">x{order ? order.leverage : 2}</Button>
<Button disabled={true}>x5</Button>
</HStack>
<GridItem colSpan={2}>
<Divider />
</GridItem>
<GridItem colSpan={2} textAlign="center">
<Button
disabled={isCreatingNewOrderRequest || !order}
variant={"solid"}
colorScheme={"blue"}
width="100%"
onClick={() => {
let payload: CfdOrderRequestPayload = {
order_id: order!.id,
quantity: Number.parseFloat(effectiveQuantity),
};
makeNewOrderRequest(payload);
}}
>
BUY LONG
</Button>
</GridItem>
</Grid>
</VStack>
<Box width="100%" />
</HStack>
<Tabs marginTop={5}>
<TabList>
<Tab>Open [{open.length}]</Tab>
<Tab>Opening [{opening.length}]</Tab>
<Tab>Closed [{closed.length}]</Tab>
</TabList>
<TabPanels>
<TabPanel>
<CfdTable data={open} />
</TabPanel>
<TabPanel>
<CfdTable data={opening} />
</TabPanel>
<TabPanel>
<CfdTable data={closed} />
</TabPanel>
</TabPanels>
</Tabs>
</Container>
);
}

21
maker-frontend/src/taker.tsx
View File

@ -1,21 +0,0 @@
import { ChakraProvider } from "@chakra-ui/react";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { EventSourceProvider } from "react-sse-hooks";
import "./index.css";
import App from "./TakerApp";
import theme from "./theme";
ReactDOM.render(
<React.StrictMode>
<ChakraProvider theme={theme}>
<EventSourceProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</EventSourceProvider>
</ChakraProvider>
</React.StrictMode>,
document.getElementById("root"),
);
Write Preview
Loading…
Cancel
Save