Implement useSlippage.

Rename PriorityFeesModal to AppSettingsModal

src/components/modals/PriorityFeesModal/PriorityFeesModal.module.less → src/components/modals/AppSettingsModal/AppSettingsModal.module.less

@@ -15,7 +15,7 @@
   border-radius: 100px;
 
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
   padding: 4px;
 
   margin-bottom: 24px;

src/components/modals/AppSettingsModal/AppSettingsModal.tsx

@@ -0,0 +1,88 @@
+import { FC } from 'react'
+
+import classNames from 'classnames'
+
+import { Button } from '@banx/components/Buttons'
+import { useTabs } from '@banx/components/Tabs'
+import { Modal } from '@banx/components/modals/BaseModal'
+
+import { PriorityLevel, usePriorityFees, useSlippage } from '@banx/store/common'
+import { enqueueSnackbar } from '@banx/utils'
+
+import { PRIORITY_TYPED_TABS, SLIPPAGE_TABS } from './constants'
+
+import styles from './AppSettingsModal.module.less'
+
+type AppSettingsModalProps = {
+  onCancel: () => void
+}
+
+export const AppSettingsModal: FC<AppSettingsModalProps> = ({ onCancel }) => {
+  const { priorityLevel, setPriorityLevel } = usePriorityFees()
+  const priorityTabsValues = useTabs({
+    tabs: PRIORITY_TYPED_TABS,
+    defaultValue:
+      PRIORITY_TYPED_TABS.find(({ value }) => value === priorityLevel)?.value ??
+      PRIORITY_TYPED_TABS[0].value,
+  })
+
+  const { slippage, setSlippage } = useSlippage()
+  const slippageTabsValues = useTabs({
+    tabs: SLIPPAGE_TABS,
+    defaultValue:
+      SLIPPAGE_TABS.find(({ value }) => parseFloat(value) === slippage)?.value ??
+      SLIPPAGE_TABS[0].value,
+  })
+
+  const onSaveChanges = () => {
+    setPriorityLevel(priorityTabsValues.value as PriorityLevel)
+    setSlippage(parseFloat(slippageTabsValues.value))
+    enqueueSnackbar({
+      message: 'Changes applied',
+      type: 'success',
+      autoHideDuration: 1.5,
+    })
+    onCancel()
+  }
+
+  return (
+    <Modal open onCancel={onCancel} maskClosable={false} width={500}>
+      <h2 className={styles.title}>Settings</h2>
+      <TabsContent {...slippageTabsValues} title="Slippage" />
+      <TabsContent {...priorityTabsValues} title="Priority mode" />
+
+      <Button className={styles.saveButton} onClick={onSaveChanges}>
+        Save changes
+      </Button>
+    </Modal>
+  )
+}
+
+type TabsContentProps = { title: string } & ReturnType<typeof useTabs>
+
+const TabsContent: FC<TabsContentProps> = ({ title, value, tabs, setValue }) => {
+  return (
+    <>
+      <h5 className={styles.subtitle}>{title}</h5>
+      <div className={styles.tabs}>
+        {tabs.map(({ label, value: tabValue, disabled }) => {
+          const isActive = tabValue === value
+
+          return (
+            <button
+              key={tabValue}
+              className={classNames(styles.tab, { [styles.tabActive]: isActive })}
+              name={tabValue}
+              onClick={() => {
+                setValue(tabValue)
+              }}
+              disabled={disabled}
+            >
+              {label}
+            </button>
+          )
+        })}
+      </div>
+    </>
+  )
+}

src/components/modals/AppSettingsModal/constants.ts

@@ -0,0 +1,13 @@
+import { Tab } from '@banx/components/Tabs'
+
+import { PriorityLevel, SLIPPAGE_VALUES, getHumanReadablePriorityLevel } from '@banx/store/common'
+
+export const PRIORITY_TYPED_TABS: Tab[] = Object.values(PriorityLevel).map((priorityLevel) => ({
+  label: getHumanReadablePriorityLevel(priorityLevel),
+  value: priorityLevel,
+}))
+
+export const SLIPPAGE_TABS: Tab[] = SLIPPAGE_VALUES.map((slippage) => ({
+  label: `${slippage}%`,
+  value: slippage.toString(),
+}))

src/components/modals/AppSettingsModal/index.ts

@@ -0,0 +1 @@
+export * from './AppSettingsModal'

src/components/modals/index.ts

@@ -2,5 +2,5 @@ export { ModalPortal } from './ModalPortal'
 export * from './NotificationModal'
 export * from './SubscribeNotificationsModal'
 export * from './OnboardingModal'
-export * from './PriorityFeesModal'
+export * from './AppSettingsModal'
 export * from './BanxSolYieldWarningModal'

src/layout/components/BurgerMenu/BurgerMenu.tsx

@@ -6,7 +6,7 @@ import { BanxNotificationsButton } from '@banx/components/BanxNotifications'
 import { Burger, BurgerClose } from '@banx/icons'
 import { useAssetMode } from '@banx/store/common'
 
-import { PriorityFeesButton } from '../Header/components'
+import { AppSettingsButton } from '../Header/components'
 import {
   EXTERNAL_LINKS,
   ExternalLinks,
@@ -39,7 +39,7 @@ const BurgerMenu = () => {
           <div className={styles.widgetContainer}>
             <ThemeSwitcher />
             {connected && <BanxNotificationsButton />}
-            {connected && <PriorityFeesButton />}
+            {connected && <AppSettingsButton />}
           </div>
           <ExternalLinks links={EXTERNAL_LINKS} />
         </div>

src/layout/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import { PATHS } from '@banx/router'
 
 import { BurgerIcon } from '../BurgerMenu'
 import ThemeSwitcher from '../ThemeSwitcher'
-import { PriorityFeesButton } from './components'
+import { AppSettingsButton } from './components'
 
 import styles from './Header.module.less'
 
@@ -33,7 +33,7 @@ export const Header = () => {
 
       <div className={styles.widgetContainer}>
         {connected && <BanxNotificationsButton className={styles.hiddenBanxNotificationsButton} />}
-        {connected && <PriorityFeesButton className={styles.hiddenPriorityFeesButton} />}
+        {connected && <AppSettingsButton className={styles.hiddenPriorityFeesButton} />}
         <ThemeSwitcher className={styles.hiddenThemeSwitcher} />
         <WalletConnectButton />
       </div>

src/layout/components/Header/components.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { NavLink } from 'react-router-dom'
 
 import { Button } from '@banx/components/Buttons'
-import { PriorityFeesModal } from '@banx/components/modals'
+import { AppSettingsModal } from '@banx/components/modals'
 
 import { Cup, Settings } from '@banx/icons'
 import { PATHS } from '@banx/router'
@@ -14,15 +14,15 @@ import { isActivePath } from '../Navbar/helpers'
 
 import styles from './Header.module.less'
 
-interface PriorityFeesButtonProps {
+interface AppSettingsButtonProps {
   className?: string
 }
 
-export const PriorityFeesButton: FC<PriorityFeesButtonProps> = ({ className }) => {
+export const AppSettingsButton: FC<AppSettingsButtonProps> = ({ className }) => {
   const { open, close } = useModal()
 
   const onClickHandler = () => {
-    open(PriorityFeesModal, { onCancel: close })
+    open(AppSettingsModal, { onCancel: close })
   }
 
   return (

src/store/common/index.ts

@@ -6,3 +6,4 @@ export * from './useModal'
 export * from './useMarketsURLControl'
 export * from './useAssetMode'
 export * from './useTokenType'
+export * from './useSlippage'

src/store/common/useSlippage.ts

@@ -0,0 +1,62 @@
+import { z } from 'zod'
+import { create } from 'zustand'
+
+const BANX_SLIPPAGE_STATE_LS_KEY = '@banx.slippageState'
+
+export const SLIPPAGE_VALUES = [1, 2, 3, 5] as const //%
+
+const DEFAULT_SLIPPAGE = SLIPPAGE_VALUES[2]
+
+type SlippageState = {
+  slippage: number
+  setSlippage: (slippage: number) => void
+}
+
+export const useSlippageState = create<SlippageState>((set) => ({
+  slippage: DEFAULT_SLIPPAGE,
+  setSlippage: (slippage: number) => set((state) => ({ ...state, slippage })),
+}))
+
+export const useSlippage = () => {
+  const { slippage, setSlippage: setSlippageState } = useSlippageState((state) => {
+    const slippage = getSlippage()
+
+    return {
+      ...state,
+      slippage,
+    }
+  })
+
+  const setSlippage = (slippage: number) => {
+    try {
+      setSlippageState(slippage)
+      localStorage.setItem(BANX_SLIPPAGE_STATE_LS_KEY, JSON.stringify(slippage))
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  return { slippage, setSlippage }
+}
+
+export const getSlippage = () => {
+  try {
+    const slippageJSON = localStorage.getItem(BANX_SLIPPAGE_STATE_LS_KEY)
+
+    //? If slippage isn't saved in LS --> return default
+    if (!slippageJSON) {
+      return DEFAULT_SLIPPAGE
+    }
+
+    const slippage: number = JSON.parse(slippageJSON)
+
+    //? Check LS data validity
+    z.number().parse(slippage)
+
+    return slippage
+  } catch (error) {
+    console.error('Invalid slippage value in LS. Value was removed')
+    localStorage.removeItem(BANX_SLIPPAGE_STATE_LS_KEY)
+    return DEFAULT_SLIPPAGE
+  }
+}