feat: Add swap reset

Author: memoyil

apps/web/src/components/Menu/GlobalSettings/SettingsModal.tsx

@@ -29,11 +29,7 @@ import { useActiveChainId } from 'hooks/useActiveChainId'
 import useTheme from 'hooks/useTheme'
 import { useWebNotifications } from 'hooks/useWebNotifications'
 import { ReactNode, Suspense, lazy, useCallback, useState } from 'react'
-import {
-  useGlobalSettingsChanged,
-  useSubgraphHealthIndicatorManager,
-  useUserUsernameVisibility,
-} from 'state/user/hooks'
+import { useSubgraphHealthIndicatorManager, useUserUsernameVisibility } from 'state/user/hooks'
 import { useUserShowTestnet } from 'state/user/hooks/useUserShowTestnet'
 import { useUserTokenRisk } from 'state/user/hooks/useUserTokenRisk'
 import {
@@ -46,6 +42,7 @@ import {
 } from 'state/user/smartRouter'
 import { usePCSX, usePCSXFeatureEnabled } from 'hooks/usePCSX'
 import { styled } from 'styled-components'
+import { useGlobalSettingsChanged } from 'hooks/useGlobalSettingsChanged'
 import GasSettings from './GasSettings'
 
 const WebNotiToggle = lazy(() => import('./WebNotiToggle'))

apps/web/src/components/Menu/GlobalSettings/SettingsModalV2/index.tsx

@@ -18,6 +18,7 @@ import { useExpertMode, useUserExpertModeAcknowledgement } from '@pancakeswap/ut
 
 import { ReactNode, useCallback, useId, useState } from 'react'
 import { useRoutingSettingChanged } from 'state/user/smartRouter'
+import { useSwapSettingsChanged } from 'hooks/useSwapSettingsChanged'
 import SettingsModal from '../SettingsModal'
 import { SettingsMode } from '../types'
 import { CustomizeRoutingTab } from './CustomizeRoutingTab'
@@ -55,6 +56,7 @@ export const SettingsModalV2 = ({
   const { t } = useTranslation()
   const { isMobile } = useMatchBreakpoints()
 
+  const { isSwapSettingsChanged, resetSettings } = useSwapSettingsChanged()
   const [showExpertModeAcknowledgement, setShowExpertModeAcknowledgement] = useUserExpertModeAcknowledgement()
   const [expertMode, setExpertMode] = useExpertMode()
   const [isRoutingSettingChange, reset] = useRoutingSettingChanged()
@@ -153,16 +155,20 @@ export const SettingsModalV2 = ({
     return <SettingsModal onDismiss={onDismissGlobalSettings} />
   }
 
+  const showResetButton = Boolean(
+    activeTabIndex === TabIndex.CUSTOMIZE_ROUTING ? isRoutingSettingChange : isSwapSettingsChanged,
+  )
+  const onReset = activeTabIndex === TabIndex.CUSTOMIZE_ROUTING ? reset : resetSettings
+
   return (
     <MotionModal
       minWidth={[null, null, '420px']}
       minHeight={isMobile ? '500px' : undefined}
       headerPadding="2px 14px 0 24px"
       headerRightSlot={
-        activeTabIndex === TabIndex.CUSTOMIZE_ROUTING &&
-        isRoutingSettingChange && (
+        showResetButton && (
           <TabContent type="to_right">
-            <Button ml="8px" variant="text" scale="sm" onClick={reset}>
+            <Button ml="8px" variant="text" scale="sm" onClick={onReset}>
               {t('Reset')}
             </Button>
           </TabContent>

apps/web/src/hooks/useGlobalSettingsChanged.ts

@@ -0,0 +1,50 @@
+import { useUserShowTestnet } from 'state/user/hooks/useUserShowTestnet'
+import { useUserTokenRisk } from 'state/user/hooks/useUserTokenRisk'
+import { useWebNotifications } from 'hooks/useWebNotifications'
+import { useAllowNotifications } from 'state/notifications/hooks'
+import { useCallback } from 'react'
+import { useGasPriceManager, useSubgraphHealthIndicatorManager, useUserUsernameVisibility } from 'state/user/hooks'
+
+export function useGlobalSettingsChanged() {
+  const [subgraphHealth, setSubgraphHealth, defaultSubgraphHealthValue] = useSubgraphHealthIndicatorManager()
+  const [userUsernameVisibility, setUsernameVisibility, defaultUserUsernameVisibilityValue] =
+    useUserUsernameVisibility()
+  const [showTestnet, setShowTestnet, defaultShowTestnetValue] = useUserShowTestnet()
+  const [tokenRisk, setTokenRisk, defaultTokenRiskValue] = useUserTokenRisk()
+  const { enabled: notificationsEnabled, defaultValue: defaultNotificationsValue } = useWebNotifications()
+  const [, setAllowNotifications] = useAllowNotifications()
+  const [gasPrice, setGasPrice, defaultGasPrice] = useGasPriceManager()
+
+  const resetSettings = useCallback(() => {
+    setSubgraphHealth(defaultSubgraphHealthValue)
+    setUsernameVisibility(defaultUserUsernameVisibilityValue)
+    setShowTestnet(defaultShowTestnetValue)
+    setTokenRisk(defaultTokenRiskValue)
+    setAllowNotifications(defaultNotificationsValue ?? true)
+    setGasPrice(defaultGasPrice)
+  }, [
+    setShowTestnet,
+    setTokenRisk,
+    setAllowNotifications,
+    setGasPrice,
+    setSubgraphHealth,
+    setUsernameVisibility,
+    defaultNotificationsValue,
+    defaultShowTestnetValue,
+    defaultSubgraphHealthValue,
+    defaultTokenRiskValue,
+    defaultUserUsernameVisibilityValue,
+    defaultGasPrice,
+  ])
+
+  return {
+    isGlobalSettingsChanged:
+      subgraphHealth !== defaultSubgraphHealthValue ||
+      userUsernameVisibility !== defaultUserUsernameVisibilityValue ||
+      showTestnet !== defaultShowTestnetValue ||
+      tokenRisk !== defaultTokenRiskValue ||
+      notificationsEnabled !== defaultNotificationsValue ||
+      gasPrice !== defaultGasPrice,
+    resetSettings,
+  }
+}

apps/web/src/hooks/useSwapSettingsChanged.ts

@@ -0,0 +1,46 @@
+import { useAudioPlay, useExpertMode, useUserSlippage } from '@pancakeswap/utils/user'
+import { useCallback } from 'react'
+import { useGasPriceManager } from 'state/user/hooks'
+import { useUserTransactionTTL } from 'hooks/useTransactionDeadline'
+import { useRoutingSettingChanged } from 'state/user/smartRouter'
+
+export function useSwapSettingsChanged() {
+  const [gasPrice, setGasPrice, defaultGasPrice] = useGasPriceManager()
+  const [userSlippage, setUserSlippage, defaultUserSlippage] = useUserSlippage()
+  const [userTTL, setUserTTL, defaultUserTTL] = useUserTransactionTTL()
+  const [audioPlay, setAudioPlay, defaultAudioPlay] = useAudioPlay()
+  const [expertMode, setExpertMode, defaultExpertMode] = useExpertMode()
+  const [isRoutingSettingChange, reset] = useRoutingSettingChanged()
+
+  const resetSettings = useCallback(() => {
+    setUserSlippage(defaultUserSlippage)
+    setUserTTL(defaultUserTTL)
+    setAudioPlay(defaultAudioPlay)
+    setExpertMode(defaultExpertMode)
+    setGasPrice(defaultGasPrice)
+    reset()
+  }, [
+    setGasPrice,
+    setExpertMode,
+    setAudioPlay,
+    setUserTTL,
+    setUserSlippage,
+    defaultGasPrice,
+    defaultExpertMode,
+    defaultAudioPlay,
+    defaultUserTTL,
+    defaultUserSlippage,
+    reset,
+  ])
+
+  return {
+    isSwapSettingsChanged:
+      isRoutingSettingChange ||
+      userSlippage !== defaultUserSlippage ||
+      userTTL !== defaultUserTTL ||
+      audioPlay !== defaultAudioPlay ||
+      expertMode !== defaultExpertMode ||
+      gasPrice !== defaultGasPrice,
+    resetSettings,
+  }
+}

apps/web/src/hooks/useTransactionDeadline.ts

@@ -14,16 +14,9 @@ const userTxTTLAtom = atomWithStorage<number | undefined>('pcs:user:tx-ttl', und
 export function useUserTransactionTTL() {
   const { chainId } = useActiveChainId()
   const [userTTL, setTTL] = useAtom(userTxTTLAtom)
-  const ttl = useMemo(
-    () =>
-      userTTL === undefined
-        ? chainId && L2_CHAIN_IDS.includes(chainId)
-          ? L2_DEADLINE_FROM_NOW
-          : DEFAULT_DEADLINE_FROM_NOW
-        : userTTL,
-    [userTTL, chainId],
-  )
-  return [ttl, setTTL] as const
+  const defaultValue = chainId && L2_CHAIN_IDS.includes(chainId) ? L2_DEADLINE_FROM_NOW : DEFAULT_DEADLINE_FROM_NOW
+  const ttl = useMemo(() => (userTTL === undefined ? defaultValue : userTTL), [userTTL, defaultValue])
+  return [ttl, setTTL, defaultValue] as const
 }
 
 // combines the block timestamp with the user setting to give the deadline that should be used for any submitted transaction

apps/web/src/state/user/hooks/index.tsx

@@ -16,10 +16,6 @@ import { safeGetAddress } from 'utils'
 import { Hex, hexToBigInt } from 'viem'
 import { useWalletClient } from 'wagmi'
 import { initialState } from 'state/user/reducer'
-import { useUserShowTestnet } from 'state/user/hooks/useUserShowTestnet'
-import { useUserTokenRisk } from 'state/user/hooks/useUserTokenRisk'
-import { useWebNotifications } from 'hooks/useWebNotifications'
-import { useAllowNotifications } from 'state/notifications/hooks'
 import { useUserChart } from './useUserChart'
 import {
   FarmStakedOnly,
@@ -477,51 +473,6 @@ export function useTrackedTokenPairs(): [ERC20Token, ERC20Token][] {
   }, [combinedList])
 }
 
-export function useGlobalSettingsChanged() {
-  const [subgraphHealth, setSubgraphHealth, defaultSubgraphHealthValue] = useSubgraphHealthIndicatorManager()
-  const [userUsernameVisibility, setUsernameVisibility, defaultUserUsernameVisibilityValue] =
-    useUserUsernameVisibility()
-  const [showTestnet, setShowTestnet, defaultShowTestnetValue] = useUserShowTestnet()
-  const [tokenRisk, setTokenRisk, defaultTokenRiskValue] = useUserTokenRisk()
-  const { enabled: notificationsEnabled, defaultValue: defaultNotificationsValue } = useWebNotifications()
-  const [, setAllowNotifications] = useAllowNotifications()
-  const [gasPrice, setGasPrice, defaultGasPrice] = useGasPriceManager()
-
-  const resetSettings = useCallback(() => {
-    setSubgraphHealth(defaultSubgraphHealthValue)
-    setUsernameVisibility(defaultUserUsernameVisibilityValue)
-    setShowTestnet(defaultShowTestnetValue)
-    setTokenRisk(defaultTokenRiskValue)
-    setAllowNotifications(defaultNotificationsValue ?? true)
-    setGasPrice(defaultGasPrice)
-  }, [
-    setShowTestnet,
-    setTokenRisk,
-    setAllowNotifications,
-    setGasPrice,
-    defaultGasPrice,
-    defaultNotificationsValue,
-    defaultShowTestnetValue,
-    defaultSubgraphHealthValue,
-    defaultTokenRiskValue,
-    defaultUserUsernameVisibilityValue,
-    gasPrice,
-    setSubgraphHealth,
-    setUsernameVisibility,
-  ])
-
-  return {
-    isGlobalSettingsChanged:
-      subgraphHealth !== defaultSubgraphHealthValue ||
-      userUsernameVisibility !== defaultUserUsernameVisibilityValue ||
-      showTestnet !== defaultShowTestnetValue ||
-      tokenRisk !== defaultTokenRiskValue ||
-      notificationsEnabled !== defaultNotificationsValue ||
-      gasPrice !== defaultGasPrice,
-    resetSettings,
-  }
-}
-
 /**
  * @deprecated
  */

packages/utils/user/audioPlay.ts

@@ -1,8 +1,10 @@
 import { useAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
-const userAudioPlayAtom = atomWithStorage('pcs:audio-play-2', false)
+const DEFAULT_VALUE = false
+
+const userAudioPlayAtom = atomWithStorage('pcs:audio-play-2', DEFAULT_VALUE)
 
 export function useAudioPlay() {
-  return useAtom(userAudioPlayAtom)
+  return [...useAtom(userAudioPlayAtom), DEFAULT_VALUE] as const
 }

packages/utils/user/expertMode.ts

@@ -1,11 +1,13 @@
 import { useAtom, useAtomValue } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 
+const DEFAULT_EXPERT_VALUE = false
+
 const userExpertModeAtom = atomWithStorage<boolean>('pcs:expert-mode', false)
 const userExpertModeAcknowledgementAtom = atomWithStorage<boolean>('pcs:expert-mode-acknowledgement', true)
 
 export function useExpertMode() {
-  return useAtom(userExpertModeAtom)
+  return [...useAtom(userExpertModeAtom), DEFAULT_EXPERT_VALUE] as const
 }
 
 export function useIsExpertMode() {

packages/utils/user/slippage.ts

@@ -16,7 +16,7 @@ const userSlippageAtomWithLocalStorage = atom(
 )
 
 export const useUserSlippage = () => {
-  return useAtom(userSlippageAtomWithLocalStorage)
+  return [...useAtom(userSlippageAtomWithLocalStorage), INITIAL_ALLOWED_SLIPPAGE] as const
 }
 
 // Derived atom for slippage as a Percent