bbgo_origin/frontend/pages/index.tsx

116 lines
3.3 KiB
TypeScript
Raw Normal View History

import React, {useState} from 'react';
2021-02-05 01:09:59 +00:00
import {useRouter} from 'next/router';
2021-01-24 10:12:26 +00:00
2021-01-25 08:56:02 +00:00
import {makeStyles} from '@material-ui/core/styles';
2021-01-24 06:32:52 +00:00
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
2021-01-24 10:12:26 +00:00
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
2021-01-24 06:32:52 +00:00
2021-01-25 10:29:31 +00:00
import TotalAssetsPie from '../components/TotalAssetsPie';
import TotalAssetSummary from '../components/TotalAssetsSummary';
import TotalAssetDetails from '../components/TotalAssetsDetails';
2021-01-25 10:29:31 +00:00
2021-01-28 10:51:35 +00:00
import TradingVolumePanel from '../components/TradingVolumePanel';
2021-01-25 10:29:31 +00:00
import ExchangeSessionTabPanel from '../components/ExchangeSessionTabPanel';
2021-01-24 06:07:44 +00:00
2021-02-01 09:13:27 +00:00
import DashboardLayout from '../layouts/DashboardLayout';
import {queryAssets, querySessions} from "../api/bbgo";
2021-10-25 18:02:29 +00:00
import { ChainId, Config, DAppProvider } from '@usedapp/core';
2021-01-24 10:12:26 +00:00
const useStyles = makeStyles((theme) => ({
2021-01-29 04:55:11 +00:00
totalAssetsSummary: {
2021-02-05 01:09:59 +00:00
margin: theme.spacing(2),
2021-01-29 04:55:11 +00:00
padding: theme.spacing(2),
2021-01-26 10:10:08 +00:00
},
grid: {
flexGrow: 1,
},
2021-01-25 08:56:02 +00:00
control: {
padding: theme.spacing(2),
},
2021-01-24 10:12:26 +00:00
}));
2021-10-25 18:02:29 +00:00
const config: Config = {
readOnlyChainId: ChainId.Mainnet,
readOnlyUrls: {
[ChainId.Mainnet]: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161',
},
}
2021-02-01 09:13:27 +00:00
// props are pageProps passed from _app.tsx
export default function Home() {
2021-01-25 08:56:02 +00:00
const classes = useStyles();
2021-02-05 01:09:59 +00:00
const router = useRouter();
const [assets, setAssets] = useState({})
const [sessions, setSessions] = React.useState([])
React.useEffect(() => {
querySessions((sessions) => {
2021-02-04 10:22:47 +00:00
if (sessions && sessions.length > 0) {
setSessions(sessions)
queryAssets(setAssets)
2021-02-04 10:22:47 +00:00
} else {
2021-02-05 01:09:59 +00:00
router.push("/setup");
}
}).catch((err) => {
console.error(err);
})
2021-02-05 01:09:59 +00:00
}, [router])
if (sessions.length == 0) {
return (
<DashboardLayout>
<Box m={4}>
2021-02-05 01:12:38 +00:00
<Typography variant="h4" gutterBottom>
Loading
</Typography>
</Box>
</DashboardLayout>
);
}
2021-01-25 08:56:02 +00:00
console.log("index: assets", assets)
2021-01-25 10:29:31 +00:00
return (
2021-10-25 18:02:29 +00:00
<DAppProvider config={config}>
<DashboardLayout>
<Paper className={classes.totalAssetsSummary}>
<Typography variant="h4" gutterBottom>
Total Assets
</Typography>
2021-10-25 18:02:29 +00:00
<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>
2021-10-25 18:02:29 +00:00
</div>
</Paper>
2021-01-25 08:56:02 +00:00
2021-10-25 18:02:29 +00:00
<TradingVolumePanel/>
<ExchangeSessionTabPanel/>
</DashboardLayout>
</DAppProvider>
2021-01-26 10:10:08 +00:00
2021-01-25 08:56:02 +00:00
);
2021-01-24 06:07:44 +00:00
}
2021-01-24 06:32:52 +00:00