use currency swap state for limit order

KyberNetwork · Dec 13, 2023 · 7a9b5c4 · 7a9b5c4
1 parent c866375
commit 7a9b5c4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 49 deletions.
diff --git a/src/state/limit/actions.ts b/src/state/limit/actions.ts
@@ -1,11 +1,7 @@
-import { Currency } from '@kyberswap/ks-sdk-core'
 import { createAction } from '@reduxjs/toolkit'
 
 import { CreateOrderParam } from 'components/swapv2/LimitOrder/type'
 
-export const setLimitCurrency = createAction<{ currencyIn: Currency | undefined; currencyOut: Currency | undefined }>(
-  'limit/setLimitCurrency',
-)
 export const pushOrderNeedCreated = createAction<CreateOrderParam>('limit/pushOrderNeedCreated')
 export const removeOrderNeedCreated = createAction<number>('limit/removeOrderNeedCreated')
 

diff --git a/src/state/limit/hooks.ts b/src/state/limit/hooks.ts
@@ -6,23 +6,29 @@ import { CreateOrderParam } from 'components/swapv2/LimitOrder/type'
 import { APP_PATHS } from 'constants/index'
 import useDefaultsTokenFromURLSearch from 'hooks/useDefaultsTokenFromURLSearch'
 import { AppDispatch, AppState } from 'state/index'
+import { Field } from 'state/swap/actions'
+import { useInputCurrency, useOutputCurrency, useSwapActionHandlers } from 'state/swap/hooks'
 
 import {
   pushOrderNeedCreated as pushOrderNeedCreatedAction,
   removeOrderNeedCreated as removeOrderNeedCreatedAction,
   setInputAmount,
-  setLimitCurrency,
   setOrderEditing as setOrderEditingAction,
 } from './actions'
 import { LimitState } from './reducer'
 
-export function useLimitState(): LimitState {
-  return useSelector((state: AppState) => state.limit)
+export function useLimitState(): LimitState & { currencyIn: Currency | undefined; currencyOut: Currency | undefined } {
+  const currencyIn = useInputCurrency()
+  const currencyOut = useOutputCurrency()
+  const state = useSelector((state: AppState) => state.limit)
+  return { ...state, currencyIn, currencyOut }
 }
 
 export function useLimitActionHandlers() {
   const dispatch = useDispatch<AppDispatch>()
   const { currencyIn, currencyOut } = useLimitState()
+  const { onSwitchTokensV2, onCurrencySelection } = useSwapActionHandlers()
+
   const { inputCurrency, outputCurrency } = useDefaultsTokenFromURLSearch(currencyIn, currencyOut, APP_PATHS.LIMIT)
 
   const setInputValue = useCallback(
@@ -36,19 +42,29 @@ export function useLimitActionHandlers() {
     setInputValue('')
   }, [setInputValue])
 
+  const setCurrencyIn = useCallback(
+    (currencyIn: Currency | undefined) => {
+      currencyIn && onCurrencySelection(Field.INPUT, currencyIn)
+    },
+    [onCurrencySelection],
+  )
+
+  const setCurrencyOut = useCallback(
+    (currencyOut: Currency | undefined) => {
+      currencyOut && onCurrencySelection(Field.OUTPUT, currencyOut)
+    },
+    [onCurrencySelection],
+  )
+
   const onSelectPair = useCallback(
     (currencyIn: Currency | undefined, currencyOut: Currency | undefined, inputAmount?: string) => {
-      dispatch(
-        setLimitCurrency({
-          currencyIn,
-          currencyOut,
-        }),
-      )
+      setCurrencyIn(currencyIn)
+      setCurrencyOut(currencyOut)
       if (inputAmount !== undefined) {
         setInputValue(inputAmount)
       }
     },
-    [dispatch, setInputValue],
+    [setInputValue, setCurrencyIn, setCurrencyOut],
   )
 
   useEffect(() => {
@@ -60,24 +76,6 @@ export function useLimitActionHandlers() {
     }
   }, [onSelectPair, inputCurrency, outputCurrency, currencyIn, currencyOut])
 
-  const setCurrencyIn = useCallback(
-    (currencyIn: Currency | undefined) => {
-      onSelectPair(currencyIn, currencyOut)
-    },
-    [currencyOut, onSelectPair],
-  )
-
-  const setCurrencyOut = useCallback(
-    (currencyOut: Currency | undefined) => {
-      onSelectPair(currencyIn, currencyOut)
-    },
-    [currencyIn, onSelectPair],
-  )
-
-  const switchCurrency = useCallback(() => {
-    onSelectPair(currencyOut, currencyIn)
-  }, [onSelectPair, currencyOut, currencyIn])
-
   const pushOrderNeedCreated = useCallback(
     (order: CreateOrderParam) => {
       dispatch(pushOrderNeedCreatedAction(order))
@@ -100,7 +98,7 @@ export function useLimitActionHandlers() {
   )
 
   return {
-    switchCurrency,
+    switchCurrency: onSwitchTokensV2,
     setCurrencyIn,
     setCurrencyOut,
     onSelectPair,

diff --git a/src/state/limit/reducer.ts b/src/state/limit/reducer.ts
@@ -1,28 +1,17 @@
-import { Currency } from '@kyberswap/ks-sdk-core'
 import { createReducer } from '@reduxjs/toolkit'
 
 import { CreateOrderParam } from 'components/swapv2/LimitOrder/type'
 
-import {
-  pushOrderNeedCreated,
-  removeOrderNeedCreated,
-  setInputAmount,
-  setLimitCurrency,
-  setOrderEditing,
-} from './actions'
+import { pushOrderNeedCreated, removeOrderNeedCreated, setInputAmount, setOrderEditing } from './actions'
 
 export interface LimitState {
   inputAmount: string
-  currencyIn: Currency | undefined
-  currencyOut: Currency | undefined
   ordersNeedCreated: CreateOrderParam[]
   orderEditing: CreateOrderParam | undefined
 }
 
 const initialState: LimitState = {
   inputAmount: '',
-  currencyIn: undefined,
-  currencyOut: undefined,
   ordersNeedCreated: [], // orders need to be created when cancel is completed
   orderEditing: undefined, // order is editing
 }
@@ -32,10 +21,6 @@ export default createReducer<LimitState>(initialState, builder =>
     .addCase(setInputAmount, (state, { payload: inputAmount }) => {
       state.inputAmount = inputAmount
     })
-    .addCase(setLimitCurrency, (state, { payload: { currencyIn, currencyOut } }) => {
-      state.currencyIn = currencyIn
-      state.currencyOut = currencyOut
-    })
     .addCase(pushOrderNeedCreated, (state, { payload }) => {
       state.ordersNeedCreated = [...state.ordersNeedCreated, payload]
     })