run prettier

frontend/api/bbgo.ts

@@ -17,17 +17,17 @@ export function queryOutboundIP(cb) {
 
 export async function triggerSync() {
   return axios.post<any>(baseURL + '/api/environment/sync');
-};
+}
 
 export enum SyncStatus {
   SyncNotStarted = 0,
   Syncing = 1,
-  SyncDone = 2
+  SyncDone = 2,
 }
 
 export async function querySyncStatus(): Promise<SyncStatus> {
-  const resp = await axios.get<any>(baseURL + '/api/environment/syncing')
+  const resp = await axios.get<any>(baseURL + '/api/environment/syncing');
-  return resp.data.syncing
+  return resp.data.syncing;
 }
 
 export function testDatabaseConnection(params, cb) {
@@ -132,29 +132,27 @@ export function queryTradingVolume(params, cb) {
 }
 
 export async function queryStrategiesMetrics() {
-  return (
+  return [
-    [
     {
-        "id":"uuid",
+      id: 'uuid',
-        "instanceID": "testInstanceID",
+      instanceID: 'testInstanceID',
-        "strategy": "grid",
+      strategy: 'grid',
-        "grid": {
+      grid: {
-             "symbol": "BTCUSDT",
+        symbol: 'BTCUSDT',
       },
-        "stats": {
+      stats: {
-          "oneDayArbs": 0,
+        oneDayArbs: 0,
-          "totalArbs": 3,
+        totalArbs: 3,
-          "investment": 100,
+        investment: 100,
-          "totalProfits": 5.6,
+        totalProfits: 5.6,
-          "gridProfits": 2.5,
+        gridProfits: 2.5,
-          "floatingPNL": 3.1, 
+        floatingPNL: 3.1,
-          "currentPrice": 29000,
+        currentPrice: 29000,
-          "lowestPrice": 25000,
+        lowestPrice: 25000,
-          "highestPrice": 35000
+        highestPrice: 35000,
       },
-        "status": "RUNNING",
+      status: 'RUNNING',
-        "startTime": 1654938187102
+      startTime: 1654938187102,
-      }
+    },
-    ]
+  ];
-  )
 }

frontend/components/SideBar.js

@@ -97,7 +97,6 @@ export default function SideBar() {
             <ListItemText primary="Strategies" />
           </ListItem>
         </Link>
-        
       </List>
     </Drawer>
   );

frontend/components/SyncButton.tsx

@@ -1,7 +1,7 @@
-import {styled} from "@mui/styles";
+import { styled } from '@mui/styles';
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from 'react';
-import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo";
+import { querySyncStatus, SyncStatus, triggerSync } from '../api/bbgo';
-import useInterval from "../hooks/useInterval";
+import useInterval from '../hooks/useInterval';
 
 const ToolbarButton = styled('button')(({ theme }) => ({
   padding: theme.spacing(1),
@@ -21,23 +21,19 @@ export default function SyncButton() {
 
   useEffect(() => {
     sync();
-  }, [])
+  }, []);
 
   useInterval(() => {
-    querySyncStatus().then(s => {
+    querySyncStatus().then((s) => {
       if (s !== SyncStatus.Syncing) {
         setSyncing(false);
       }
-    })
+    });
-  }, 2000)
+  }, 2000);
 
   return (
-    <ToolbarButton
+    <ToolbarButton disabled={syncing} onClick={sync}>
-      disabled={syncing}
-      onClick={sync}
-    >
       {syncing ? 'Syncing...' : 'Sync'}
     </ToolbarButton>
   );
 }
-

frontend/hooks/useInterval.ts

@@ -1,11 +1,11 @@
-import {useEffect, useRef} from "react";
+import { useEffect, useRef } from 'react';
 
 export default function useInterval(cb: Function, delayMs: number | null) {
   const savedCallback = useRef<Function>();
 
   useEffect(() => {
-    savedCallback.current = cb
+    savedCallback.current = cb;
-  }, [cb])
+  }, [cb]);
 
   useEffect(() => {
     function tick() {
@@ -13,8 +13,8 @@ export default function useInterval(cb: Function, delayMs: number | null) {
     }
 
     if (delayMs !== null) {
-      let timerId = setInterval(tick, delayMs)
+      let timerId = setInterval(tick, delayMs);
-      return () => clearInterval(timerId)
+      return () => clearInterval(timerId);
     }
-  }, [delayMs])
+  }, [delayMs]);
 }

frontend/pages/strategies.tsx

@@ -11,7 +11,7 @@ const StrategyContainer = styled('section')(() => ({
   height: '400px',
   border: '1px solid rgb(248, 149, 35)',
   borderRadius: '10px',
-  padding: '10px'
+  padding: '10px',
 }));
 
 const Strategy = styled('div')(() => ({
@@ -30,30 +30,28 @@ const StatusSign = styled('span')(() => ({
 const RunningTime = styled('div')(() => ({
   display: 'flex',
   alignItems: 'center',
-}))
+}));
 
 const Description = styled('div')(() => ({
   color: 'rgb(140, 140, 140)',
-  "& .duration": {
+  '& .duration': {
     marginLeft: '3px',
   },
-}))
+}));
 
 const Summary = styled('div')(() => ({
   width: '100%',
   display: 'flex',
   justifyContent: 'space-around',
   backgroundColor: 'rgb(255, 245, 232)',
-}))
+}));
 
 const SummaryBlock = styled('div')(() => ({
-  padding: '5px 0 5px 0'
+  padding: '5px 0 5px 0',
-
 }));
 
 const StatsTitle = styled('div')(() => ({
   margin: '0 0 10px 0',
-
 }));
 
 const StatsValue = styled('div')(() => ({
@@ -69,7 +67,7 @@ const Stats = styled('div')(() => ({
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 1fr',
   columnGap: '10px',
-  rowGap: '20px'
+  rowGap: '20px',
 }));
 
 export default function Strategies() {
@@ -78,35 +76,31 @@ export default function Strategies(){
   useEffect(() => {
     queryStrategiesMetrics().then((value) => {
       setDetails(value);
-    } 
+    });
-    );
+  }, []);
-  },[])
 
   return (
     <DashboardLayout>
       {details.map((element) => {
-        return(
+        return <Detail key={element.id} data={element} />;
-          <Detail key={element.id} data={element}/>
-        )
       })}
     </DashboardLayout>
-
   );
 }
 
 export function Detail({ data }) {
   const { strategy, stats, startTime } = data;
-  const totalProfitsPercentage = stats.totalProfits / stats.investment * 100;
+  const totalProfitsPercentage = (stats.totalProfits / stats.investment) * 100;
-  const gridProfitsPercentage = stats.gridProfits / stats.investment * 100;
+  const gridProfitsPercentage = (stats.gridProfits / stats.investment) * 100;
-  const gridAprPercentage = stats.gridProfits / 5 * 365;
+  const gridAprPercentage = (stats.gridProfits / 5) * 365;
 
   const now = Date.now();
   const durationMilliseconds = now - startTime;
   const seconds = durationMilliseconds / 1000;
 
   const day = Math.floor(seconds / (60 * 60 * 24));
-  const hour = Math.floor(seconds %  (60 * 60 * 24) / 3600);
+  const hour = Math.floor((seconds % (60 * 60 * 24)) / 3600);
-  const min = Math.floor(seconds %  (60 * 60 * 24) % 3600 / 60);
+  const min = Math.floor(((seconds % (60 * 60 * 24)) % 3600) / 60);
 
   return (
     <StrategyContainer>
@@ -122,7 +116,10 @@ export function Detail({data}){
         </Description>
       </RunningTime>
 
-          <Description>0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span> arbitrages</Description>
+      <Description>
+        0 arbitrages in 24 hours / Total <span>{stats.totalArbs}</span>{' '}
+        arbitrages
+      </Description>
 
       <Summary>
         <SummaryBlock>
@@ -161,9 +158,11 @@ export function Detail({data}){
 
         <div>
           <StatsTitle>Price Range</StatsTitle>
-              <div>{stats.lowestPrice}~{stats.highestPrice}</div>
+          <div>
+            {stats.lowestPrice}~{stats.highestPrice}
+          </div>
         </div>
       </Stats>
     </StrategyContainer>
-  )
+  );
 }