frontend: implement sync button

frontend/api/bbgo.ts

@@ -16,7 +16,7 @@ export function queryOutboundIP(cb) {
 }
 
 const triggerSync = async () => {
-  return axios.get<any>(baseURL + '/api/environment/sync')
+  return axios.post<any>(baseURL + '/api/environment/sync')
 }
 
 export { triggerSync };

frontend/layouts/DashboardLayout.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { makeStyles } from '@mui/styles';
+import { makeStyles, styled } from '@mui/styles';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
@@ -9,6 +9,9 @@ import Container from '@mui/material/Container';
 import SideBar from '../components/SideBar';
 
 import ConnectWallet from '../components/ConnectWallet';
+import { Box } from "@mui/material";
+import {throttle} from "../src/utils";
+import {triggerSync} from "../api/bbgo";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -27,9 +30,28 @@ const useStyles = makeStyles((theme) => ({
   container: {},
   toolbar: {
     justifyContent: 'space-between',
-  },
+  }
 }));
 
+const ToolbarButton = styled('button')(({ theme }) => ({
+    padding: theme.spacing(1)
+  })
+)
+
+function SyncButton() {
+  const handleClick = throttle(async () => {
+    await triggerSync()
+  }, 2000)
+
+  return (
+    <ToolbarButton
+      onClick={handleClick}
+    >
+      Sync
+    </ToolbarButton>
+  );
+}
+
 export default function DashboardLayout({ children }) {
   const classes = useStyles();
 
@@ -40,7 +62,8 @@ export default function DashboardLayout({ children }) {
           <Typography variant="h6" className={classes.title}>
             BBGO
           </Typography>
-          {/* <Button color="inherit">Login</Button> */}
+          <Box sx={{ flexGrow: 1 }} />
+          <SyncButton />
           <ConnectWallet />
         </Toolbar>
       </AppBar>