|
1 | | -import { Trans } from '@lingui/macro'; |
2 | | -import { Box, Typography } from '@mui/material'; |
3 | | -import { useEffect, useState } from 'react'; |
4 | | -import StyledToggleButton from 'src/components/StyledToggleButton'; |
5 | | -import StyledToggleButtonGroup from 'src/components/StyledToggleButtonGroup'; |
6 | | -import { useRootStore } from 'src/store/root'; |
7 | | -import { useShallow } from 'zustand/shallow'; |
8 | | - |
9 | | -import { ConnectWalletPaper } from '../src/components/ConnectWalletPaper'; |
10 | | -import { ContentContainer } from '../src/components/ContentContainer'; |
11 | 1 | import { MainLayout } from '../src/layouts/MainLayout'; |
12 | 2 | import { useWeb3Context } from '../src/libs/hooks/useWeb3Context'; |
13 | | -import { DashboardContentWrapper } from '../src/modules/dashboard/DashboardContentWrapper'; |
14 | | -import { DashboardTopPanel } from '../src/modules/dashboard/DashboardTopPanel'; |
| 3 | +import Dashboard from './dashboard.page'; |
| 4 | +import Markets from './markets.page'; |
15 | 5 |
|
16 | 6 | export default function Home() { |
17 | 7 | const { currentAccount } = useWeb3Context(); |
18 | | - const [trackEvent, currentMarket] = useRootStore( |
19 | | - useShallow((store) => [store.trackEvent, store.currentMarket]) |
20 | | - ); |
21 | | - |
22 | | - const [mode, setMode] = useState<'supply' | 'borrow' | ''>('supply'); |
23 | | - useEffect(() => { |
24 | | - trackEvent('Page Viewed', { |
25 | | - 'Page Name': 'Dashboard', |
26 | | - Market: currentMarket, |
27 | | - }); |
28 | | - }, [trackEvent]); |
29 | | - |
30 | | - return ( |
31 | | - <> |
32 | | - <DashboardTopPanel /> |
33 | | - |
34 | | - <ContentContainer> |
35 | | - {currentAccount && ( |
36 | | - <Box |
37 | | - sx={{ |
38 | | - display: { xs: 'flex', lg: 'none' }, |
39 | | - justifyContent: { xs: 'center', xsm: 'flex-start' }, |
40 | | - mb: { xs: 3, xsm: 4 }, |
41 | | - }} |
42 | | - > |
43 | | - <StyledToggleButtonGroup |
44 | | - color="primary" |
45 | | - value={mode} |
46 | | - exclusive |
47 | | - onChange={(_, value) => setMode(value)} |
48 | | - sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }} |
49 | | - > |
50 | | - <StyledToggleButton value="supply" disabled={mode === 'supply'}> |
51 | | - <Typography variant="subheader1"> |
52 | | - <Trans>Supply</Trans> |
53 | | - </Typography> |
54 | | - </StyledToggleButton> |
55 | | - <StyledToggleButton value="borrow" disabled={mode === 'borrow'}> |
56 | | - <Typography variant="subheader1"> |
57 | | - <Trans>Borrow</Trans> |
58 | | - </Typography> |
59 | | - </StyledToggleButton> |
60 | | - </StyledToggleButtonGroup> |
61 | | - </Box> |
62 | | - )} |
63 | 8 |
|
64 | | - {currentAccount ? ( |
65 | | - <DashboardContentWrapper isBorrow={mode === 'borrow'} /> |
66 | | - ) : ( |
67 | | - <ConnectWalletPaper /> |
68 | | - )} |
69 | | - </ContentContainer> |
70 | | - </> |
71 | | - ); |
| 9 | + // Show dashboard if wallet is connected, otherwise show markets |
| 10 | + return currentAccount ? <Dashboard /> : <Markets />; |
72 | 11 | } |
73 | 12 |
|
74 | 13 | Home.getLayout = function getLayout(page: React.ReactElement) { |
|
0 commit comments