Skip to content

Commit 6350937

Browse files
foodakafoodaka
authored
feat: rework dashboard and market flow (#2548)
1 parent 3075fe7 commit 6350937

10 files changed

Lines changed: 99 additions & 82 deletions

File tree

‎pages/404.page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ export default function Aave404Page() {
4141
<Typography sx={{ mt: 3, mb: 5, maxWidth: 480 }}>
4242
<Trans>Sorry, we couldn&apos;t find the page you were looking for.</Trans>
4343
<br />
44-
<Trans>We suggest you go back to the Dashboard.</Trans>
44+
<Trans>We suggest you go back to the home page.</Trans>
4545
</Typography>
4646
<Link href="/" passHref>
4747
<Button variant="outlined" color="primary">
48-
<Trans>Back to Dashboard</Trans>
48+
<Trans>Back home</Trans>
4949
</Button>
5050
</Link>
5151
</Paper>

‎pages/dashboard.page.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
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+
import { MainLayout } from '../src/layouts/MainLayout';
12+
import { useWeb3Context } from '../src/libs/hooks/useWeb3Context';
13+
import { DashboardContentWrapper } from '../src/modules/dashboard/DashboardContentWrapper';
14+
import { DashboardTopPanel } from '../src/modules/dashboard/DashboardTopPanel';
15+
16+
export default function Dashboard() {
17+
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+
24+
useEffect(() => {
25+
trackEvent('Page Viewed', {
26+
'Page Name': 'Dashboard',
27+
Market: currentMarket,
28+
});
29+
}, [trackEvent]);
30+
31+
return (
32+
<>
33+
<DashboardTopPanel />
34+
35+
<ContentContainer>
36+
{currentAccount && (
37+
<Box
38+
sx={{
39+
display: { xs: 'flex', lg: 'none' },
40+
justifyContent: { xs: 'center', xsm: 'flex-start' },
41+
mb: { xs: 3, xsm: 4 },
42+
}}
43+
>
44+
<StyledToggleButtonGroup
45+
color="primary"
46+
value={mode}
47+
exclusive
48+
onChange={(_, value) => setMode(value)}
49+
sx={{ width: { xs: '100%', xsm: '359px' }, height: '44px' }}
50+
>
51+
<StyledToggleButton value="supply" disabled={mode === 'supply'}>
52+
<Typography variant="subheader1">
53+
<Trans>Supply</Trans>
54+
</Typography>
55+
</StyledToggleButton>
56+
<StyledToggleButton value="borrow" disabled={mode === 'borrow'}>
57+
<Typography variant="subheader1">
58+
<Trans>Borrow</Trans>
59+
</Typography>
60+
</StyledToggleButton>
61+
</StyledToggleButtonGroup>
62+
</Box>
63+
)}
64+
65+
{currentAccount ? (
66+
<DashboardContentWrapper isBorrow={mode === 'borrow'} />
67+
) : (
68+
<ConnectWalletPaper />
69+
)}
70+
</ContentContainer>
71+
</>
72+
);
73+
}
74+
75+
Dashboard.getLayout = function getLayout(page: React.ReactElement) {
76+
return <MainLayout>{page}</MainLayout>;
77+
};

‎pages/index.page.tsx‎

Lines changed: 4 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,13 @@
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';
111
import { MainLayout } from '../src/layouts/MainLayout';
122
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';
155

166
export default function Home() {
177
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-
)}
638

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 />;
7211
}
7312

7413
Home.getLayout = function getLayout(page: React.ReactElement) {

‎pages/markets.page.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default function Markets() {
4545
'Page Name': 'Markets',
4646
});
4747
}, [trackEvent]);
48+
4849
return (
4950
<>
5051
<MarketsTopPanel />

‎src/components/primitives/Link.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link
121121
});
122122

123123
export const ROUTES = {
124-
dashboard: '/',
124+
dashboard: '/dashboard',
125125
markets: '/markets',
126126
staking: '/staking',
127127
governance: '/governance',

‎src/locales/el/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/en/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/en/messages.po‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,10 @@ msgstr "User did not borrow the specified currency"
119119
msgid "There is not enough liquidity for the target asset to perform the switch. Try lowering the amount."
120120
msgstr "There is not enough liquidity for the target asset to perform the switch. Try lowering the amount."
121121

122+
#: pages/404.page.tsx
123+
msgid "We suggest you go back to the home page."
124+
msgstr "We suggest you go back to the home page."
125+
122126
#: src/modules/history/HistoryFilterMenu.tsx
123127
msgid "Rate change"
124128
msgstr "Rate change"
@@ -1720,7 +1724,7 @@ msgstr "Can't validate the wallet address. Try again."
17201724
msgid "GHO balance"
17211725
msgstr "GHO balance"
17221726

1723-
#: pages/index.page.tsx
1727+
#: pages/dashboard.page.tsx
17241728
#: src/components/transactions/Borrow/BorrowModal.tsx
17251729
#: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListItem.tsx
17261730
#: src/modules/dashboard/lists/BorrowAssetsList/BorrowAssetsListMobileItem.tsx
@@ -1875,10 +1879,6 @@ msgstr "Nothing supplied yet"
18751879
msgid "Voting"
18761880
msgstr "Voting"
18771881

1878-
#: pages/404.page.tsx
1879-
msgid "Back to Dashboard"
1880-
msgstr "Back to Dashboard"
1881-
18821882
#: src/modules/reserve-overview/SupplyInfo.tsx
18831883
msgid "Unbacked"
18841884
msgstr "Unbacked"
@@ -2156,7 +2156,7 @@ msgstr "This is a program initiated and implemented by the Aave Chan Initiative
21562156
msgid "supply"
21572157
msgstr "supply"
21582158

2159-
#: pages/index.page.tsx
2159+
#: pages/dashboard.page.tsx
21602160
#: src/components/transactions/Supply/SupplyModal.tsx
21612161
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListItem.tsx
21622162
#: src/modules/dashboard/lists/SuppliedPositionsList/SuppliedPositionsListMobileItem.tsx
@@ -2868,10 +2868,6 @@ msgstr "Migrating multiple collaterals and borrowed assets at the same time can
28682868
msgid "Proposition"
28692869
msgstr "Proposition"
28702870

2871-
#: pages/404.page.tsx
2872-
msgid "We suggest you go back to the Dashboard."
2873-
msgstr "We suggest you go back to the Dashboard."
2874-
28752871
#: src/modules/governance/FormattedProposalTime.tsx
28762872
msgid "Can be executed"
28772873
msgstr "Can be executed"
@@ -3594,6 +3590,10 @@ msgstr "The app is running in fork mode."
35943590
msgid "There are not enough funds in the{0}reserve to borrow"
35953591
msgstr "There are not enough funds in the{0}reserve to borrow"
35963592

3593+
#: pages/404.page.tsx
3594+
msgid "Back home"
3595+
msgstr "Back home"
3596+
35973597
#: src/components/transactions/FlowCommons/Error.tsx
35983598
#: src/components/transactions/FlowCommons/PermissionView.tsx
35993599
msgid "Close"

‎src/locales/es/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/fr/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)