feat: add 0x API key in the swap requests

Author: Disti4ct

Diff for: .gitignore

@@ -1,6 +1,7 @@
 # editors
 
 .idea
+.vscode
 .DS_Store
 .eslintcache
 *-lock.*

Diff for: 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({

Diff for: 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',

Diff for: 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

Diff for: 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"

Diff for: src/front/shared/pages/Exchange/QuickSwap/Footer.tsx

@@ -98,6 +98,8 @@ function Footer(props: FooterProps) {
   const apiSwap = async () => {
     if (isSourceMode) return
 
+    // TODO Check the correct proxy contract in the final data
+
     const baseCurrency = fromWallet.standard ? fromWallet.baseCurrency : fromWallet.currency
     const assetName = fromWallet.standard ? fromWallet.tokenKey : fromWallet.currency
 

Diff for: src/front/shared/pages/Exchange/QuickSwap/constants.ts

@@ -11,12 +11,31 @@ 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',
+  },
+  56: {
+    name: 'zeroxBsc',
+    spender: 'zerox',
+  },
+  137: {
+    name: 'zeroxPolygon',
+    spender: 'zerox',
+  },
+  250: {
+    name: 'zeroxFantom',
+    spender: 'zeroxFantom',
+  },
+  43114: {
+    name: 'zeroxAvalanche',
+    spender: 'zerox',
+  },
+  42161: {
+    name: 'zeroxArbitrum',
+    spender: 'zerox',
+  },
 }
 
 export const API_GAS_LIMITS = {

Diff for: src/front/shared/pages/Exchange/QuickSwap/index.tsx

@@ -31,7 +31,7 @@ import {
   CurrencyMenuItem,
 } from './types'
 import {
-  API_NAME,
+  SWAP_API,
   GWEI_DECIMALS,
   COIN_DECIMALS,
   API_GAS_LIMITS,
@@ -192,6 +192,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
       gasLimit: '',
       blockReason: undefined,
       serviceFee: false,
+      zeroxApiKey: window.zeroxApiKey || '',
     }
   }
 
@@ -314,7 +315,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
         const { coin, blockchain } = getCoinInfo(currency.value)
         const network = externalConfig.evmNetworks[blockchain || coin]
 
-        return !!API_NAME[network?.networkVersion]
+        return !!SWAP_API[network?.networkVersion]
       })
     }
 
@@ -346,7 +347,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
 
     const feeOptsKey = fromWallet?.standard || fromWallet?.currency
     const currentFeeOpts = externalConfig.opts.fee[feeOptsKey?.toLowerCase()]
-    const correctFeeRepresentation =      !Number.isNaN(window?.zeroxFeePercent)
+    const correctFeeRepresentation = !Number.isNaN(window?.zeroxFeePercent)
       && window.zeroxFeePercent >= 0
       && window.zeroxFeePercent <= 100
 
@@ -502,8 +503,8 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
     }))
   }
 
-  createSwapRequest = (skipValidation = false) => {
-    const { slippage, spendedAmount, fromWallet, toWallet, serviceFee } = this.state
+  buildSwapParams = (route: '/price' | '/quote', skipValidation = false) => {
+    const { slippage, spendedAmount, fromWallet, toWallet, serviceFee, zeroxApiKey } = this.state
 
     const sellToken = fromWallet?.contractAddress || EVM_COIN_ADDRESS
     const buyToken = toWallet?.contractAddress || EVM_COIN_ADDRESS
@@ -516,7 +517,7 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
     const enoughBalanceForSwap = new BigNumber(fromWallet.balance).isGreaterThan(new BigNumber(spendedAmount))
 
     const request = [
-      `/swap/v1/quote?`,
+      `/swap/v1${route}?`,
       `buyToken=${buyToken}&`,
       `sellToken=${sellToken}&`,
       `sellAmount=${sellAmount}`,
@@ -531,7 +532,6 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
 
     if (serviceFee) {
       const { address, percent } = serviceFee
-
       request.push(`&feeRecipient=${address}`)
       request.push(`&buyTokenPercentageFee=${percent}`)
     }
@@ -544,11 +544,13 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
       // allow users to enter an amount up to 100, because it's more easy then enter the amount from 0 to 1
       // and now convert it into the api format
       const correctValue = new BigNumber(slippage).dividedBy(MAX_PERCENT)
-
       request.push(`&slippagePercentage=${correctValue}`)
     }
 
-    return request.join('')
+    return {
+      headers: { '0x-api-key': zeroxApiKey },
+      endpoint: request.join(''),
+    }
   }
 
   onInputDataChange = async () => {
@@ -640,7 +642,11 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
   }
 
   fetchSwapAPIData = async () => {
-    const { network, spendedAmount, isPending } = this.state
+    const { isSourceMode, network, spendedAmount, isPending, zeroxApiKey } = this.state
+
+    if (!isSourceMode && !zeroxApiKey) {
+      return console.log('%c0x API key is not set', 'color:red')
+    }
 
     const dontFetch = (
       new BigNumber(spendedAmount).isNaN()
@@ -656,31 +662,37 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
     }))
 
     let repeatRequest = true
-    let swapRequest = this.createSwapRequest()
+    // TODO Send basic requests to /price to avoid exceeding API limits 
+    const params = this.buildSwapParams('/quote')
+    let { headers, endpoint } = params
 
     while (repeatRequest) {
-      const swap: any = await apiLooper.get(API_NAME[network.networkVersion], swapRequest, {
-        reportErrors: (error) => {
+      const swap: any = await apiLooper.get(SWAP_API[network.networkVersion].name, endpoint, {
+        headers,
+        sourceError: true,
+        reportErrors: (error: IError) => {
           if (!repeatRequest) {
             this.reportError(error)
           }
         },
-        sourceError: true,
       })
 
+      console.table(swap)
+
       if (!(swap instanceof Error)) {
         repeatRequest = false
 
         await this.calculateDataFromSwap({
           swap,
-          withoutValidation: swapRequest.match(/skipValidation/),
+          withoutValidation: endpoint.match(/skipValidation/),
         })
       } else if (this.tryToSkipValidation(swap)) {
         // it's a special error. Will be a new request
-        swapRequest = this.createSwapRequest(true)
+        const p = this.buildSwapParams('/quote', true)
+        headers = p.headers
+        endpoint = p.endpoint
       } else {
         this.reportError(swap)
-
         repeatRequest = false
       }
     }
@@ -828,9 +840,9 @@ class QuickSwap extends PureComponent<IUniversalObj, ComponentState> {
       wallet = toWallet
     }
 
-    const spender = isSourceMode
+    const spender: `0x${number}` = isSourceMode
       ? LIQUIDITY_SOURCE_DATA[network.networkVersion]?.router
-      : externalConfig.swapContract.zerox
+      : externalConfig.swapContract[SWAP_API[network.networkVersion].spender]
 
     if (!wallet.isToken) {
       this.setNeedApprove(direction, false)

Diff for: src/front/shared/pages/Exchange/QuickSwap/types.ts

@@ -93,4 +93,5 @@ export type ComponentState = {
   blockReason: BlockReasons | undefined
   liquidityErrorMessage: string
   serviceFee: ServiceFee | false
+  zeroxApiKey: string
 }