-
Notifications
You must be signed in to change notification settings - Fork 91
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add select token drawer, header improvements
- Loading branch information
Showing
14 changed files
with
745 additions
and
601 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import { | ||
| ArrowBack as ArrowBackIcon, | ||
| Tune as TuneIcon, | ||
| } from '@mui/icons-material'; | ||
| import { Collapse, IconButton, Typography } from '@mui/material'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { useLocation, useNavigate } from 'react-router-dom'; | ||
| import { routes } from '../utils/routes'; | ||
| import { Header } from './Header'; | ||
|
|
||
| const routesWithBack = [routes.settings, routes.selectToken]; | ||
|
|
||
| export const NavigationHeader: React.FC = () => { | ||
| const { t } = useTranslation(); | ||
| const location = useLocation(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const handleSettings = () => { | ||
| navigate(routes.settings, { replace: true }); | ||
| }; | ||
|
|
||
| const handleBack = () => { | ||
| navigate(routes.home, { replace: true }); | ||
| }; | ||
|
|
||
| const handleHeaderTitle = () => { | ||
| switch (location.pathname) { | ||
| case routes.settings: | ||
| return t(`swap.header.settings`); | ||
| case routes.selectToken: | ||
| return t(`swap.header.iWouldLikeToSwap`); | ||
| default: | ||
| return t(`swap.header.swap`); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Header> | ||
| <Collapse | ||
| collapsedSize={0} | ||
| orientation="horizontal" | ||
| in={routesWithBack.includes(location.pathname)} | ||
| > | ||
| <IconButton | ||
| size="large" | ||
| aria-label="settings" | ||
| color="inherit" | ||
| edge="start" | ||
| onClick={handleBack} | ||
| > | ||
| <ArrowBackIcon /> | ||
| </IconButton> | ||
| </Collapse> | ||
| <Typography variant="h6" noWrap sx={{ flexGrow: 1 }}> | ||
| {handleHeaderTitle()} | ||
| </Typography> | ||
| {location.pathname === '/' && ( | ||
| <IconButton | ||
| size="large" | ||
| aria-label="settings" | ||
| color="inherit" | ||
| edge="end" | ||
| onClick={handleSettings} | ||
| > | ||
| <TuneIcon /> | ||
| </IconButton> | ||
| )} | ||
| </Header> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import { Inbox as InboxIcon } from '@mui/icons-material'; | ||
| import { | ||
| Box, | ||
| Divider, | ||
| Drawer, | ||
| DrawerProps, | ||
| List, | ||
| ListItem, | ||
| ListItemIcon, | ||
| ListItemText | ||
| } from '@mui/material'; | ||
| import { | ||
| forwardRef, | ||
| RefObject, | ||
| useCallback, | ||
| useEffect, | ||
| useImperativeHandle, | ||
| useState | ||
| } from 'react'; | ||
| import { useMatch, useNavigate } from 'react-router-dom'; | ||
| import { routes } from '../utils/routes'; | ||
|
|
||
| export type SelectTokenDrawerProps = DrawerProps & { | ||
| tokens?: string[]; | ||
| containerRef: RefObject<Element>; | ||
| }; | ||
|
|
||
| export interface SelectTokenDrawerBase { | ||
| openDrawer(): void; | ||
| closeDrawer(): void; | ||
| } | ||
|
|
||
| export const SelectTokenDrawer = forwardRef< | ||
| SelectTokenDrawerBase, | ||
| SelectTokenDrawerProps | ||
| >(({ tokens, containerRef }, ref) => { | ||
| const navigate = useNavigate(); | ||
| const [open, setOpen] = useState(false); | ||
| const homeMatch = useMatch(routes.home); | ||
|
|
||
| const openDrawer = useCallback(() => { | ||
| navigate(routes.selectToken, { replace: true }); | ||
| setOpen(true); | ||
| }, [navigate]); | ||
|
|
||
| const closeDrawer = useCallback(() => { | ||
| setOpen(false); | ||
| navigate(routes.home, { replace: true }); | ||
| }, [navigate]); | ||
|
|
||
| useImperativeHandle( | ||
| ref, | ||
| () => ({ | ||
| openDrawer, | ||
| closeDrawer, | ||
| }), | ||
| [closeDrawer, openDrawer], | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (homeMatch && open) { | ||
| setOpen(false); | ||
| } | ||
| }, [homeMatch, open]); | ||
|
|
||
| const list = () => ( | ||
| <Box role="presentation" onClick={closeDrawer} onKeyDown={closeDrawer}> | ||
| <List> | ||
| <ListItem button> | ||
| <ListItemIcon> | ||
| <InboxIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary={'Test'} /> | ||
| </ListItem> | ||
| </List> | ||
| <Divider /> | ||
| <List> | ||
| <ListItem button> | ||
| <ListItemIcon> | ||
| <InboxIcon /> | ||
| </ListItemIcon> | ||
| <ListItemText primary={'Test'} /> | ||
| </ListItem> | ||
| </List> | ||
| </Box> | ||
| ); | ||
|
|
||
| return ( | ||
| <Drawer | ||
| container={containerRef.current} | ||
| anchor="right" | ||
| open={open} | ||
| onClose={closeDrawer} | ||
| ModalProps={{ | ||
| sx: { position: 'absolute' }, | ||
| // keepMounted: true, | ||
| }} | ||
| PaperProps={{ | ||
| sx: { | ||
| position: 'absolute', | ||
| width: '85%', | ||
| }, | ||
| }} | ||
| BackdropProps={{ | ||
| sx: { | ||
| position: 'absolute', | ||
| backgroundColor: 'rgba(0,0,0,0.12)', | ||
| backdropFilter: 'blur(3px)', | ||
| }, | ||
| }} | ||
| SlideProps={{ container: containerRef.current }} | ||
| > | ||
| {list()} | ||
| </Drawer> | ||
| ); | ||
| }); |
Oops, something went wrong.