lychiyu/bbgo_origin
1
0
Fork 0
mirror of https://github.com/c9s/bbgo.git synced 2024-11-25 16:25:16 +00:00
Code Issues Actions 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" pnL: "bbgo-pnl"
sessions: sessions:
binance: # binance:
exchange: binance # exchange: binance
max:
exchange: max
riskControls: riskControls:
# This is the session-based risk controller, which let you configure different risk controller by session. # This is the session-based risk controller, which let you configure different risk controller by session.
@ -52,7 +54,7 @@ backtest:
exchangeStrategies: exchangeStrategies:
- on: binance - on: max
support: support:
symbol: LINKUSDT symbol: LINKUSDT
interval: 1m 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 ListItemText from "@material-ui/core/ListItemText";
import ListIcon from "@material-ui/icons/List"; import ListIcon from "@material-ui/icons/List";
import TrendingUpIcon from "@material-ui/icons/TrendingUp"; import TrendingUpIcon from "@material-ui/icons/TrendingUp";
import PersonIcon from "@material-ui/icons/Person";
import React from "react"; import React from "react";
import {makeStyles} from "@material-ui/core/styles"; import {makeStyles} from "@material-ui/core/styles";
@ -96,6 +97,15 @@ export default function SideBar() {
<ListItemText primary="Strategies"/> <ListItemText primary="Strategies"/>
</ListItem> </ListItem>
</List> </List>
{/* <Divider/>
<List>
<ListItem button>
<ListItemIcon>
<PersonIcon/>
</ListItemIcon>
<ListItemText primary="Wallet"/>
</ListItem>
</List> */}
</Drawer> </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 SideBar from "../components/SideBar";
import ConnectWallet from '../components/ConnectWallet';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
flexGrow: 1, flexGrow: 1,
@ -22,7 +24,10 @@ const useStyles = makeStyles((theme) => ({
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
}, },
appBarSpacer: theme.mixins.toolbar, appBarSpacer: theme.mixins.toolbar,
container: { } container: { },
toolbar:{
justifyContent: 'space-between',
}
})); }));
export default function DashboardLayout({children}) { export default function DashboardLayout({children}) {
@ -31,11 +36,12 @@ export default function DashboardLayout({children}) {
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar className={classes.appBar}> <AppBar className={classes.appBar}>
<Toolbar> <Toolbar className={classes.toolbar}>
<Typography variant="h6" className={classes.title}> <Typography variant="h6" className={classes.title}>
BBGO BBGO
</Typography> </Typography>
{/* <Button color="inherit">Login</Button> */} {/* <Button color="inherit">Login</Button> */}
<ConnectWallet />
</Toolbar> </Toolbar>
</AppBar> </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": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-number-format": "^4.4.4", "react-number-format": "^4.4.4",
"react-spring": "^9.3.0" "react-spring": "^9.3.0",
"@usedapp/core": "0.5.4"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^14.14.22", "@types/node": "^14.14.22",

104
frontend/pages/_app.tsx
View File

@ -73,58 +73,58 @@ export default function MyApp(props) {
}, []); }, []);
return ( return (
<React.Fragment> <React.Fragment>
<Head> <Head>
<title>BBGO</title> <title>BBGO</title>
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width"/>
</Head> </Head>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline/> <CssBaseline/>
{ {
loading ? (syncing ? ( loading ? (syncing ? (
<React.Fragment> <React.Fragment>
<Dialog <Dialog
open={syncing} open={syncing}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
<DialogTitle id="alert-dialog-title">{"Syncing Trades"}</DialogTitle> <DialogTitle id="alert-dialog-title">{"Syncing Trades"}</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="alert-dialog-description"> <DialogContentText id="alert-dialog-description">
The environment is syncing trades from the exchange sessions. The environment is syncing trades from the exchange sessions.
Please wait a moment... Please wait a moment...
</DialogContentText> </DialogContentText>
<Box m={2}> <Box m={2}>
<LinearProgress/> <LinearProgress/>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</React.Fragment> </React.Fragment>
) : ( ) : (
<React.Fragment> <React.Fragment>
<Dialog <Dialog
open={loading} open={loading}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
> >
<DialogTitle id="alert-dialog-title">{"Loading"}</DialogTitle> <DialogTitle id="alert-dialog-title">{"Loading"}</DialogTitle>
<DialogContent> <DialogContent>
<DialogContentText id="alert-dialog-description"> <DialogContentText id="alert-dialog-description">
Loading... Loading...
</DialogContentText> </DialogContentText>
<Box m={2}> <Box m={2}>
<LinearProgress/> <LinearProgress/>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</React.Fragment> </React.Fragment>
)) : ( )) : (
<Component {...pageProps}/> <Component {...pageProps}/>
) )
} }
</ThemeProvider> </ThemeProvider>
</React.Fragment> </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 {queryAssets, querySessions} from "../api/bbgo";
import { ChainId, Config, DAppProvider } from '@usedapp/core';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
totalAssetsSummary: { totalAssetsSummary: {
margin: theme.spacing(2), 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 // props are pageProps passed from _app.tsx
export default function Home() { export default function Home() {
const classes = useStyles(); const classes = useStyles();
@ -68,34 +79,37 @@ export default function Home() {
console.log("index: assets", assets) console.log("index: assets", assets)
return ( return (
<DashboardLayout> <DAppProvider config={config}>
<Paper className={classes.totalAssetsSummary}> <DashboardLayout>
<Typography variant="h4" gutterBottom> <Paper className={classes.totalAssetsSummary}>
Total Assets <Typography variant="h4" gutterBottom>
</Typography> Total Assets
</Typography>
<div className={classes.grid}> <div className={classes.grid}>
<Grid container <Grid container
direction="row" direction="row"
justify="space-around" justify="space-around"
alignItems="flex-start" alignItems="flex-start"
spacing={1}> spacing={1}>
<Grid item xs={12} md={8}> <Grid item xs={12} md={8}>
<TotalAssetSummary assets={assets}/> <TotalAssetSummary assets={assets}/>
<TotalAssetsPie assets={assets}/> <TotalAssetsPie assets={assets}/>
</Grid>
<Grid item xs={12} md={4}>
<TotalAssetDetails assets={assets}/>
</Grid>
</Grid> </Grid>
</div>
</Paper>
<Grid item xs={12} md={4}> <TradingVolumePanel/>
<TotalAssetDetails assets={assets}/>
</Grid>
</Grid>
</div>
</Paper>
<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'; import { red } from '@material-ui/core/colors';
// Create a theme instance. // Create a theme instance.
const theme = createMuiTheme({ const theme = createTheme({
palette: { palette: {
primary: { primary: {
main: '#eb9534', main: '#eb9534',

5167
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff