add applyFeeMiddlware

src/custom/state/fee/middleware.ts

@@ -0,0 +1,44 @@
+import { Middleware } from '@reduxjs/toolkit'
+import { getFee } from 'utils/fees'
+import { selectCurrency } from '@src/state/swap/actions'
+import { updateFee } from './actions'
+import { FeeInformationState } from './reducer'
+
+export const applyFeeMiddleware: Middleware = ({ dispatch, getState }) => next => async action => {
+  // check that incoming action is a selected token
+  const isTriggerAction = action.type === selectCurrency.type
+
+  if (isTriggerAction) {
+    const { payload } = action
+
+    // check actions as several should trigger this update
+    // e.g direct selection? yes, also has payload to check token type
+    // but switchCurrencies? has no payload, but must be used to check tip
+
+    const {
+      fee: { feesMap }
+    }: { fee: FeeInformationState } = getState()
+
+    const tokenFee = feesMap[payload.currencyId]?.fee
+
+    if (!tokenFee) {
+      const fee = await getFee(payload.currencyId)
+      dispatch(
+        updateFee({
+          token: payload.currencyId,
+          fee
+        })
+      )
+    }
+
+    console.debug(`
+    ========================================================
+    🚀  [FEE MIDDLEWARE] SELECT_CURRENCY ACTION DETECTED
+        PAYLOAD:  ${JSON.stringify(payload, null, 2)}
+        FEE:      ${JSON.stringify(getState().fee.feesMap[payload.currencyId]?.fee, null, 2)}
+    ========================================================
+      `)
+  }
+
+  next(action)
+}

src/custom/state/fee/reducer.ts

@@ -15,11 +15,11 @@ interface FeeInformationObject {
 // {token address => FeeInformationObject} mapping
 type FeesMap = Record<string, FeeInformationObject>
 
-export interface OperatorState {
+export interface FeeInformationState {
   readonly feesMap: Partial<FeesMap>
 }
 
-const initialState: OperatorState = {
+const initialState: FeeInformationState = {
   feesMap: {}
 }
 

src/custom/state/index.ts

@@ -15,6 +15,8 @@ import multicall from '@src/state/multicall/reducer'
 import operator from './operator/reducer'
 import orders from './orders/reducer'
 import fee from './fee/reducer'
+// CUSTOM MIDDLEWARE
+import { applyFeeMiddleware } from './fee/middleware'
 
 const UNISWAP_REDUCERS = {
   application,
@@ -36,7 +38,7 @@ const store = configureStore({
     orders,
     fee
   },
-  middleware: [...getDefaultMiddleware({ thunk: false }), save({ states: PERSISTED_KEYS })],
+  middleware: [...getDefaultMiddleware({ thunk: false }), save({ states: PERSISTED_KEYS }), applyFeeMiddleware],
   preloadedState: load({ states: PERSISTED_KEYS })
 })