refactor: migrate state/user to createSlice (#3779)

* use slice in transactions reducer

* update transaction reducer tests

* update user reducer to use slice

* fix merge conflicts

src/hooks/useApeModeQueryParamReader.ts

 import { useEffect } from 'react'
 import { useAppDispatch } from 'state/hooks'
 
-import { updateUserExpertMode } from '../state/user/actions'
+import { updateUserExpertMode } from '../state/user/reducer'
 import useParsedQueryString from './useParsedQueryString'
 
 export default function ApeModeQueryParamReader(): null {

src/state/user/actions.ts

-import { createAction } from '@reduxjs/toolkit'
-import { SupportedLocale } from 'constants/locales'
-
-export interface SerializedToken {
-  chainId: number
-  address: string
-  decimals: number
-  symbol?: string
-  name?: string
-}
-
-export interface SerializedPair {
-  token0: SerializedToken
-  token1: SerializedToken
-}
-
-export const updateMatchesDarkMode = createAction<{ matchesDarkMode: boolean }>('user/updateMatchesDarkMode')
-export const updateUserDarkMode = createAction<{ userDarkMode: boolean }>('user/updateUserDarkMode')
-export const updateUserExpertMode = createAction<{ userExpertMode: boolean }>('user/updateUserExpertMode')
-export const updateUserLocale = createAction<{ userLocale: SupportedLocale }>('user/updateUserLocale')
-export const updateShowSurveyPopup = createAction<{ showSurveyPopup: boolean }>('user/updateShowSurveyPopup')
-export const updateShowDonationLink = createAction<{ showDonationLink: boolean }>('user/updateShowDonationLink')
-export const updateUserClientSideRouter = createAction<{ userClientSideRouter: boolean }>(
-  'user/updateUserClientSideRouter'
-)
-export const updateHideClosedPositions = createAction<{ userHideClosedPositions: boolean }>('user/hideClosedPositions')
-export const updateUserSlippageTolerance = createAction<{ userSlippageTolerance: number | 'auto' }>(
-  'user/updateUserSlippageTolerance'
-)
-export const updateUserDeadline = createAction<{ userDeadline: number }>('user/updateUserDeadline')
-export const addSerializedToken = createAction<{ serializedToken: SerializedToken }>('user/addSerializedToken')
-export const removeSerializedToken = createAction<{ chainId: number; address: string }>('user/removeSerializedToken')
-export const addSerializedPair = createAction<{ serializedPair: SerializedPair }>('user/addSerializedPair')
-export const removeSerializedPair =
-  createAction<{ chainId: number; tokenAAddress: string; tokenBAddress: string }>('user/removeSerializedPair')

src/state/user/hooks.tsx

@@ -18,8 +18,6 @@ import {
   addSerializedPair,
   addSerializedToken,
   removeSerializedToken,
-  SerializedPair,
-  SerializedToken,
   updateHideClosedPositions,
   updateShowDonationLink,
   updateShowSurveyPopup,
@@ -29,7 +27,8 @@ import {
   updateUserExpertMode,
   updateUserLocale,
   updateUserSlippageTolerance,
-} from './actions'
+} from './reducer'
+import { SerializedPair, SerializedToken } from './types'
 
 function serializeToken(token: Token): SerializedToken {
   return {

src/state/user/reducer.ts

-import { createReducer } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
 import { SupportedLocale } from 'constants/locales'
 
 import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants/misc'
 import { updateVersion } from '../global/actions'
-import {
-  addSerializedPair,
-  addSerializedToken,
-  removeSerializedPair,
-  removeSerializedToken,
-  SerializedPair,
-  SerializedToken,
-  updateHideClosedPositions,
-  updateMatchesDarkMode,
-  updateShowDonationLink,
-  updateShowSurveyPopup,
-  updateUserClientSideRouter,
-  updateUserDarkMode,
-  updateUserDeadline,
-  updateUserExpertMode,
-  updateUserLocale,
-  updateUserSlippageTolerance,
-} from './actions'
+import { SerializedPair, SerializedToken } from './types'
 
 const currentTimestamp = () => new Date().getTime()
 
@@ -91,94 +74,63 @@ export const initialState: UserState = {
   showDonationLink: true,
 }
 
-export default createReducer(initialState, (builder) =>
-  builder
-    .addCase(updateVersion, (state) => {
-      // slippage isnt being tracked in local storage, reset to default
-      // noinspection SuspiciousTypeOfGuard
-      if (
-        typeof state.userSlippageTolerance !== 'number' ||
-        !Number.isInteger(state.userSlippageTolerance) ||
-        state.userSlippageTolerance < 0 ||
-        state.userSlippageTolerance > 5000
-      ) {
-        state.userSlippageTolerance = 'auto'
-      } else {
-        if (
-          !state.userSlippageToleranceHasBeenMigratedToAuto &&
-          [10, 50, 100].indexOf(state.userSlippageTolerance) !== -1
-        ) {
-          state.userSlippageTolerance = 'auto'
-          state.userSlippageToleranceHasBeenMigratedToAuto = true
-        }
-      }
-
-      // deadline isnt being tracked in local storage, reset to default
-      // noinspection SuspiciousTypeOfGuard
-      if (
-        typeof state.userDeadline !== 'number' ||
-        !Number.isInteger(state.userDeadline) ||
-        state.userDeadline < 60 ||
-        state.userDeadline > 180 * 60
-      ) {
-        state.userDeadline = DEFAULT_DEADLINE_FROM_NOW
-      }
-
-      state.lastUpdateVersionTimestamp = currentTimestamp()
-    })
-    .addCase(updateUserDarkMode, (state, action) => {
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    updateUserDarkMode(state, action) {
       state.userDarkMode = action.payload.userDarkMode
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateMatchesDarkMode, (state, action) => {
+    },
+    updateMatchesDarkMode(state, action) {
       state.matchesDarkMode = action.payload.matchesDarkMode
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserExpertMode, (state, action) => {
+    },
+    updateUserExpertMode(state, action) {
       state.userExpertMode = action.payload.userExpertMode
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserLocale, (state, action) => {
+    },
+    updateUserLocale(state, action) {
       state.userLocale = action.payload.userLocale
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserSlippageTolerance, (state, action) => {
+    },
+    updateUserSlippageTolerance(state, action) {
       state.userSlippageTolerance = action.payload.userSlippageTolerance
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserDeadline, (state, action) => {
+    },
+    updateUserDeadline(state, action) {
       state.userDeadline = action.payload.userDeadline
       state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserClientSideRouter, (state, action) => {
+    },
+    updateUserClientSideRouter(state, action) {
       state.userClientSideRouter = action.payload.userClientSideRouter
-    })
-    .addCase(updateHideClosedPositions, (state, action) => {
+    },
+    updateHideClosedPositions(state, action) {
       state.userHideClosedPositions = action.payload.userHideClosedPositions
-    })
-    .addCase(updateShowSurveyPopup, (state, action) => {
+    },
+    updateShowSurveyPopup(state, action) {
       state.showSurveyPopup = action.payload.showSurveyPopup
-    })
-    .addCase(updateShowDonationLink, (state, action) => {
+    },
+    updateShowDonationLink(state, action) {
       state.showDonationLink = action.payload.showDonationLink
-    })
-    .addCase(addSerializedToken, (state, { payload: { serializedToken } }) => {
+    },
+    addSerializedToken(state, { payload: { serializedToken } }) {
       if (!state.tokens) {
         state.tokens = {}
       }
       state.tokens[serializedToken.chainId] = state.tokens[serializedToken.chainId] || {}
       state.tokens[serializedToken.chainId][serializedToken.address] = serializedToken
       state.timestamp = currentTimestamp()
-    })
-    .addCase(removeSerializedToken, (state, { payload: { address, chainId } }) => {
+    },
+    removeSerializedToken(state, { payload: { address, chainId } }) {
       if (!state.tokens) {
         state.tokens = {}
       }
       state.tokens[chainId] = state.tokens[chainId] || {}
       delete state.tokens[chainId][address]
       state.timestamp = currentTimestamp()
-    })
-    .addCase(addSerializedPair, (state, { payload: { serializedPair } }) => {
+    },
+    addSerializedPair(state, { payload: { serializedPair } }) {
       if (
         serializedPair.token0.chainId === serializedPair.token1.chainId &&
         serializedPair.token0.address !== serializedPair.token1.address
@@ -188,13 +140,67 @@ export default createReducer(initialState, (builder) =>
         state.pairs[chainId][pairKey(serializedPair.token0.address, serializedPair.token1.address)] = serializedPair
       }
       state.timestamp = currentTimestamp()
-    })
-    .addCase(removeSerializedPair, (state, { payload: { chainId, tokenAAddress, tokenBAddress } }) => {
+    },
+    removeSerializedPair(state, { payload: { chainId, tokenAAddress, tokenBAddress } }) {
       if (state.pairs[chainId]) {
         // just delete both keys if either exists
         delete state.pairs[chainId][pairKey(tokenAAddress, tokenBAddress)]
         delete state.pairs[chainId][pairKey(tokenBAddress, tokenAAddress)]
       }
       state.timestamp = currentTimestamp()
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(updateVersion, (state) => {
+      // slippage isnt being tracked in local storage, reset to default
+      // noinspection SuspiciousTypeOfGuard
+      if (
+        typeof state.userSlippageTolerance !== 'number' ||
+        !Number.isInteger(state.userSlippageTolerance) ||
+        state.userSlippageTolerance < 0 ||
+        state.userSlippageTolerance > 5000
+      ) {
+        state.userSlippageTolerance = 'auto'
+      } else {
+        if (
+          !state.userSlippageToleranceHasBeenMigratedToAuto &&
+          [10, 50, 100].indexOf(state.userSlippageTolerance) !== -1
+        ) {
+          state.userSlippageTolerance = 'auto'
+          state.userSlippageToleranceHasBeenMigratedToAuto = true
+        }
+      }
+
+      // deadline isnt being tracked in local storage, reset to default
+      // noinspection SuspiciousTypeOfGuard
+      if (
+        typeof state.userDeadline !== 'number' ||
+        !Number.isInteger(state.userDeadline) ||
+        state.userDeadline < 60 ||
+        state.userDeadline > 180 * 60
+      ) {
+        state.userDeadline = DEFAULT_DEADLINE_FROM_NOW
+      }
+
+      state.lastUpdateVersionTimestamp = currentTimestamp()
     })
-)
+  },
+})
+
+export const {
+  addSerializedPair,
+  addSerializedToken,
+  removeSerializedPair,
+  removeSerializedToken,
+  updateHideClosedPositions,
+  updateMatchesDarkMode,
+  updateShowDonationLink,
+  updateShowSurveyPopup,
+  updateUserClientSideRouter,
+  updateUserDarkMode,
+  updateUserDeadline,
+  updateUserExpertMode,
+  updateUserLocale,
+  updateUserSlippageTolerance,
+} = userSlice.actions
+export default userSlice.reducer

src/state/user/types.ts

+export interface SerializedToken {
+  chainId: number
+  address: string
+  decimals: number
+  symbol?: string
+  name?: string
+}
+
+export interface SerializedPair {
+  token0: SerializedToken
+  token1: SerializedToken
+}

src/state/user/updater.tsx

 import { useEffect } from 'react'
 import { useAppDispatch } from 'state/hooks'
 
-import { updateMatchesDarkMode } from './actions'
+import { updateMatchesDarkMode } from './reducer'
 
 export default function Updater(): null {
   const dispatch = useAppDispatch()

src/theme/DarkModeQueryParamReader.tsx

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useAppDispatch } from 'state/hooks'
 
-import { updateUserDarkMode } from '../state/user/actions'
+import { updateUserDarkMode } from '../state/user/reducer'
 
 export default function DarkModeQueryParamReader({ location: { search } }: RouteComponentProps): null {
   const dispatch = useAppDispatch()