-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: swap slippage and singleTxOnly options in settings (#38)
* feat: added swap slippage option in the settings modal * refactor: settings modal & sort preference components * feat: singleTxOnly option in settings * chores: removed css flex gap * feat: refetch the active quote on slippage change [major change] * chores: UX fixes * update: sdk version * fix: refetching btn loading state * chores: added singleTX info to main screen, redesigned settings modal and minor fixes * removed console logs * minor fix * chores: added tooltip and minor text edits * fix: refetch and update support for pending transactions * fix: review modal button state on route update * chores: added tooltips for setting items * fix: setting activeRoute to null on txModal unmount * chores: edited the low slippage error message
- Loading branch information
1 parent
b217f34
commit 020fed2
Showing
41 changed files
with
1,483 additions
and
379 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,6 +23,7 @@ yarn-error.log* | |
| *.zip | ||
| /storybook-static | ||
| build-storybook.log | ||
| /src/lib | ||
|
|
||
| # Dev Notes | ||
| *.txt | ||
|
|
||
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
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,56 @@ | ||
| import { useTransition } from "@react-spring/web"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { setIsSettingsModalOpen } from "../../state/modals"; | ||
|
|
||
| // components | ||
| import { Modal } from "../common/Modal"; | ||
| import { SwapSlippage } from "./SwapSlippage"; | ||
| import { SortPreference } from "./SortPreference"; | ||
| import { SingleTx } from "./SingleTx"; | ||
|
|
||
| export const SettingsModal = () => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const isSettingsOpen = useSelector( | ||
| (state: any) => state.modals.isSettingsModalOpen | ||
| ); | ||
|
|
||
| const transitions = useTransition(isSettingsOpen, { | ||
| from: { y: "100%" }, | ||
| enter: { y: "0" }, | ||
| leave: { y: "100%" }, | ||
| config: { duration: 200 }, | ||
| onReset: () => toggleSettingsModal(false), | ||
| }); | ||
|
|
||
| const toggleSettingsModal = (value: boolean) => { | ||
| dispatch(setIsSettingsModalOpen(value)); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| {transitions( | ||
| (style, item) => | ||
| item && ( | ||
| <Modal | ||
| title="Settings" | ||
| closeModal={() => toggleSettingsModal(false)} | ||
| style={style} | ||
| classNames="z-50" | ||
| > | ||
| <div className="skt-w px-3 pt-3"> | ||
| {/* Sort options */} | ||
| <SortPreference /> | ||
|
|
||
| {/* Single tx checkbox */} | ||
| <SingleTx /> | ||
|
|
||
| {/* Swap Slippage */} | ||
| <SwapSlippage /> | ||
| </div> | ||
| </Modal> | ||
| ) | ||
| )} | ||
| </> | ||
| ); | ||
| }; |
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,52 @@ | ||
| import { useEffect, useState } from "react"; | ||
| import { Info } from "react-feather"; | ||
| import { useDispatch, useSelector } from "react-redux"; | ||
| import { setSingleTxOnly } from "../../state/quotesSlice"; | ||
|
|
||
| // components | ||
| import { CheckBox } from "../common/CheckBox"; | ||
| import { Popover } from "../common/Popover"; | ||
| import { SubTitle } from "./SubTitle"; | ||
|
|
||
| export const SingleTx = () => { | ||
| const dispatch = useDispatch(); | ||
| const singleTxOnlyFromDev = useSelector( | ||
| (state: any) => state.customSettings.singleTxOnly | ||
| ); | ||
| const singleTxOnlyFromUser = useSelector( | ||
| (state: any) => state.quotes.singleTxOnly | ||
| ); | ||
|
|
||
| const [singleTx, setSingleTx] = useState(singleTxOnlyFromUser); | ||
|
|
||
| // sets the store data and local storage on user input | ||
| useEffect(() => { | ||
| if (singleTx !== singleTxOnlyFromUser) { | ||
| dispatch(setSingleTxOnly(singleTx)); | ||
| localStorage.setItem("singleTxOnly", singleTx ? "true" : "false"); | ||
| } | ||
| }, [singleTx]); | ||
|
|
||
| if (singleTxOnlyFromDev) return null; | ||
| return ( | ||
| <div className="skt-w flex items-center relative mt-6 justify-between"> | ||
| <div className="skt-w flex items-center mb-1.5"> | ||
| <SubTitle>Single Transaction Mode</SubTitle> | ||
| <Popover | ||
| content="Only select routes with one user transaction i.e. direct bridge or source chain swap + bridge." | ||
| classNames="bottom-8" | ||
| cursor="cursor-help" | ||
| > | ||
| <Info className="ml-1.5 w-4 h-4 text-widget-secondary" /> | ||
| </Popover> | ||
| </div> | ||
| <span className="px-1"></span> | ||
| <CheckBox | ||
| small | ||
| id="singleTx" | ||
| isChecked={singleTx} | ||
| setIsChecked={setSingleTx} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.