modify frontend

config/support.yaml

@@ -18,8 +18,10 @@ notifications:
     pnL: "bbgo-pnl"
 
 sessions:
-  binance:
-    exchange: binance
+  #  binance:
+  #  exchange: binance
+  max:
+    exchange: max
 
 riskControls:
   # This is the session-based risk controller, which let you configure different risk controller by session.
@@ -52,7 +54,7 @@ backtest:
 
 exchangeStrategies:
 
-- on: binance
+- on: max
   support:
     symbol: LINKUSDT
     interval: 1m

frontend/components/ConnectWallet.js

@@ -0,0 +1,131 @@
+import React from "react";
+
+import {makeStyles} from '@material-ui/core/styles';
+
+import Button from '@material-ui/core/Button';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+import ListItemText from "@material-ui/core/ListItemText";
+import PersonIcon from "@material-ui/icons/Person";
+
+import { useEtherBalance, useTokenBalance, useEthers } from '@usedapp/core'
+import { formatEther } from '@ethersproject/units'
+
+
+
+const useStyles = makeStyles((theme) => ({
+    buttons: {
+        margin: theme.spacing(1),
+        padding: theme.spacing(1),
+    },
+    profile: {
+        margin: theme.spacing(1),
+        padding: theme.spacing(1),
+    }
+}));
+
+const BBG = '0x3Afe98235d680e8d7A52e1458a59D60f45F935C0'
+
+export default function ConnectWallet() {
+
+
+    
+    const classes = useStyles();
+    
+    const { activateBrowserWallet, account } = useEthers()
+    const etherBalance = useEtherBalance(account)
+    const tokenBalance = useTokenBalance(BBG, account)
+
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+  
+    const handleToggle = () => {
+      setOpen((prevOpen) => !prevOpen);
+    };
+  
+    const handleClose = (event) => {
+      if (anchorRef.current && anchorRef.current.contains(event.target)) {
+        return;
+      }
+  
+      setOpen(false);
+    };
+  
+    function handleListKeyDown(event) {
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        setOpen(false);
+      } else if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    }
+  
+    // return focus to the button when we transitioned from !open -> open
+    const prevOpen = React.useRef(open);
+    React.useEffect(() => {
+      if (prevOpen.current === true && open === false) {
+        anchorRef.current.focus();
+      }
+  
+      prevOpen.current = open;
+    }, [open]);
+
+    return (
+    <div>
+        {account?
+        (<div>
+        <Button
+          ref={anchorRef}
+          id="composition-button"
+          aria-controls={open ? 'composition-menu' : undefined}
+          aria-expanded={open ? 'true' : undefined}
+          aria-haspopup="true"
+          onClick={handleToggle}
+        >
+            <PersonIcon/>
+            <ListItemText primary="Profile"/>
+        </Button>
+        <Popper
+          open={open}
+          anchorEl={anchorRef.current}
+          role={undefined}
+          placement="bottom-start"
+          transition
+          disablePortal
+        >
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{
+                transformOrigin:
+                  placement === 'bottom-start' ? 'left top' : 'left bottom',
+              }}
+            >
+              <Paper>
+                <ClickAwayListener onClickAway={handleClose}>
+                  <MenuList
+                    autoFocusItem={open}
+                    id="composition-menu"
+                    aria-labelledby="composition-button"
+                    onKeyDown={handleListKeyDown}
+                  >
+                    <MenuItem onClick={handleClose}>{account && <p>Account: {account}</p>}</MenuItem>
+                    <MenuItem onClick={handleClose}>{etherBalance && <a>ETH Balance: {formatEther(etherBalance)}</a>}</MenuItem>
+                    <MenuItem onClick={handleClose}>{tokenBalance && <a>BBG Balance: {formatEther(tokenBalance)}</a>}</MenuItem>
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+        </div>):(<div>
+          <button onClick={() => activateBrowserWallet()} className={classes.buttons}>Connect Wallet</button>
+        </div>)}
+      </div>
+    )
+
+}

frontend/components/SideBar.js

@@ -8,6 +8,7 @@ import DashboardIcon from "@material-ui/icons/Dashboard";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListIcon from "@material-ui/icons/List";
 import TrendingUpIcon from "@material-ui/icons/TrendingUp";
+import PersonIcon from "@material-ui/icons/Person";
 import React from "react";
 import {makeStyles} from "@material-ui/core/styles";
 
@@ -96,6 +97,15 @@ export default function SideBar() {
                 <ListItemText primary="Strategies"/>
             </ListItem>
         </List>
+        {/* <Divider/>
+        <List>
+            <ListItem button>
+                <ListItemIcon>
+                    <PersonIcon/>
+                </ListItemIcon>
+                <ListItemText primary="Wallet"/>
+            </ListItem>
+        </List> */}
     </Drawer>
 
 

frontend/layouts/DashboardLayout.js

@@ -8,6 +8,8 @@ import Container from '@material-ui/core/Container';
 
 import SideBar from "../components/SideBar";
 
+import ConnectWallet from '../components/ConnectWallet';
+
 const useStyles = makeStyles((theme) => ({
     root: {
         flexGrow: 1,
@@ -22,7 +24,10 @@ const useStyles = makeStyles((theme) => ({
         zIndex: theme.zIndex.drawer + 1,
     },
     appBarSpacer: theme.mixins.toolbar,
-    container: { }
+    container: { },
+    toolbar:{
+        justifyContent: 'space-between',
+    }
 }));
 
 export default function DashboardLayout({children}) {
@@ -31,11 +36,12 @@ export default function DashboardLayout({children}) {
     return (
         <div className={classes.root}>
             <AppBar className={classes.appBar}>
-                <Toolbar>
+                <Toolbar className={classes.toolbar}>
                     <Typography variant="h6" className={classes.title}>
                         BBGO
                     </Typography>
                     {/* <Button color="inherit">Login</Button> */}
+                    <ConnectWallet />
                 </Toolbar>
             </AppBar>
 

frontend/package.json

@@ -23,7 +23,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-number-format": "^4.4.4",
-    "react-spring": "^9.3.0"
+    "react-spring": "^9.3.0",
+    "@usedapp/core": "0.5.4"
   },
   "devDependencies": {
     "@types/node": "^14.14.22",

frontend/pages/index.tsx

@@ -18,6 +18,9 @@ import DashboardLayout from '../layouts/DashboardLayout';
 
 import {queryAssets, querySessions} from "../api/bbgo";
 
+import { ChainId, Config, DAppProvider } from '@usedapp/core';
+
+
 const useStyles = makeStyles((theme) => ({
     totalAssetsSummary: {
         margin: theme.spacing(2),
@@ -32,6 +35,14 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 
+const config: Config = {
+    readOnlyChainId: ChainId.Mainnet,
+    readOnlyUrls: {
+      [ChainId.Mainnet]: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161',
+    },
+  }
+
+
 // props are pageProps passed from _app.tsx
 export default function Home() {
     const classes = useStyles();
@@ -68,6 +79,7 @@ export default function Home() {
     console.log("index: assets", assets)
 
     return (
+        <DAppProvider config={config}>
             <DashboardLayout>
                 <Paper className={classes.totalAssetsSummary}>
                     <Typography variant="h4" gutterBottom>
@@ -96,6 +108,8 @@ export default function Home() {
 
                 <ExchangeSessionTabPanel/>
             </DashboardLayout>
+        </DAppProvider>
+
     );
 }
 

frontend/src/theme.js

@@ -1,8 +1,8 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
 import { red } from '@material-ui/core/colors';
 
 // Create a theme instance.
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
       main: '#eb9534',