Build A Web3 DEX | FULL COURSE | React, Node, Moralis, 1Inch

Moralis General
#1

Hi,

I have followed the Youtube tutorial for building my own DEX. I have followed all the steps but realized that 1inch have stopped their Public API. Is there anything I need to modify in my code because of that?

Using the exact same code as in the Youtube tutorial I can not perform Swaps in Dev. I get these errors in my broswer console:

Access to XMLHttpRequest at 'https://api.1inch.dev/swap/v5.2/137/approve/allowance?tokenAddress=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48&walletAddress=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:247     GET https://api.1inch.dev/swap/v5.2/137/approve/allowance?tokenAddress=0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48&walletAddress=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx net::ERR_FAILED 401
dispatchXhrRequest @ xhr.js:247
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:142
Axios.<computed> @ Axios.js:168
wrap @ bind.js:5
fetchDexSwap @ Swap.js:98
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Swap.js:119 Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}code: "ERR_NETWORK"config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: "Network Error"name: "AxiosError"request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}stack: "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:111373:14)"[[Prototype]]: Error
fetchDexSwap @ Swap.js:119
await in fetchDexSwap (async)
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
1 Like
Access to XMLHttpRequest at ' ...' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request
#2

Hi @tanfoglio

How did you find that their public API is stopped? If it is an official thing maybe we need to get the latest API endpoint from their docs.

#3

Hi,

Visited https://docs.1inch.io/docs/aggregation-protocol/api/swagger

And it says:

The public Swap API api.1inch.io is deprecated. To continue using the Swap API please migrate to the 1inch Developer Portal

#4

Then I guess the only option is to update as per their new docs.

https://portal.1inch.dev/documentation/swap/swagger

#5

Yes probably, but how do I solve the errors I receive?

#6

The error which you received was a CORS error. So it should be auto fixed when you update to the new 1Inch endpoint.

#7

What should I change from the original dexfinal Swap.js code to migrate to the new 1inch API? Can you assist me please? Doesn’t seem to work for me.

1 Like
#8

I haven’t tried it yet. I can only show which is shown in their docs.

Can you once try endpoints from the swagger shown in the below docs?
https://portal.1inch.dev/documentation/swap/swagger

After testing you can compare the API Url from the docs with your API Url in code. If everything is matching and you still see CORS error then it is possible that they might have blocked using the API in frontend apps. If that is the case then you have to move your API calls to backend.

#9

I have tried the examples from their docs, and included the API key in the request header. Still get CORS error. Trying to move the calls to backend and fetch the response from there, but I get an internal server error 500. Not sure whats wrong

#10

Internal server mean that there was an unhandled error in the backend code. You can try adding a try catch to log the error for more details.

#11

did you overcome through this error?