Integration uniswap into your dApp with 1 config object

Funded by uniswap grants the aim was to allow you to get up and running with uniswap in less than 2 minutes but give you the full customisation to make it your own, support any token you want, fiat prices updates, automatic balance handling, push notifications of new trades which gets checked on every new block to make sure the user is getting the best price, change the theme colours, support any wallet which has an ethereum provider and much more, it is all up to you. Supporting all the main frontend frameworks, angular, react, and vue so you don’t have to do the heavy lifting.

Integrating uniswap within your dApp should be a simple thing but with all the complex stuff that goes into making it work, managing transaction status, calling the correct methods on the swap, maintaining the user's balances, syncing the fiat prices, producing the token icons, handling all the UI support all browsers, I could keep going. On top of this, you don’t really want to pop a window for the user to swap using the uniswap widget, you want to keep the user experience consistent with your dApp. You should be able to integrate with uniswap with only a few lines of code just as you would with google tag manager or most web2.0 software. This is what uniswap-dApp-integration has solved.

Features

🚀 Integrate it into your existing dApp with a few lines of code

🚀 Supports uniswap v2 and v3 prices together and returns the best price

🚀 Queries all the best routes and finds the best price for you

🚀 Reactive logic so when the price moves or your trade expiries it generates you a new one but alerts the user (queries new trades on every new block)

🚀 Reactive fiat price so users can see the amount the trade is in fiat, this updates as the price changes as well

🚀 Reactive balance syncing so the user can see their correct balance all the time (syncs on every new block)

🚀 Supports all major browsers

🚀 Is fully responsive

🚀 Fully customizable, style it as you want, support whatever tokens you want, and much more

🚀 Uses the awesome simple-uniswap-sdk for all the uniswap on-chain logic

🚀 Fully typescript supported with full generated typings

🚀 and much more!!

Before I walk you through how to get started I wanted to address some backlash uniswap got about this article — https://uniswap.org/blog/token-access-app/ on restricting access to a small number of tokens. This project is funded by uniswap themselves to allow you to support any tokens you wish in a few lines of code. The uniswap protocol is permissionless but the FE can show and hide what uniswap deems to not be a safe token as they should be able to protect their domain and end-users from threats and bad actors. Most of the traffic from uniswap comes through other platforms. This package just echos that uniswap stands for permissionless, autonomous, and immutable protocols. Allowing you to build your own UI supporting any tokens you wish. That is the whole point of DEFI right? we should be striving for many client interfaces all doing what they need/want to support. I hope this package helps with that vision.

Now back to the fun parts!

Getting started

All the code I'm going to show you is in react, but we have angular, vue, and react packages that all follow the same structure.

To get started have your react app ready, if you want to follow along from scratch go and install a boilerplate react app using:

npx create-react-app my-app --template typescript

Then you need to install uniswap-react and its peer dependency uniswap-dApp-integration-shared by doing the below:

npm install uniswap-react uniswap-dapp-integration-shared

Now it’s as simple as just creating a new instance of your config and then passing it to the component. The code below has some extra lines of code showing the integration with MetaMask.

And boom that’s it run the react app have MetaMask installed and you see the client load. The live demo is here go and have a look. Below is a little gif showing what has now been produced, I do the swap on rinkeby just to show you the transaction swapping. As said the live demo above is exactly what I used to record the gif below.

My config above is a simple one you can view all the config settings here. You can pass in ANY tokens you want, nothing is blocked as long as it has a pool it will work. You can pass in theme colors, you can pass in your own custom tokens for tokens assets that are not in the trust wallet repo, you can pass in any ethereum provider in this example we just use MetaMask but it would work with any of the big wallets. You can customize it as much or as little as you want.

Angular package

React package

Vue package

We are open to PRs or requests for other frontend frameworks you want to see supported. You can also install the shared monorepo and build your own interface which you can find here.

All the onchain uniswap logic was powered by simple-uniswap-sdk which is another package supported by us.

We stand by an open web and I hope this tool helps you save time and build even more awesome things.

Enjoy!!!

p.s Just starting Twitter give me a follow https://twitter.com/devjoshstevens