diff --git a/frontend/components/SyncButton.tsx b/frontend/components/SyncButton.tsx
new file mode 100644
index 000000000..111514bd1
--- /dev/null
+++ b/frontend/components/SyncButton.tsx
@@ -0,0 +1,43 @@
+import {styled} from "@mui/styles";
+import React, {useEffect, useState} from "react";
+import {querySyncStatus, SyncStatus, triggerSync} from "../api/bbgo";
+import useInterval from "../hooks/useInterval";
+
+const ToolbarButton = styled('button')(({ theme }) => ({
+ padding: theme.spacing(1),
+}));
+
+export default function SyncButton() {
+ const [syncing, setSyncing] = useState(false);
+
+ const sync = async () => {
+ try {
+ setSyncing(true);
+ await triggerSync();
+ } catch {
+ setSyncing(false);
+ }
+ };
+
+ useEffect(() => {
+ sync();
+ }, [])
+
+ useInterval(() => {
+ querySyncStatus().then(s => {
+ if (s !== SyncStatus.Syncing) {
+ setSyncing(false);
+ }
+ })
+ }, 2000)
+
+ return (
+
+ {syncing ? 'Syncing...' : 'Sync'}
+
+ );
+}
+
diff --git a/frontend/layouts/DashboardLayout.js b/frontend/layouts/DashboardLayout.js
index aab05b3d9..1f9ffd8f0 100644
--- a/frontend/layouts/DashboardLayout.js
+++ b/frontend/layouts/DashboardLayout.js
@@ -1,17 +1,16 @@
import React from 'react';
-import { makeStyles, styled } from '@mui/styles';
+import { makeStyles } from '@mui/styles';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import SideBar from '../components/SideBar';
+import SyncButton from '../components/SyncButton';
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: {
@@ -33,18 +32,6 @@ const useStyles = makeStyles((theme) => ({
},
}));
-const ToolbarButton = styled('button')(({ theme }) => ({
- padding: theme.spacing(1),
-}));
-
-function SyncButton() {
- const handleClick = throttle(async () => {
- await triggerSync();
- }, 2000);
-
- return Sync;
-}
-
export default function DashboardLayout({ children }) {
const classes = useStyles();
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
index dde8fbef1..78178c801 100644
--- a/frontend/pages/_app.tsx
+++ b/frontend/pages/_app.tsx
@@ -7,7 +7,6 @@ import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../src/theme';
import '../styles/globals.css';
-import { triggerSync } from '../api/bbgo';
export default function MyApp(props) {
const { Component, pageProps } = props;
@@ -20,10 +19,6 @@ export default function MyApp(props) {
}
}, []);
- useEffect(() => {
- triggerSync();
- }, []);
-
return (