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

@@ -1,7 +1,7 @@
 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

@@ -1,35 +0,0 @@
-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

@@ -1,26 +1,9 @@
-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,9 +74,84 @@ export const initialState: UserState = {
   showDonationLink: true,
 }
 
-export default createReducer(initialState, (builder) =>
-  builder
-    .addCase(updateVersion, (state) => {
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    updateUserDarkMode(state, action) {
+      state.userDarkMode = action.payload.userDarkMode
+      state.timestamp = currentTimestamp()
+    },
+    updateMatchesDarkMode(state, action) {
+      state.matchesDarkMode = action.payload.matchesDarkMode
+      state.timestamp = currentTimestamp()
+    },
+    updateUserExpertMode(state, action) {
+      state.userExpertMode = action.payload.userExpertMode
+      state.timestamp = currentTimestamp()
+    },
+    updateUserLocale(state, action) {
+      state.userLocale = action.payload.userLocale
+      state.timestamp = currentTimestamp()
+    },
+    updateUserSlippageTolerance(state, action) {
+      state.userSlippageTolerance = action.payload.userSlippageTolerance
+      state.timestamp = currentTimestamp()
+    },
+    updateUserDeadline(state, action) {
+      state.userDeadline = action.payload.userDeadline
+      state.timestamp = currentTimestamp()
+    },
+    updateUserClientSideRouter(state, action) {
+      state.userClientSideRouter = action.payload.userClientSideRouter
+    },
+    updateHideClosedPositions(state, action) {
+      state.userHideClosedPositions = action.payload.userHideClosedPositions
+    },
+    updateShowSurveyPopup(state, action) {
+      state.showSurveyPopup = action.payload.showSurveyPopup
+    },
+    updateShowDonationLink(state, action) {
+      state.showDonationLink = action.payload.showDonationLink
+    },
+    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()
+    },
+    removeSerializedToken(state, { payload: { address, chainId } }) {
+      if (!state.tokens) {
+        state.tokens = {}
+      }
+      state.tokens[chainId] = state.tokens[chainId] || {}
+      delete state.tokens[chainId][address]
+      state.timestamp = currentTimestamp()
+    },
+    addSerializedPair(state, { payload: { serializedPair } }) {
+      if (
+        serializedPair.token0.chainId === serializedPair.token1.chainId &&
+        serializedPair.token0.address !== serializedPair.token1.address
+      ) {
+        const chainId = serializedPair.token0.chainId
+        state.pairs[chainId] = state.pairs[chainId] || {}
+        state.pairs[chainId][pairKey(serializedPair.token0.address, serializedPair.token1.address)] = serializedPair
+      }
+      state.timestamp = currentTimestamp()
+    },
+    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 (
@@ -126,75 +184,23 @@ export default createReducer(initialState, (builder) =>
 
       state.lastUpdateVersionTimestamp = currentTimestamp()
     })
-    .addCase(updateUserDarkMode, (state, action) => {
-      state.userDarkMode = action.payload.userDarkMode
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateMatchesDarkMode, (state, action) => {
-      state.matchesDarkMode = action.payload.matchesDarkMode
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserExpertMode, (state, action) => {
-      state.userExpertMode = action.payload.userExpertMode
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserLocale, (state, action) => {
-      state.userLocale = action.payload.userLocale
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserSlippageTolerance, (state, action) => {
-      state.userSlippageTolerance = action.payload.userSlippageTolerance
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserDeadline, (state, action) => {
-      state.userDeadline = action.payload.userDeadline
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(updateUserClientSideRouter, (state, action) => {
-      state.userClientSideRouter = action.payload.userClientSideRouter
-    })
-    .addCase(updateHideClosedPositions, (state, action) => {
-      state.userHideClosedPositions = action.payload.userHideClosedPositions
-    })
-    .addCase(updateShowSurveyPopup, (state, action) => {
-      state.showSurveyPopup = action.payload.showSurveyPopup
-    })
-    .addCase(updateShowDonationLink, (state, action) => {
-      state.showDonationLink = action.payload.showDonationLink
-    })
-    .addCase(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 } }) => {
-      if (!state.tokens) {
-        state.tokens = {}
-      }
-      state.tokens[chainId] = state.tokens[chainId] || {}
-      delete state.tokens[chainId][address]
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(addSerializedPair, (state, { payload: { serializedPair } }) => {
-      if (
-        serializedPair.token0.chainId === serializedPair.token1.chainId &&
-        serializedPair.token0.address !== serializedPair.token1.address
-      ) {
-        const chainId = serializedPair.token0.chainId
-        state.pairs[chainId] = state.pairs[chainId] || {}
-        state.pairs[chainId][pairKey(serializedPair.token0.address, serializedPair.token1.address)] = serializedPair
-      }
-      state.timestamp = currentTimestamp()
-    })
-    .addCase(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()
-    })
-)
+  },
+})
+
+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

@@ -0,0 +1,12 @@
+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

@@ -1,7 +1,7 @@
 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()