-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add the option to bookmark the current CSV content and to load previously bookmarked files. Bookmarks are stored by chainId and the user can give a name to each of the transfers. Bookmarks also get persisted into local storage such that they are persisted between page loads.
- Loading branch information
Showing
15 changed files
with
629 additions
and
48 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
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,93 @@ | ||
| import { BookmarkAdd } from "@mui/icons-material"; | ||
| import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, Typography } from "@mui/material"; | ||
| import { useState } from "react"; | ||
| import { useSelector } from "react-redux"; | ||
| import { useCsvContent } from "src/hooks/useCsvContent"; | ||
| import { useCurrentChain } from "src/hooks/useCurrentChain"; | ||
| import { addBookmark } from "src/stores/slices/bookmarkSlice"; | ||
| import { setMessages } from "src/stores/slices/messageSlice"; | ||
| import { RootState, useAppDispatch } from "src/stores/store"; | ||
|
|
||
| import { SquareButton } from "../common/SquareButton"; | ||
|
|
||
| const AddBookmarkModal = ({ open, onClose }: { open: boolean; onClose: () => void }) => { | ||
| const currentContent = useCsvContent(); | ||
| const dispatch = useAppDispatch(); | ||
| const currentChain = useCurrentChain(); | ||
| const [name, setName] = useState(""); | ||
| const { transfers } = useSelector((state: RootState) => state.csvEditor); | ||
|
|
||
| const onSubmit = () => { | ||
| if (!currentChain) { | ||
| return; | ||
| } | ||
| dispatch( | ||
| addBookmark({ | ||
| chainId: currentChain.chainID.toString(), | ||
| name: name, | ||
| csvContent: currentContent, | ||
| transfers: transfers.length, | ||
| }), | ||
| ); | ||
| dispatch( | ||
| setMessages([ | ||
| { | ||
| message: "Successfully stored transfer", | ||
| severity: "success", | ||
| }, | ||
| ]), | ||
| ); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <Dialog fullWidth open={open} onClose={onClose}> | ||
| <DialogTitle>Add new bookmark</DialogTitle> | ||
| <DialogContent> | ||
| <Typography> | ||
| This action lets you choose a name for the current CSV content and store it to reuse the same transfer data | ||
| later. | ||
| </Typography> | ||
|
|
||
| <Typography mt={2} variant="h6" fontWeight={700}> | ||
| Preview: | ||
| </Typography> | ||
| <Box | ||
| sx={{ | ||
| overflow: "auto", | ||
| width: "100%", | ||
| padding: 1, | ||
| backgroundColor: ({ palette }) => palette.background.main, | ||
| borderRadius: "6px", | ||
| border: ({ palette }) => `1px solid ${palette.border.main}`, | ||
| }} | ||
| > | ||
| <pre>{currentContent}</pre> | ||
| </Box> | ||
| <TextField | ||
| sx={{ mt: 3 }} | ||
| name="name" | ||
| label="Name" | ||
| value={name} | ||
| onChange={(event) => setName(event.target.value)} | ||
| /> | ||
| </DialogContent> | ||
| <DialogActions sx={{ p: 3 }}> | ||
| <Button variant="contained" onClick={onSubmit}> | ||
| Submit | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export const AddBookmark = () => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <> | ||
| <SquareButton icon={<BookmarkAdd />} title="Save to bookmark library" onClick={() => setOpen(true)} /> | ||
| <AddBookmarkModal open={open} onClose={() => setOpen(false)} /> | ||
| </> | ||
| ); | ||
| }; |
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,147 @@ | ||
| import { Bookmarks } from "@mui/icons-material"; | ||
| import { | ||
| Dialog, | ||
| DialogTitle, | ||
| DialogContent, | ||
| Typography, | ||
| Box, | ||
| DialogActions, | ||
| Button, | ||
| Select, | ||
| FormControl, | ||
| InputLabel, | ||
| MenuItem, | ||
| } from "@mui/material"; | ||
| import { useState } from "react"; | ||
| import { useCurrentChain } from "src/hooks/useCurrentChain"; | ||
| import { selectBookmarksByChain, setBookmarksByChain } from "src/stores/slices/bookmarkSlice"; | ||
| import { updateCsvContent } from "src/stores/slices/csvEditorSlice"; | ||
| import { setMessages } from "src/stores/slices/messageSlice"; | ||
| import { useAppDispatch, RootState, useAppSelector } from "src/stores/store"; | ||
|
|
||
| import { SquareButton } from "../common/SquareButton"; | ||
|
|
||
| const LoadBookmarkModal = ({ open, onClose }: { open: boolean; onClose: () => void }) => { | ||
| const dispatch = useAppDispatch(); | ||
| const currentChain = useCurrentChain(); | ||
| const bookmarks = useAppSelector((state: RootState) => | ||
| selectBookmarksByChain(state, currentChain?.chainID.toString() ?? "-1"), | ||
| ); | ||
|
|
||
| const [selectedIdx, setSelectedIdx] = useState(0); | ||
|
|
||
| const isDisabled = !bookmarks || bookmarks.length === 0; | ||
|
|
||
| const onLoad = () => { | ||
| if (!bookmarks || !bookmarks[selectedIdx]) { | ||
| return; | ||
| } | ||
|
|
||
| dispatch(updateCsvContent({ csvContent: bookmarks[selectedIdx].csvContent })); | ||
|
|
||
| dispatch( | ||
| setMessages([ | ||
| { | ||
| message: "Successfully loaded transfer from library", | ||
| severity: "success", | ||
| }, | ||
| ]), | ||
| ); | ||
| onClose(); | ||
| }; | ||
|
|
||
| const onDelete = () => { | ||
| if (!bookmarks || !bookmarks[selectedIdx] || !currentChain) { | ||
| return; | ||
| } | ||
|
|
||
| const updatedBookmarks = bookmarks.slice(0, selectedIdx).concat(bookmarks.slice(selectedIdx + 1)); | ||
| dispatch( | ||
| setBookmarksByChain({ | ||
| bookmarks: updatedBookmarks, | ||
| chainId: currentChain.chainID.toString(), | ||
| }), | ||
| ); | ||
| dispatch( | ||
| setMessages([ | ||
| { | ||
| message: "Successfully loaded transfer from library", | ||
| severity: "success", | ||
| }, | ||
| ]), | ||
| ); | ||
| setSelectedIdx(0); | ||
| }; | ||
|
|
||
| return ( | ||
| <Dialog fullWidth open={open} onClose={onClose}> | ||
| <DialogTitle>Load bookmarked file</DialogTitle> | ||
| <DialogContent> | ||
| <Typography mb={3}>Select one of your stored transfers and restore it.</Typography> | ||
|
|
||
| {bookmarks && bookmarks.length > 0 ? ( | ||
| <> | ||
| <FormControl fullWidth> | ||
| <InputLabel id="library-item-select">Select Bookmark</InputLabel> | ||
| <Select | ||
| labelId="library-item-select" | ||
| id="library-item" | ||
| value={selectedIdx} | ||
| fullWidth | ||
| label="Select Bookmark" | ||
| variant="outlined" | ||
| onChange={(event) => setSelectedIdx(Number(event.target.value))} | ||
| > | ||
| {bookmarks?.map((bookmark, bookmarkIdx) => ( | ||
| <MenuItem value={bookmarkIdx}>{bookmark.name}</MenuItem> | ||
| ))} | ||
| </Select> | ||
| </FormControl> | ||
|
|
||
| <Typography mt={2} variant="h6" fontWeight={700}> | ||
| Preview: | ||
| </Typography> | ||
| <Box | ||
| sx={{ | ||
| overflow: "auto", | ||
| width: "100%", | ||
| padding: 1, | ||
| backgroundColor: ({ palette }) => palette.background.main, | ||
| borderRadius: "6px", | ||
| border: ({ palette }) => `1px solid ${palette.border.main}`, | ||
| }} | ||
| > | ||
| <pre>{bookmarks?.[selectedIdx]?.csvContent}</pre> | ||
| </Box> | ||
| </> | ||
| ) : ( | ||
| <Typography variant="body2">No bookmarks stored</Typography> | ||
| )} | ||
| </DialogContent> | ||
| <DialogActions sx={{ p: 3 }}> | ||
| <Button variant="contained" onClick={onLoad} disabled={isDisabled}> | ||
| Load Content | ||
| </Button> | ||
| <Button variant="danger" onClick={onDelete} disabled={isDisabled}> | ||
| Delete | ||
| </Button> | ||
| </DialogActions> | ||
| </Dialog> | ||
| ); | ||
| }; | ||
|
|
||
| export const BookmarkLibrary = () => { | ||
| const [open, setOpen] = useState(false); | ||
| return ( | ||
| <> | ||
| <SquareButton | ||
| icon={<Bookmarks />} | ||
| title="Open bookmark library" | ||
| onClick={() => { | ||
| setOpen(true); | ||
| }} | ||
| /> | ||
| <LoadBookmarkModal open={open} onClose={() => setOpen(false)} /> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.