lychiyu/bbgo_origin
1
0
Fork 0
mirror of https://github.com/c9s/bbgo.git synced 2024-11-21 22:43:52 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

modify frontend

Browse Source
This commit is contained in:
Austin 2021-10-26 02:02:29 +08:00
parent b8e5942f1c
commit e25afc47f5
11 changed files with 13039 additions and 2412 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
config/support.yaml
View File

@ -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

0
deploy.sh Normal file → Executable file
View File

131
frontend/components/ConnectWallet.js Normal file
View File

@ -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>
)
}

10
frontend/components/SideBar.js
View File

@ -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>

10
frontend/layouts/DashboardLayout.js
View File

@ -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>

9954
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

3
frontend/package.json
View File

@ -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",

104
frontend/pages/_app.tsx
View File

@ -73,58 +73,58 @@ export default function MyApp(props) {
}, []);
return (
<React.Fragment>
<Head>
<title>BBGO</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline/>
{
loading ? (syncing ? (
<React.Fragment>
<Dialog
open={syncing}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Syncing Trades"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
The environment is syncing trades from the exchange sessions.
Please wait a moment...
</DialogContentText>
<Box m={2}>
<LinearProgress/>
</Box>
</DialogContent>
</Dialog>
</React.Fragment>
) : (
<React.Fragment>
<Dialog
open={loading}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Loading"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Loading...
</DialogContentText>
<Box m={2}>
<LinearProgress/>
</Box>
</DialogContent>
</Dialog>
</React.Fragment>
)) : (
<Component {...pageProps}/>
)
}
</ThemeProvider>
</React.Fragment>
<React.Fragment>
<Head>
<title>BBGO</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
</Head>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline/>
{
loading ? (syncing ? (
<React.Fragment>
<Dialog
open={syncing}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Syncing Trades"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
The environment is syncing trades from the exchange sessions.
Please wait a moment...
</DialogContentText>
<Box m={2}>
<LinearProgress/>
</Box>
</DialogContent>
</Dialog>
</React.Fragment>
) : (
<React.Fragment>
<Dialog
open={loading}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Loading"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Loading...
</DialogContentText>
<Box m={2}>
<LinearProgress/>
</Box>
</DialogContent>
</Dialog>
</React.Fragment>
)) : (
<Component {...pageProps}/>
)
}
</ThemeProvider>
</React.Fragment>
);
}

60
frontend/pages/index.tsx
View File

@ -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,34 +79,37 @@ export default function Home() {
console.log("index: assets", assets)
return (
<DashboardLayout>
<Paper className={classes.totalAssetsSummary}>
<Typography variant="h4" gutterBottom>
Total Assets
</Typography>
<DAppProvider config={config}>
<DashboardLayout>
<Paper className={classes.totalAssetsSummary}>
<Typography variant="h4" gutterBottom>
Total Assets
</Typography>
<div className={classes.grid}>
<Grid container
direction="row"
justify="space-around"
alignItems="flex-start"
spacing={1}>
<Grid item xs={12} md={8}>
<TotalAssetSummary assets={assets}/>
<TotalAssetsPie assets={assets}/>
<div className={classes.grid}>
<Grid container
direction="row"
justify="space-around"
alignItems="flex-start"
spacing={1}>
<Grid item xs={12} md={8}>
<TotalAssetSummary assets={assets}/>
<TotalAssetsPie assets={assets}/>
</Grid>
<Grid item xs={12} md={4}>
<TotalAssetDetails assets={assets}/>
</Grid>
</Grid>
</div>
</Paper>
<Grid item xs={12} md={4}>
<TotalAssetDetails assets={assets}/>
</Grid>
</Grid>
</div>
</Paper>
<TradingVolumePanel/>
<TradingVolumePanel/>
<ExchangeSessionTabPanel/>
</DashboardLayout>
</DAppProvider>
<ExchangeSessionTabPanel/>
</DashboardLayout>
);
}

4
frontend/src/theme.js
View File

@ -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',

5167
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff