fix: asset selection resets to default after navigating backwards in …

…the swap process #90
mento-protocol · Oct 17, 2024 · 8f9fc27 · 8f9fc27
1 parent 380b5ca
commit 8f9fc27
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/src/features/swap/SwapConfirm.tsx b/src/features/swap/SwapConfirm.tsx
@@ -6,7 +6,7 @@ import { toastToYourSuccess } from 'src/components/TxSuccessToast'
 import { Button3D } from 'src/components/buttons/3DButton'
 import { TokenId, Tokens } from 'src/config/tokens'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
-import { setFormValues } from 'src/features/swap/swapSlice'
+import { setConfirmView, setFormValues } from 'src/features/swap/swapSlice'
 import { SwapFormValues } from 'src/features/swap/types'
 import { useApproveTransaction } from 'src/features/swap/useApproveTransaction'
 import { useSwapQuote } from 'src/features/swap/useSwapQuote'
@@ -142,7 +142,7 @@ export function SwapConfirmCard({ formValues }: Props) {
   }, [isApproveTxSuccess, isSwapTxLoading, isSwapTxSuccess, sendSwapTx, chainId, dispatch])
 
   const onClickBack = () => {
-    dispatch(setFormValues(null))
+    dispatch(setConfirmView(false))
   }
 
   const onClickRefresh = () => {

diff --git a/src/features/swap/SwapForm.tsx b/src/features/swap/SwapForm.tsx
@@ -20,7 +20,7 @@ import { reset as blockReset } from 'src/features/blocks/blockSlice'
 import { resetTokenPrices } from 'src/features/chart/tokenPriceSlice'
 import { useAppDispatch, useAppSelector } from 'src/features/store/hooks'
 import { SettingsMenu } from 'src/features/swap/SettingsMenu'
-import { setFormValues, reset as swapReset } from 'src/features/swap/swapSlice'
+import { setConfirmView, setFormValues, reset as swapReset } from 'src/features/swap/swapSlice'
 import { SwapDirection, SwapFormValues } from 'src/features/swap/types'
 import { useFormValidator } from 'src/features/swap/useFormValidator'
 import { useSwapQuote } from 'src/features/swap/useSwapQuote'
@@ -66,12 +66,16 @@ function SwapForm() {
   const dispatch = useAppDispatch()
   const onSubmit = (values: SwapFormValues) => {
     dispatch(setFormValues(values))
+    dispatch(setConfirmView(true)) // Switch to confirm view
   }
   const validateForm = useFormValidator(balances)
+  const storedFormValues = useAppSelector((s) => s.swap.formValues) // Get stored form values
+  const initialFormValues = storedFormValues || initialValues // Use stored values if they exist
+
 
   return (
     <Formik<SwapFormValues>
-      initialValues={initialValues}
+      initialValues={initialFormValues}
       onSubmit={onSubmit}
       validate={validateForm}
       validateOnChange={true}

diff --git a/src/features/swap/swapSlice.ts b/src/features/swap/swapSlice.ts
@@ -6,13 +6,15 @@ export interface SwapState {
   toCeloRates: ToCeloRates
   showSlippage: boolean
   showChart: boolean
+  confirmView: boolean,
 }
 
 const initialState: SwapState = {
   formValues: null,
   toCeloRates: {},
   showSlippage: false,
   showChart: false,
+  confirmView: false,
 }
 
 export const swapSlice = createSlice({
@@ -29,8 +31,11 @@ export const swapSlice = createSlice({
       state.showChart = action.payload
     },
     reset: () => initialState,
+    setConfirmView(state, action) {
+      state.confirmView = action.payload
+    },
   },
 })
 
-export const { setFormValues, setShowSlippage, setShowChart, reset } = swapSlice.actions
+export const { setFormValues, setShowSlippage, setShowChart, reset, setConfirmView } = swapSlice.actions
 export const swapReducer = swapSlice.reducer
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,12 +6,15 @@ import { SwapConfirmCard } from 'src/features/swap/SwapConfirm'
 import { SwapFormCard } from 'src/features/swap/SwapForm'
 
 export default function SwapPage() {
-  const { formValues, showChart } = useAppSelector((state) => state.swap)
+  const { formValues, showChart, confirmView } = useAppSelector((state) => state.swap)
   return (
     <div className="flex justify-center items-center h-full flex-wrap w-full">
       <div className="mb-6 w-full max-w-md">
-        {!formValues ? <SwapFormCard /> : <SwapConfirmCard formValues={formValues} />}
-      </div>
+      {!formValues || !confirmView ? (
+          <SwapFormCard />
+        ) : (
+          <SwapConfirmCard formValues={formValues} />
+        )}      </div>
       {config.showPriceChart && showChart && (
         <div className="mb-6 md:ml-10">
           <PriceChartCelo stableTokenId={TokenId.cUSD} height={265} />