fix: properly update swap state for the final exchange

src/front/shared/pages/Exchange/QuickSwap/Footer.tsx

@@ -5,9 +5,8 @@ import styles from './index.scss'
 import utils from 'common/utils'
 import ADDRESSES from 'common/helpers/constants/ADDRESSES'
 import actions from 'redux/actions'
-import { feedback, externalConfig, constants, transactions, routing, apiLooper } from 'helpers'
+import { feedback, externalConfig, constants, transactions, routing } from 'helpers'
 import { ComponentState, BlockReasons, Actions, Direction } from './types'
-import { buildApiSwapParams, estimateApiSwapData } from './swapApi'
 import {
   SWAP_API,
   GWEI_DECIMALS,
@@ -25,12 +24,13 @@ type FooterProps = {
   isSourceMode: boolean
   sourceAction: Actions
   reportError: (e: IError) => void
-  resetSwapData: () => void
-  resetSpendedAmount: () => void
+  resetSwapData: VoidFunction
+  resetSpendedAmount: VoidFunction
   setBlockReason: (a: BlockReasons) => void
   isApiRequestBlocking: () => boolean
   setPending: (a: boolean) => void
-  onInputDataChange: () => void
+  onInputDataChange: VoidFunction
+  finalizeApiSwapData: () => Promise<void>
   baseChainWallet: IUniversalObj
 }
 
@@ -49,6 +49,7 @@ function Footer(props: FooterProps) {
     setPending,
     baseChainWallet,
     onInputDataChange,
+    finalizeApiSwapData,
   } = props
   const {
     blockReason,
@@ -69,38 +70,13 @@ function Footer(props: FooterProps) {
     error,
     slippage,
     currentLiquidityPair,
-    serviceFee,
-    zeroxApiKey,
   } = parentState
 
   const [finalizeSwap, setFinalizeSwap] = useState<boolean>(false)
-  const [quote, setQuote] = useState<Record<string, string | number> | undefined>(undefined)
 
   const startSwapReview = async () => {
     setFinalizeSwap(true)
-
-    const { headers, endpoint } = buildApiSwapParams({
-      route: '/quote',
-      slippage,
-      spendedAmount,
-      fromWallet,
-      toWallet,
-      serviceFee,
-      zeroxApiKey,
-    })
-    const rawQuote: any = await apiLooper.get(SWAP_API[network.networkVersion].name, endpoint, {
-      headers,
-      sourceError: true,
-      reportErrors: (error: IError) => {},
-    })
-    const data = await estimateApiSwapData({
-      data: rawQuote,
-      baseChainWallet,
-      toWallet,
-      gasLimit,
-      gasPrice,
-    })
-    setQuote(data.swapData)
+    await finalizeApiSwapData()
   }
 
   const approve = async (direction) => {
@@ -298,7 +274,7 @@ function Footer(props: FooterProps) {
   return (
     <div styleName="footer">
       {finalizeSwap && (
-        <ReviewSwapModal data={quote} onSwap={apiSwap} onClose={() => setFinalizeSwap(false)} />
+        <ReviewSwapModal data={swapData} onSwap={apiSwap} onClose={() => setFinalizeSwap(false)} />
       )}
       {needApproveA ? (
         <Button
@@ -330,7 +306,6 @@ function Footer(props: FooterProps) {
         </Button>
       ) : !isSourceMode ? (
         <Button pending={isPending} disabled={!apiSwapIsAvailable} onClick={startSwapReview} brand>
-          Review swap
           <FormattedMessage id="reviewSwap" defaultMessage="Review swap" />
         </Button>
       ) : sourceAction === Actions.Swap ? (

src/front/shared/pages/Exchange/QuickSwap/ReviewSwapModal.tsx

@@ -1,3 +1,25 @@
-export default function ReviewSwapModal() {
-  return <div className="swapPreviewModal">Review swap here</div>
+import { Modal } from 'components/modal'
+
+interface Props {
+  data: any
+  onSwap: VoidFunction
+  onClose: VoidFunction
+}
+
+export default function ReviewSwapModal(props: Props) {
+  const { data, onSwap, onClose } = props
+
+  return (
+    <div className="swapPreviewModal">
+      <Modal
+        name={'Preview swap'}
+        title={'Preview your swap to be sure you are good to go'}
+        onClose={onClose}
+        showCloseButton
+      >
+        <>{JSON.stringify(data, undefined, 2)}</>
+        <button onClick={onSwap}>Swap</button>
+      </Modal>
+    </div>
+  )
 }

src/front/shared/pages/Exchange/QuickSwap/index.tsx

@@ -622,6 +622,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
           gasPrice,
           onError: this.reportError,
         })
+        console.log('SWAP PRICE response', data)
         this.setState(() => ({ ...data }))
       } else if (this.tryToSkipValidation(swap)) {
         const p = buildApiSwapParams({
@@ -643,6 +644,45 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
     }
   }
 
+  finalizeApiSwapData = async () => {
+    const {
+      network,
+      spendedAmount,
+      zeroxApiKey,
+      slippage,
+      fromWallet,
+      toWallet,
+      serviceFee,
+      baseChainWallet,
+      gasLimit,
+      gasPrice,
+    } = this.state
+
+    const { headers, endpoint } = buildApiSwapParams({
+      route: '/quote',
+      slippage,
+      spendedAmount,
+      fromWallet,
+      toWallet,
+      serviceFee,
+      zeroxApiKey,
+    })
+    const rawQuote: any = await apiLooper.get(SWAP_API[network.networkVersion].name, endpoint, {
+      headers,
+      sourceError: true,
+      reportErrors: this.reportError,
+    })
+    const data = await estimateApiSwapData({
+      data: rawQuote,
+      baseChainWallet,
+      toWallet,
+      gasLimit,
+      gasPrice,
+    })
+    console.log('SWAP QUOTE response', data)
+    this.setState(() => ({ ...data }))
+  }
+
   updateCurrentPairAddress = async () => {
     const { network, baseChainWallet, fromWallet, toWallet } = this.state
     const tokenA = fromWallet?.contractAddress || EVM_COIN_ADDRESS
@@ -1201,6 +1241,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
                 insufficientBalanceB={insufficientBalanceB}
                 setPending={this.setPending}
                 onInputDataChange={this.onInputDataChange}
+                finalizeApiSwapData={this.finalizeApiSwapData}
                 baseChainWallet={baseChainWallet}
               />
             </>