Merge pull request #5237 from swaponline/fix-quickswap-api

Fix: Quickswap

src/common/utils/request.ts

@@ -112,10 +112,11 @@ const sendRequest = (options) => {
   const opts = { ...defaultOptions, ...options }
   const req = request[opts.method](opts.endpoint)
 
-  // req.set({
-  //   'Content-Type': opts.formData ? 'application/x-www-form-urlencoded; charset=UTF-8' : 'application/json',
-  //   ...(opts.headers || {}),
-  // })
+  if (opts.headers) {
+    req.set({
+      ...opts.headers,
+    })
+  }
 
   if (opts.timeout) {
     req.timeout({

src/front/config/mainnet/api.js

@@ -4,6 +4,7 @@ export default {
   zeroxPolygon: 'https://polygon.api.0x.org',
   zeroxFantom: 'https://fantom.api.0x.org',
   zeroxAvalanche: 'https://avalanche.api.0x.org',
+  zeroxArbitrum: 'https://arbitrum.api.0x.org',
   oneinch: 'https://api.1inch.exchange/v3.0',
   limitOrders: 'https://limit-orders.1inch.exchange/v1.0',
   horizon: 'https://horizon.stellar.org',

src/front/config/mainnet/swapContract.js

@@ -8,7 +8,7 @@ export default {
   protectedBtcKey: '025c8ee352e8b0d12aecd8b3d9ac3bd93cae1b2cc5de7ac56c2995ab506ac800bd',
   btcPinKey: '032aec5d20f9a0bb913a9835330259748392927c9a812299c4498a9e2ed3e78d3f',
   zerox: '0xdef1c0ded9bec7f1a1670819833240f027b25eff',
-
+  zeroxFantom: '0xdef189deaef76e379df891899eb5a00a94cbc250',
   uniswapRouter: '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D', // Ethereum
   uniswapFactory: '0x5C69bEe701ef814a2B6a3EDD4B1652CB9cc5aA6f',
   pancakeswapRouter: '0x10ED43C718714eb63d5aA57B78B54704E256024E', // BSC

src/front/config/testnet/api.js

@@ -1,5 +1,6 @@
 export default {
-  zeroxRopsten: 'https://ropsten.api.0x.org',
+  zeroxSepolia: 'https://sepolia.api.0x.org',
+  zeroxMumbai: 'https://mumbai.api.0x.org',
   oneinch: 'https://api.1inch.exchange/v3.0',
   limitOrders: 'https://limit-orders.1inch.exchange/v1.0',
   horizon: 'https://horizon-testnet.stellar.org',

src/front/config/testnet/swapContract.js

@@ -9,7 +9,8 @@ export default {
   reputationOracle: '0x6260B5ef52d72732674fF4BDE3B37a4222dB1785',
   protectedBtcKey: '023d894571a253b87868db7d54a8b583e0c8ce53b484af8a0b0390b7722975cfaa',
   btcPinKey: '02094916ddab5abf215a49422a71be54ceb92c3d8114909048fc45ee90acdb5b32',
-
+  zeroxSepolia: '0xdef1c0ded9bec7f1a1670819833240f027b25eff',
+  zeroxMumbai: '0xf471d32cb40837bf24529fcf17418fc1a4807626',
   uniswapRouter: '0x1b02dA8Cb0d097eB8D57A175b88c7D8b47997506', // Rinkeby
   uniswapFactory: '0xc35DADB65012eC5796536bD9864eD8773aBc74C4',
   pancakeswapRouter: '0x9Ac64Cc6e4415144C455BD8E4837Fea55603e5c3', // BSC testnet

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

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import CSSModules from 'react-css-modules'
 import styles from './index.scss'
 import { BlockReasons, Actions } from './types'
-import { API_NAME } from './constants'
+import { SWAP_API } from './constants'
 
 function Feedback(props) {
   const {
@@ -25,7 +25,7 @@ function Feedback(props) {
 
   return (
     <section>
-      {!isSourceMode && !API_NAME[network?.networkVersion] ? (
+      {!isSourceMode && !SWAP_API[network?.networkVersion] ? (
         <p styleName="dangerousNotice">
           <FormattedMessage
             id="aggregatorCannotUseThisNetwork"

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

@@ -1,32 +1,43 @@
 import { FormattedMessage } from 'react-intl'
+import { useState } from 'react'
 import CSSModules from 'react-css-modules'
 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 } from 'helpers'
 import { ComponentState, BlockReasons, Actions, Direction } from './types'
-import { GWEI_DECIMALS, COIN_DECIMALS, LIQUIDITY_SOURCE_DATA, SEC_PER_MINUTE } from './constants'
+import {
+  SWAP_API,
+  GWEI_DECIMALS,
+  COIN_DECIMALS,
+  LIQUIDITY_SOURCE_DATA,
+  SEC_PER_MINUTE,
+} from './constants'
 import Button from 'components/controls/Button/Button'
+import ReviewSwapModal from './ReviewSwapModal'
 
 type FooterProps = {
+  history: any
   parentState: ComponentState
   insufficientBalanceA: boolean
   insufficientBalanceB: boolean
   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
 }
 
 function Footer(props: FooterProps) {
   const {
+    history,
     parentState,
     isSourceMode,
     sourceAction,
@@ -40,6 +51,7 @@ function Footer(props: FooterProps) {
     setPending,
     baseChainWallet,
     onInputDataChange,
+    finalizeApiSwapData,
   } = props
   const {
     blockReason,
@@ -60,12 +72,22 @@ function Footer(props: FooterProps) {
     error,
     slippage,
     currentLiquidityPair,
+    swapFee,
+    serviceFee,
+    fiat,
   } = parentState
 
+  const [finalizeSwap, setFinalizeSwap] = useState<boolean>(false)
+
+  const startSwapReview = async () => {
+    setFinalizeSwap(true)
+    await finalizeApiSwapData()
+  }
+
   const approve = async (direction) => {
-    const spender = isSourceMode
+    const spender: `0x${number}` = isSourceMode
       ? LIQUIDITY_SOURCE_DATA[network.networkVersion]?.router
-      : externalConfig.swapContract.zerox
+      : externalConfig.swapContract[SWAP_API[network.networkVersion].spender]
 
     let wallet = fromWallet
     let amount = spendedAmount
@@ -97,6 +119,10 @@ function Footer(props: FooterProps) {
 
   const apiSwap = async () => {
     if (isSourceMode) return
+    if (!swapData) throw new Error('No swap data. Can not complete swap')
+    if (swapData.to !== externalConfig.swapContract[SWAP_API[network.networkVersion].spender]) {
+      return console.log('%c0x constant proxy is not equal to swap transaction proxy', 'color:red')
+    }
 
     const baseCurrency = fromWallet.standard ? fromWallet.baseCurrency : fromWallet.currency
     const assetName = fromWallet.standard ? fromWallet.tokenKey : fromWallet.currency
@@ -107,10 +133,6 @@ function Footer(props: FooterProps) {
     setPending(true)
 
     try {
-      if (!swapData) {
-        throw new Error('No swap data. Can not complete swap')
-      }
-
       if (gasLimit) swapData.gas = gasLimit
       if (gasPrice) swapData.gasPrice = utils.amount.formatWithDecimals(gasPrice, GWEI_DECIMALS)
 
@@ -120,7 +142,6 @@ function Footer(props: FooterProps) {
 
       if (txHash) {
         const txInfoUrl = transactions.getTxRouter(assetName.toLowerCase(), txHash)
-
         routing.redirectTo(txInfoUrl)
       }
 
@@ -131,6 +152,7 @@ function Footer(props: FooterProps) {
     }
 
     setPending(false)
+    setFinalizeSwap(false)
   }
 
   const directSwap = async () => {
@@ -227,7 +249,11 @@ function Footer(props: FooterProps) {
 
   const doNotMakeApiRequest = isApiRequestBlocking()
 
-  const commonBlockReasons = isPending || (blockReason !== BlockReasons.NotApproved && !!error && (!error.message?.match('transfer amount exceeds allowance')))
+  const commonBlockReasons =
+    isPending ||
+    (blockReason !== BlockReasons.NotApproved &&
+      !!error &&
+      !error.message?.match('transfer amount exceeds allowance'))
   const formFilled = !!spendedAmount && !!receivedAmount
 
   const approvingDoesNotMakeSense =
@@ -252,6 +278,24 @@ function Footer(props: FooterProps) {
 
   return (
     <div styleName="footer">
+      {finalizeSwap && (
+        <ReviewSwapModal
+          isPending={isPending}
+          data={swapData}
+          onSwap={apiSwap}
+          onClose={() => setFinalizeSwap(false)}
+          history={history}
+          swapFee={swapFee}
+          fiat={fiat}
+          serviceFee={serviceFee}
+          slippage={slippage}
+          network={network}
+          spendedAmount={spendedAmount}
+          baseChainWallet={baseChainWallet}
+          fromWallet={fromWallet}
+          toWallet={toWallet}
+        />
+      )}
       {needApproveA ? (
         <Button
           pending={isPending}
@@ -281,8 +325,8 @@ function Footer(props: FooterProps) {
           />
         </Button>
       ) : !isSourceMode ? (
-        <Button pending={isPending} disabled={!apiSwapIsAvailable} onClick={apiSwap} brand>
-          <FormattedMessage id="swap" defaultMessage="Swap" />
+        <Button pending={isPending} disabled={!apiSwapIsAvailable} onClick={startSwapReview} brand>
+          <FormattedMessage id="reviewSwap" defaultMessage="Review swap" />
         </Button>
       ) : sourceAction === Actions.Swap ? (
         <Button pending={isPending} disabled={!directSwapIsAvailable} onClick={directSwap} brand>

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

@@ -0,0 +1,76 @@
+import { FormattedMessage } from 'react-intl'
+import { useState } from 'react'
+import { Modal } from 'components/modal'
+import Button from 'components/controls/Button/Button'
+import UserInfo from './UserInfo'
+import { SwapInfo, SwapData } from './types'
+
+interface Props {
+  onSwap: VoidFunction
+  onClose: VoidFunction
+  history: any,
+  isPending: boolean,
+  data: SwapData | undefined
+}
+
+export default function ReviewSwapModal(props: Props & SwapInfo) {
+  const {
+    isPending,
+    data,
+    onSwap,
+    onClose,
+    history,
+    swapFee,
+    fiat,
+    serviceFee,
+    slippage,
+    network,
+    spendedAmount,
+    baseChainWallet,
+    fromWallet,
+    toWallet,
+  } = props
+
+  const [isSwapStarted, setIsSwapStarted] = useState(false)
+
+  const startSwap = () => {
+    setIsSwapStarted(true)
+    onSwap()
+  }
+
+  return (
+    <Modal
+      name={'Preview swap'}
+      title={<FormattedMessage id="previewSwap" defaultMessage="Preview swap" />}
+      onClose={onClose}
+      showCloseButton
+    >
+      <div className="swapPreviewWrapper">
+        {!isPending && (
+          <UserInfo
+            history={history}
+            isSourceMode={false}
+            slippage={slippage}
+            network={network}
+            swapData={data}
+            swapFee={swapFee}
+            spendedAmount={spendedAmount}
+            baseChainWallet={baseChainWallet}
+            fromWallet={fromWallet}
+            toWallet={toWallet}
+            fiat={fiat}
+            serviceFee={serviceFee}
+          />
+        )}
+        {isSwapStarted && (
+          <p className="swapInProgressMessage">
+            <FormattedMessage id="waitUntilSwapComplete" defaultMessage="Please wait until the swap is complete" />
+          </p>
+        )}
+        <Button pending={isPending} disabled={isPending} onClick={startSwap} brand fullWidth>
+          <FormattedMessage id="swap" defaultMessage="Swap" />
+        </Button>
+      </div>
+    </Modal>
+  )
+}

src/front/shared/pages/Exchange/QuickSwap/constants.ts

@@ -11,12 +11,39 @@ export const GWEI_DECIMALS = 9
 export const MAX_PERCENT = 100
 export const SEC_PER_MINUTE = 60
 
-export const API_NAME = {
-  1: 'zeroxEthereum',
-  56: 'zeroxBsc',
-  137: 'zeroxPolygon',
-  250: 'zeroxFantom',
-  43114: 'zeroxAvalanche',
+export const SWAP_API = {
+  1: {
+    name: 'zeroxEthereum',
+    spender: 'zerox',
+  },
+  11155111: {
+    name: 'zeroxSepolia',
+    spender: 'zeroxSepolia',
+  },
+  56: {
+    name: 'zeroxBsc',
+    spender: 'zerox',
+  },
+  137: {
+    name: 'zeroxPolygon',
+    spender: 'zerox',
+  },
+  80001: {
+    name: 'zeroxMumbai',
+    spender: 'zeroxMumbai',
+  },
+  250: {
+    name: 'zeroxFantom',
+    spender: 'zeroxFantom',
+  },
+  43114: {
+    name: 'zeroxAvalanche',
+    spender: 'zerox',
+  },
+  42161: {
+    name: 'zeroxArbitrum',
+    spender: 'zerox',
+  },
 }
 
 export const API_GAS_LIMITS = {

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

@@ -216,6 +216,16 @@ $maxWidth: 38em;
   margin-bottom: 0.5rem;
 }
 
+.swapPreviewWrapper {
+  max-width: $maxWidth;
+}
+
+.swapInProgressMessage {
+  width: 100%;
+  padding: 30px 0;
+  text-align: center;
+}
+
 @media all and (max-width: 500px) {
   .newTokenInstruction {
     font-size: 0.95rem;