fix: Pcsx user settings not considered reset and not disabled on firs…

…t click (#10874)

Issues:

If pcsx feature enabled and there is no user setting, disabling it not
make reset button appear.

Disabling the pcsx feature not work on first click and it has to be
clicked again

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `usePCSX` hook and related state
management in the `smartRouter` module by adding a reset functionality
and improving the handling of user preferences.

### Detailed summary
- Updated `usePCSX` to return a reset function along with state.
- Introduced `useCallback` for setting user preferences in `usePCSX`.
- Modified `useUserXEnable` to return a reset function.
- Enhanced `useRoutingSettingChanged` to include reset functionality for
routing settings.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/hooks/usePCSX.ts

@@ -2,7 +2,7 @@ import { ChainId } from '@pancakeswap/chains'
 import { EXPERIMENTAL_FEATURES } from 'config/experimentalFeatures'
 import { SUPPORTED_CHAINS } from 'config/pcsx'
 import { useExperimentalFeatureEnabled } from 'hooks/useExperimentalFeatureEnabled'
-import { useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { useUserXEnable } from 'state/user/smartRouter'
 
 export function usePCSXFeatureEnabled() {
@@ -11,10 +11,15 @@ export function usePCSXFeatureEnabled() {
 
 export const usePCSX = () => {
   const featureEnabled = usePCSXFeatureEnabled()
-  const [xEnabled, setX] = useUserXEnable()
+  const [xEnabled, setX, reset] = useUserXEnable()
   const enabled = Boolean(xEnabled ?? featureEnabled)
-
-  return [enabled, setX] as const
+  const setUserX = useCallback(
+    (updater: boolean | ((current: boolean) => boolean)) => {
+      setX(typeof updater === 'function' ? updater(enabled) : updater)
+    },
+    [enabled],
+  )
+  return [enabled, setUserX, featureEnabled, reset] as const
 }
 
 export function usePCSXEnabledOnChain(chainId?: ChainId) {

apps/web/src/state/user/smartRouter.ts

@@ -1,6 +1,9 @@
 import { userSingleHopAtom } from '@pancakeswap/utils/user'
 import { atom, useAtom, useAtomValue } from 'jotai'
+import { useResetAtom } from 'jotai/utils'
 import atomWithStorageWithErrorCatch from 'utils/atomWithStorageWithErrorCatch'
+import { usePCSX } from 'hooks/usePCSX'
+import { useCallback } from 'react'
 
 const userUseStableSwapAtom = atomWithStorageWithErrorCatch<boolean>('pcs:useStableSwap', true)
 const userUseV2SwapAtom = atomWithStorageWithErrorCatch<boolean>('pcs:useV2Swap', true)
@@ -9,7 +12,8 @@ const userUserSplitRouteAtom = atomWithStorageWithErrorCatch<boolean>('pcs:useSp
 const userUseXAtom = atomWithStorageWithErrorCatch<boolean | undefined>('pcs:useX', undefined)
 
 export function useUserXEnable() {
-  return useAtom(userUseXAtom)
+  const reset = useResetAtom(userUseXAtom)
+  return [...useAtom(userUseXAtom), reset] as const
 }
 
 export function useUserStableSwapEnable() {
@@ -56,5 +60,11 @@ const derivedRoutingSettingChangedAtom = atom(
 )
 
 export function useRoutingSettingChanged() {
-  return useAtom(derivedRoutingSettingChangedAtom)
+  const [enabled, _, featureEnabled, resetX] = usePCSX()
+  const [derivedRoutingSettingChanged, reset] = useAtom(derivedRoutingSettingChangedAtom)
+  const resetRoutingSettings = useCallback(() => {
+    reset()
+    resetX()
+  }, [reset, resetX])
+  return [derivedRoutingSettingChanged || enabled !== featureEnabled, resetRoutingSettings] as const
 }