Code a Uniswap V3 Frontend that Swaps Tokens | ReactJS, Uniswap V3 SDK, AlphaRouter, EthersJS

Get my free EthersJS cheatsheet to master Web3!
👉 blockman-codes...
------------------------------------------
Courses:
👉 Build a Uniswap V3 interface that can do swaps: bit.ly/3JkXYqL
------------------------------------------
Let's code a working Uniswap V3 frontend UI together.
This will allow swapping tokens on whatever network you connect it to.
If you're unfamiliar with the workings of Uniswap, or you're trying to break into Web3, this is a great starter project. You're guaranteed to learn a lot, including connecting a wallet, calling functions on contracts, using an SDK, and sending transactions.
If you find this video helpful, give it a thumbs up and subscribe!
----------------------------------------------------------------------------------------------------------------
Code: gist.github.co...

[@blockmancodes]

Learn to use all of Uniswap's swap and liquidity functionality with code. bit.ly/3JkXYqL

[@RichReflectionz]

I am keen to joing this one, is this built from the latest ethers6, is jsbi also newly added and is it built using Vite or still CRA? Thanks I thought of ways to improve it as well by using rainbowkit or wagmi for wallet integration.

[@RichReflectionz]

I just purchased the course, looking forward to it, hopefully updated copies and more added to it.

[@phanhoanglong3241]

Hey, u lost index.css

[@carminameza]

This worked perfectly following exactly what you did, can't say that for a lot of tutorials, liked and suscribed

[@blockmancodes]

Thank you for watching!

[@amanmehra8493]

I'm surprised this is the only video related to this topic that holds your hand and walk you through the whole concept. Bro next time I would expect that you give a brief understanding or the description about the tools or sdk you use all the best!!

[@PixelatedPioneer-hj8cr]

This is awesome! ❤ You have another video about creating a v2 swap with liquidity locally with hardhat.... Would be awesome to see that connection with this UI. Could be a convenient GUI tool to test own tokens how it behaves before going live. Especially tokens with taxes could be a pain if u have complicated tax system. Another new subscriber with grey beard here 🙋🏻‍♂️ U the man ✌🏻

[@cetinsangudev2563]

You are a true legend. Thanks a lot for clear explanations and great dapp projects. You just got +1 follower :)

[@blockmancodes]

Thanks brother!

[@Jose-gj8pz]

Good afternoon, just discovered your amazing channel! This is awesome! You will grow up very fast!! A suggestion: If you can create a step-guide to how to deploy a 10.000 NFT collection with the new ERC721A could be really great!! Thanks for the content!

[@blockmancodes]

Thanks brother. Always happy to take recommendations. It's on my todo list. Hoping to get to it within the next month

[@ProblemSolver_0]

The tutorial is good but please try to use Dark layouts for eye comfort.

[@Masteruve1]

congrats great vid. however, taking exactly the same package.json dependencies, "router" does not have the property "route", throwing fatal error inside getPrice(). afaik the uni sdk is low reliability (also present full incompatibility with ethers v6). it's quite easier and straighforward interacting directly with the smart contracts without the uni sdk. even half of the lines of code (router, token, etc.. pseudocontracts not necessary, less wrappers, less incompatibilities, less problems.

[@volcaphft]

Finally!!

[@alanhamid5375]

I would like to know how to add my service fee on top of the Uniswap fee, which I believe is 0.3% because if I am hosting it, I need to figure out a way to cover my operating expenses. Thanks. Great work, anyway!

[@blockmancodes]

I'll take a look. Adding to my todo list

[@SwiftDigitech]

You’ll need your own smart contract for that. I’ve done it ✅

[@miracleeze4216]

@@SwiftDigitech hello I need to learn can I chat you up?

[@aj-gfx]

​@@SwiftDigitechcan you share details about it ?

[@dice9519]

You are lengend. Thank you for this video!

[@blockmancodes]

Glad to help!

[@Darkplatformai]

Great explanation, but can you make a new explanation because most of the repositories used have been abandoned?

[@fredywilliamsvarela8490]

i have errors WARNING in [eslint] src\App.js Line 24:10: 'inputAmount' is assigned a value but never used no-unused-vars Line 80:11: 'swap' is assigned a value but never used no-unused-vars and a lot warnings in ./node_modules/

[@MattWoodwardAU]

Damn! I was enjoying this, but by about 01:02:31 I'm starting to see a load of build errors. Would be great to see an update to this video! 🙌

[@reactdev2838]

Good Work Bro, highly Appreciated

[@blockmancodes]

Glad it's helpful!

[@RonaldoGuedes]

Ropsten network is deprecated, no longer available... could you use other?

[@benjnp3]

Great video, I'm following it until the AlphaRouterService wherein after I placed it in I encountered the error about "No address for Uniswap Multicall Contract on chain id: 3" Ropsten is already gone so how can we use this in another chain like Goerli?

[@Kyrypto]

Hello, just import code from GitHub and have error: Compiled with problems:X ERROR in ./src/index.js 12:33-36 export 'default' (imported as 'App') was not found in './App' (module has no exports) Can anyone help?

[@tumelo_crypto]

Yes, he forgot to add the “export default App” at the bottom of the file like he did in the video

[@unaiiglesias9901]

Thanks! You're awesome!!

[@blockmancodes]

Thanks brother

[@blockmancodes]

What other Dapp frontends would you like to code together?

[@neagu_bogdan]

I'd love to see a staking dApp and smart contract. Awesome tutorials!

[@blockmancodes]

@@neagu_bogdan Thanks brother. This has been on my to-do list for a long time. Coming very shortly

[@deethekingstevens7146]

Hey block man can you please do 1inch?

[@blockmancodes]

@@deethekingstevens7146 Cool. Yea. I'll add it to my list!

[@peteromotosho7328]

I like your videos and they are always straight to the point. Can you please teach on Solana using anchor using Windows OS? Gas fee is much cheaper on Solana and besides there are not many tutorials on it. If this is launched, this could be the tutorial of a millennium

[@arthurss7280]

I really like the Uniswap tutorial, it helped me a lot, I'm trying to use USDT to swap to others cryptos and encountered some problems，do you have any course for similar stuff？or anyone could help with this，if so, i can willing to pay for it

[@blockmancodes]

Thanks for watching! In my Uniswap course, you'll learn to do all the different swap types and liquidity transactions. We also have discord, where I'll answer related questions if I know the answer.

[@oracle444]

how do i solve this TypeError: Class extends value undefined is not a function or null

[@hamzabadii3575]

My friend how to get the fee from two people transaction

[@sg3mes751]

I got this error: 'GearFill' is not defined react/jsx-no-undef

[@bothwellw]

can you add liquidity on the front end and search token by contract ?

[@blockmancodes]

Yes. I'm working on a course that teaches that

[@jackdoy8374]

Hi, I've done everything correctly but when trying to calculate a swap, it can't find anything for me. In the console there is an error saying 'Could not find a USD/WETH pool for computing gas costs.' I'm attempting this on the Goerli testnet also. Thanks

[@blockmancodes]

Give me the addresses you're using for usdc and weth? Confirm you re-found them on goerli?

[@jackdoy8374]

@@blockmancodes Thanks for replying, so I'm currently using '0xB4FBF271143F4FBf7B91A5ded31805e42b2208d6' for WETH on Goerli which is correct as I've added the token to my metamask. For UNI I am using '0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984' but I'm not sure if this is correct as it says its for Mainnet, but I just can't find the goerli equivalent, I have also changed the chainId to 5 for Goerli

[@DucNguyen-vt5el]

I’m having the same issue as well…

[@blockmancodes]

@@jackdoy8374 Ok. If you want to use Goerli, then you can't use the mainnet addresses. One option is to search on etherscan for Goerli, goerli.etherscan.io/ But keep in mind there are duplicates of many tokens as anyone can deploy anything

[@blockmancodes]

@@DucNguyen-vt5el Because Ropsten is deprecated now, you need to find the address of the pool on Goerli. The Ropsten address is not going to work. Let me know if you can't find it

[@SoloRZG]

Hello i have problem like this: Compiled with problems: × ERROR in ./src/index.js 12:33-36 export 'default' (imported as 'App') was not found in './App' (module has no exports) how to fix it??

[@YusufSuhair]

in the `App.js` file, append `export default` , before the `function App() { .... }` so it become `export default function App() { .... }`

[@veliea5160]

Hi! Why ratio is 1 to 1.66. eth is 1500 dollars and unitoken is about 7 dollars as of not. there should be 1/20 ratio. What I am missing?

[@blockmancodes]

Testnet and mainnet do not have the same prices

[@oracle444]

alot of errors with the code, i'm trying to downgrade node version, what node version did you use

[@Computerarts100]

WETH to x token is cool and all but Uniswap is capable of swapping native ETH to x token as well. It's simple that they are wrapping that ETH to WETH and then doing the swap but it happens all in one transaction. I'm sure there is some way of doing it but I'm too new in the Dapp world to actually figure it out. Maybe you can talk about it a bit in your upcoming videos?

[@blockmancodes]

Yes. You can do it. I'll try to cover it in a short video soon

[@Computerarts100]

@@blockmancodes Great man! Appreciate it 😄

[@mustafatahir5240]

I have a little confusion about this: I don't have tokens of UNI and weth in my own metamask wallet. But I'm using the same address of your token0 and token1. So how it will work when my metamask is connected??? Plz help

[@blockmancodes]

At minimum, you'll need some of the input token. Try getting ETH from a free faucet, and then swapping some to WETH on Uniswap testnet

[@hellosumitg]

Hi, @blockman great video, I have a request, Please create a discord community channel so that we can get help from other developers on errors who are working on the same projects...Actually, I am getting some package errors and have put my code in your `codes gist link's comment section` kindly help me solve those errors...🙏

[@blockmancodes]

Hey brother. I haven't been maintaining my Discord or posting the link, but I'm going to try. discord.gg/CmbaCNkRQE

[@nudeleaksfree1750]

All I wanted was to display the widget in one div on my website so my customers can get my token and stake it. I don't want to bring the whole website to my on website. I tried the widget doc on uniswap doc but it didn't work. How do i add just the swap widget to my website?

[@blockmancodes]

Can you share the widget doc URL?

[@reactdev2838]

Bro, I have one issue, well I want to swap the CELO token with my new custom token I create a pool for it on uniswap, When I swap on Uniswap it works, but when I try programmatically using your code it can't swap although transaction went successfully.

[@blockmancodes]

Can you double check the Etherscan transaction? Usually, it shows the tokens swapped. Does it show anything else instead?

[@devlayton]

How come Uniswap DEX has option to switch blockchain and not on the fork. I want to fork a dex that has multiple blockchains, can you help

[@blockmancodes]

Typically when we fork, we're forking a blockchain, not a specific dex. And that blockchain has the deployed dex's contracts on it. Uniswap can switch chains because the frontend can be pointed to different chains.

[@joseph5058]

Hey blockman, i would like to run my dex on BSC how will i do that. I noticed you installed uniswap packages how will i go about that for pancakeswap

[@blockmancodes]

I haven't done much with Pancake swap to date so I can't advise. But hoping to do some Pancake swap tutorials by year-end

[@Trade-Army]

When I run npm start, I get this error. Compiled with problems ERROR in ./src/index.js 12:33-36 export 'default' (imported as 'App') was not found in './App' (module has no exports)

[@blockmancodes]

I forgot to export App.js in the code if you copy/pasted it. Try adding that like you see in any React component.

[@mohameddhanish6176]

0:00 please help with the error name invalid signer or provider

[@blockmancodes]

Try using ethersjs 5. Ethersjs 6 is incompatible with a lot of libraries

[@bhok5228]

Great video, does someone knows if it works with pancakeswap editing the addresses?

[@blockmancodes]

Probably not. Pancake swap was forked from Uniswap before Uni V3 was released.

[@rishiranjan9616]

Hey dude , you videos are astonishing . is there any way i can contact to you ? I am wanting to create a uniswap clone with UI and smart contract , that allows a basic swap functionality , that would be helpful . Keep it up by the way 🎇✨

[@blockmancodes]

Thanks brother. There's an email in my "about" page, but these days I'm mostly too busy to help people with specifics. IMHO the contract level may be the most time consuming part of your project. Uniswap uses a number of contracts that interact with each other and it's pretty nuanced (checkout the Github repos if you haven't). Keep in mind that the "swap" functionality sits on top of the "providing liquidity" functionality so you'll have to build that as well. But maybe if you can understand how all the pieces fit together, then you can try to simplify the backend.

[@rishiranjan9616]

@@blockmancodes Appreciate that info , i will definitely look into the liquidity and swap contact . Also a video will be of great help

[@brian7782]

@@rishiranjan9616 did you ever find this out yet???

[@onahsunday6417]

i have (0) Zero balance in my UNI and WETH how do i purchase them

[@blockmancodes]

On testnet, mine or use a faucet. On mainnet, buy on a centralized exchange and transfer to your wallet

[@zkstack]

hei sir i dont understand how to get url infura testnet for .env? can you help , what the step bye step?

[@blockmancodes]

Create a free account on Infura, then create a project, then you'll be able to see your keys

[@opaschal928]

Great Tutorial man... I tried to use this in mainnet Ethereum but I'm getting back this error message - "Uncaught (in promise) Error: Unsupported swap type [object Object] at buildSwapMethodParameters" I changed the chainId to 1, and the smart contract of WETH and UNI token. Any help from is much appreciated. thank you.

[@blockmancodes]

It's been so long since I looked at this code. Do you know what line threw the error?

[@imkey74]

@@blockmancodes hello. I am also getting the same error. [Uncaught (in promise) Error: Unsupported swap type [object Object]] It has also been changed to the Ethereum mainnet. I tried tracing the code error. The router function in the AlpharouterService.js file seems to be unresponsive. AlpharouterService.js const route = await router.route( ~~) Thanks~~~

[@WizzyAlex]

God bless you

[@diegodubon47]

how can i use the v3 routers instead of alpha?

[@blockmancodes]

Check my uniswap v3 playlist. I should have some videos on it

[@BrunoSantos-uq7hl]

There is a code where I can swap weth to eth and eth to weth?

[@blockmancodes]

I need to make a tutorial on that. Thanks for the reminder!

[@kenechukwuenemuo8621]

i am getting this error: Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:\Users\HP\Documents ode_modules\jsbi\lib\jsbi.ts' file: Error: ENOENT: no such file no2: Line 23:10: 'inputAmount' is assigned a value but never used Line 79:11: 'swap' is assigned a value but never used can anyone help?

[@blockmancodes]

Try adding this to your .env file, "GENERATE_SOURCEMAP=false"

[@Systm_f]

ok i pass all that silly errors like source map , in vscode is not showing me errors but in the console i am getting errors:Failed to load resource: net::ERR_CONNECTION_REFUSED 8545. index.js:238 Uncaught (in promise) Error: could not detect network (event="noNetwork", code=NETWORK_ERROR, version=providers/5.7.2) also is not showing balance and nothing, no inputs and output on currency field. please help me, and thank you for the tutorial

[@blockmancodes]

The Ropsten network is now deprecated. That could be why. You'll probably need to modify it for another network if you want it to work.

[@Systm_f]

@@blockmancodes i was on goerli chainid = 5 all this time, now suddenly out of nowhere is no render the pagebuttons i tried changing the bootstrap version but not woorking , got the same code, it was working good before

[@liujunhan1909]

[ng] Error: node_modules/@types/async-retry/index.d.ts:9:10 - error TS2305: Module '"retry"' has no exported member 'WrapOptions'. [ng] [ng] 9 import { WrapOptions } from 'retry'; this seems to come from importing AlphaRouter, anyone faced this?

[@blockmancodes]

Can you check the versions of all your npm packages to mine?

[@jobsatdoor2321]

can we only swap WETH

[@blockmancodes]

This code should allow swapping any ERC20 token without many code changes. But I didn't want to make the video too long. Did you figure it out?

[@michelezaniolocrypto1115]

Cough thanks for your super interesting video, can you give me access to clone your GitHub? You would be very kind

[@blockmancodes]

Unfortunately, I didn't push to Github. But I'll be launching a mini-course soon that's clonable from Github

[@JOHN-kg5er]

full source code pls

[@mosipvp]

cool

[@brian7782]

I am getting this error for some reason src/App.js Line 36:5: Expected an assignment or function call and instead saw an expression no-unused-expressions

[@blockmancodes]

Double-check that you're returning values from all your functions

[@yopp1234]

Who on earth puts a React project on gist....

[@blockmancodes]

I know... But easier for me than managing multiple Github accounts on the same machine

[@yopp1234]

@@blockmancodes You can create a config file that helps you with that. Don't remember what it's called, I'm sure it will show up in the search results.

[@BrunoSantos-uq7hl]

Hey, this works out for you when you try it in the mainnet? I got some errors like UNPREDICTABLE_GAS_LIMIT and transaction_undepriced. Im trying using polygon mainnet

[@blockmancodes]

Hey brother. I haven't tried it on Polygon, but I know others have had trouble with that... Sigh

[@raviprakash-kj3pg]

signer.getAddress is not a function TypeError: signer.getAddress is not a function I am getting this error , help!!

[@blockmancodes]

console.log your signer. There is something wrong with it. Maybe a typo somewhere

[@infomalhaut9890]

Uncaught ReferenceError: require is not defined at AlphaRouterService.js?t=1656087034290:1:25 (anonymous) @ AlphaRouterService.js getting this error after doing AlphaRouterService part. Can anybody help?

[@blockmancodes]

Can you double check your imports