feat: migrate limit orders to utilize redux for state management (#8112)

* feat: migrate tradeInputSlice to higher-order-slice pattern

* feat: move common input selectors into a selector factory

* chore: add some code comments

* feat: added limitOrderInputSlice

* feat: migrate the rest of the shared selectors

* feat: wire in redux user slippage for limit orders

* feat: wire in redux sell asset for limit orders

* feat: wire in redux buy asset for limit orders

* fix: use hardcoded cowswap for default limit order slippage

* feat: migrate marketPriceBuyAsset to redux

* feat: migrate limit order account IDs to redux

* feat: migrate limit order input amounts to redux

* chore: move selectCalculatedFees into into snapshot selectors

* chore: cleanup voting power selectors

* feat: migrate limit order useLimitOrderRecipientAddress to redux

* chore: cleanup slippage percentages in limit order input

* feat: migrate remaining limit order input handlers to redux

* feat: introduced useActions hook for max cleanliness

* chore: unify naming of trade input actions and selectors

* fix: free trades are free

* fix: reset market rate when switching assets

* fix: import from wrong slice, prevent it from happening again

* chore: useActions for the useLimitOrderRecipientAddress hook

* chore: actioned gome review feedback

src/components/FeeExplainer/FeeExplainer.tsx

@@ -26,7 +26,11 @@ import { calculateFees } from 'lib/fees/model'
 import { FEE_CURVE_PARAMETERS, FEE_MODEL_TO_FEATURE_NAME } from 'lib/fees/parameters'
 import type { ParameterModel } from 'lib/fees/parameters/types'
 import { isSome } from 'lib/utils'
-import { selectIsSnapshotApiQueriesPending, selectVotingPower } from 'state/apis/snapshot/selectors'
+import {
+  selectIsSnapshotApiQueriesPending,
+  selectIsSnapshotApiQueriesRejected,
+  selectVotingPower,
+} from 'state/apis/snapshot/selectors'
 import { useAppSelector } from 'state/store'
 
 import { CHART_TRADE_SIZE_MAX_USD } from './common'
@@ -135,28 +139,32 @@ const FeeChart: React.FC<FeeChartProps> = ({ foxHolding, tradeSize, feeModel })
     return handleDebounce.cancel
   }, [foxHolding])
 
+  const isSnapshotApiQueriesRejected = useAppSelector(selectIsSnapshotApiQueriesRejected)
+
   const data = useMemo(() => {
     return tradeSizeData
       .map(trade => {
         const feeBps = calculateFees({
           tradeAmountUsd: bn(trade),
           foxHeld: bn(debouncedFoxHolding),
           feeModel,
+          isSnapshotApiQueriesRejected,
         }).feeBpsFloat.toNumber()
         return { x: trade, y: feeBps }
       })
       .filter(isSome)
-  }, [debouncedFoxHolding, feeModel])
+  }, [debouncedFoxHolding, feeModel, isSnapshotApiQueriesRejected])
 
   const currentPoint = useMemo(() => {
     const feeBps = calculateFees({
       tradeAmountUsd: bn(tradeSize),
       foxHeld: bn(debouncedFoxHolding),
       feeModel,
+      isSnapshotApiQueriesRejected,
     }).feeBpsFloat.toNumber()
 
     return [{ x: tradeSize, y: feeBps }]
-  }, [tradeSize, debouncedFoxHolding, feeModel])
+  }, [tradeSize, debouncedFoxHolding, feeModel, isSnapshotApiQueriesRejected])
 
   const tickLabelProps = useCallback(
     () => ({ fill: textColor, fontSize: 12, fontWeight: 'medium' }),
@@ -253,11 +261,13 @@ type FeeOutputProps = {
 }
 
 export const FeeOutput: React.FC<FeeOutputProps> = ({ tradeSizeUSD, foxHolding, feeModel }) => {
+  const isSnapshotApiQueriesRejected = useAppSelector(selectIsSnapshotApiQueriesRejected)
   const { feeUsd, feeBps, foxDiscountPercent, feeUsdBeforeDiscount, feeBpsBeforeDiscount } =
     calculateFees({
       tradeAmountUsd: bn(tradeSizeUSD),
       foxHeld: bn(foxHolding),
       feeModel,
+      isSnapshotApiQueriesRejected,
     })
 
   const basedOnFeeTranslation: TextPropTypes['translation'] = useMemo(

src/components/FeeModal/FeeBreakdown.tsx

@@ -6,7 +6,7 @@ import { RawText } from 'components/Text'
 import { BigNumber } from 'lib/bignumber/bignumber'
 import { FEE_MODEL_TO_FEATURE_NAME } from 'lib/fees/parameters'
 import type { ParameterModel } from 'lib/fees/parameters/types'
-import { selectCalculatedFees } from 'state/slices/tradeQuoteSlice/selectors'
+import { selectCalculatedFees } from 'state/apis/snapshot/selectors'
 import { useAppSelector } from 'state/store'
 
 const divider = <Divider />