Swap Anywhere: The New Uniswap Widget - Ian Lapham

[Applause] all right hi everyone thanks for coming today so my name is ian i'm a software developer at uniswap labs i've been at uniswap since 2019 and today we're going to talk about the new uniswap swap widget so i'll start with giving you kind of an overview of what swapping looks like across the web today current integrations and how you would do that now on your current site then we'll get into the new swap widget what that is the new features that we're offering with it and then after explaining that for a bit i'll actually do a demo of some code to show you how you would integrate swap widget in your own site at the very end we'll go over some information we have around bounties that we're doing for the hackathon this week so i think it's interesting just to take a look at some stats around the unit swap protocol right now just to get some context for what people are doing so if you look at unit swap v2 and v3 these stats were taken maybe a week or two ago we're seeing 15 billion plus trading volume per week over 3 million unique user addresses of all time and almost 80 share of the dex fine so it's pretty safe to say that um majority of swapping across texas is being done in your swap um and because of that i think it's important to look at how people are doing that swapping and how websites across the web are uh managing that so i think the next important thing to think about is um how swapping is a core tool in the web3 toolbox because swapping and this specific pattern that you can see here didn't used to always exist when we were swapping assets before people would actually view that as a buy or a cell instead of a swap so this idea of a swap is actually something that hasn't existed forever but with the creation of automated market makers and unit swap this pattern has grown to be really popular across web3 so and you can make an argument it's one of the most common patterns um an interesting stat is that the unit swap interface has been forked almost three thousand times if you're into d5 um you've probably seen forks of the uniswap interface for various other things you know sushi yams and all these other things take this pattern and they work off of it to uh to provide interfaces to their protocols so it's obvious that you know swapping is important thing um and it's done a lot um but there are some issues with uh how you would go about building your own swap ui right now if you want to do that so for your project if you wanted to create the same experience that you get on the uniswap interface you have a couple options right now one that is similar to what i just mentioned is forking the swap interface so that is when you would go to the open source code on the swap github org and you'd fork our interface which would give you a exact clone of what is on the swap interface now and you can go from there so that's good because you get a lot of boilerplate it's not a lot of work to get a starting point but there is a lot of additional work to customize that experience for your users [Music] also as unit swap makes updates to that repo over time you miss out on those so it requires a consistent development effort maintenance and you know a lot of development time to create that experience another option you have currently is using an iframe so it's possible to take the swap interface and embed it within a portion of your website um there are issues with this as well because there's no way to really customize this experience the iframe on the current unit swap interface is not optimized for this so you'll you'll see a ux that's somewhat squished and it probably doesn't play well within you know whatever designs that you have on your site and also it's tricky with wallet connections if you have your own wallet connection on your site and then you have a second wallet connection ux within an iframe it can be a little strange for users and the last option that you may want to use now for for trying to achieve this would be using the unit swap sdk so the unit swap sdk is great because it gives you access to low level tools to build something from scratch related to swapping on the swap protocol and this is good if you have a use case that requires a lot of custom implementations and you want the lowest level access to tools around swapping but again if you want a quick integration or something that's simple this would still require a lot of work and a development team to maintain over time so the point of looking at these is just to get an understanding that while these tools can be good for some people it does take time and effort and it's somewhat difficult right now to mimic the swapping interface within your own projects so now we can move on to the new swap widget so i'll escape right here actually now you can see this so this is a quick uh video to give you an idea of what this looks like so you can see um an experience here that's similar to what's on the uniswap interface today you can select tokens you can input amounts um confirm swaps look at swap details and this is what you would actually see inside of the widget you can see you can submit transactions and you get um you know details around the transactions you're submitting and the swap you're doing um the swap widget itself is actually a react component so it can be used within any react project that you're working on um you can install it using npm or yarn um and with it you get a polished uniswap ui right out of the box um and within that widget you have access to the unit swap v2 and v2 v3 token pulls and also within the widget is the auto router routing package that will handle quote fetching for you to make sure that users using the widget are getting good rates when they use it so while this can be used for swapping i think it's important to think about the broader space of use cases that this is actually good for so you can see this is you know you can use this for swaps but also this could be used um as part of the communities you're building so an example here would be friends with benefits say you want to embed this on the page because people need access to the token for going to events or participating in other community activities you can streamline this process and make it easy for your members to buy certain tokens there are other types of use cases for example on the right here you can see wrapping and unwrapping eth another thing is that widgets can take curated token lists so you can curate the tokens that are shown to users so what right here we have the role token list you can see these are all social tokens but you can imagine other types of token lists as well so you could maybe do the curve token list you could do uma things like that so that you get a curated list and you can kind of build experiences around that another important thing to note is that the swap widget does support all networks that new swap is deployed on so right now we have ethereum test nets and mainnet arbitrarium polygon and optimism and that works right off or right out of the box as well um just depending on what network users are connected to within their wallet so now we can um actually take a look at what this would look like if you were going to do this in code and you wanted to customize some settings and see what this would look like in your project i'm going to move over to a text editor and we can see what this looks like on the web great so let's zoom this in a bit so right here i have a react project which is actually just a fork of the unit swap interface i mean in the root of the app i'm rendering this demo component so we have a couple things here first thing to note is the swap widget itself which we're importing from the mpm package [Music] and the swap widget must take one of two inputs here it can be a web3 provider or a json rpc endpoint so json rpc endpoint will allow you to fetch data from the contracts and get you quotes and your web3 provider will actually allow your users to make transactions and you can customize these things and in the docs there's descriptions for what those uh what that would look like in this repo i'm using web3 react to get my web through provider which is another popular web3 library that we use in the uniswap interface so if i switch over to my browser you can see what this looks like so this is kind of a default view without a lot of customizations added you can see a swap experience here we have token selection we have things like settings that you'd find on the uniswap interface so slippage deadlines i'll try to select some tokens here you can see [Music] quotes being fetched you can see error states and data around your balances and things like that um swap inputs and outputs and things like that so right out of the box with only a couple lines of code here you get the full swapping experience that used to on the unit swap interface now so i think one fun thing to do would be to start looking at how we can customize themes because an important goal with this widget product is to allow developers to customize the experience within their web applications an important part of that is design and styles so here i've made a demo theme and you can see that i've defined a couple characteristics something like a border radius uh font family and then some colors so if i go back to the browser we can see how this changes um so you'll notice you know different background colors font family things like that and this is cool because with this you can really get custom with how you're integrating this into your own website and the goal is for every brand to be able to make this fit into their experience so [Music] you know you can change any of these things and there's a lot more properties that you can customize as well i've just picked a few here you can see text color and things like that are easy so yeah so you can get custom with this and you know start to make it match your brand i think the next thing that can be cool to look at is how we can make use of token lists like i was mentioning earlier so by default the tokens that are in the widget are from the unit swap lab's default token list but you can actually import any token list that you want and if you're unfamiliar with what tokenlists are it's just a json standard for identifying a list of tokens and this can be on mainnet test nets and layer 2s as well so tokenlist.org actually has a list of a bunch of these right now i'm on the d5 prime token list so to get all these tokens into the swap app all you have to do is grab the url where the token list is hosted you can go into your swap widget component and add the list so right here i've had d5 prime list you might not be able to notice a difference but it's loading tokens here these tokens are now fetched from the d5 prime list so this is cool because you can make your own token lists and input it that way there's a lot of token lists out there this page has some of them so yeah i think another cool thing that would or something would be cool to try out would be using a custom token list here so a token list can be formatted in a few ways as long as it matches the token list json standard here i just have an array of one token and again i'm going to use friends with benefits as an example but let's say i was trying to put the swap widget on that fwb website to let people buy that token quickly i could make a token list like this that has the fwb token and instead of importing a list from url there i can pass in the constant if we go back to the application we'll see that these are the two tokens that are in there now so um this is nice for projects say it could be any project that has a token that's of interest to users in a community you can set this as a default and it's you know easy to get people to grab your token if you want to take it one step further you can even set default amounts and token addresses here so i can do default output address go down to the fwb token address and put that here so if i refresh the page you'll see that that's defaulted as the output and you can default inputs too you can default amounts so the point with that is you can really get as custom as you want with the display that users are seeing when they come to your website so yeah that's you know that's some examples of how you can customize this there's there's many other properties that you can define as well when you're using a swap widget in your application um we have a couple minutes left here so i'll actually show you what a transaction would look like in this widget here so i'm going to switch to rank b and do a transaction there and i'm also going to get rid of the token list so that the default has some rugby tokens so [Music] let's buy some uni see you can put in your outputs you'll see a loading state and this is using the auto router packages that we have and you can check that out in the swap labs github repo but what that's doing is it's um using some data back-ends and some logic to find you the best quotes um and this works on rugby too so i can review the swap details here you can see the things that you'd want to typical within a swap so price impact the fees slippage tolerance things like that i can go ahead and confirm let's see okay that might not be working this is a actively in development on my machine so so you can try this later um so yeah i'll uh i'll stop there with the demo um but if you want to check out the code for this or the documentation you can actually go to npm now and look at and you can use this you can install this and use this now um so now i'll go back here quickly um we'll note real quick that this week we're giving away a total of ten thousand dollars in bounties um for hackers at the denver hackathon we're looking for the most original and polished experiences that use the widget so we'll have 5000 for the in-person submission and we're going to have an additional 5000 for the virtual submission um so if hackers who are looking at this are interested you can go to the new swap documentation you can go to the github repos and they should be they should have instructions there for how you would use this within your app and you can do it that way so again there are more resources here if you want additional support you can go to the widget channel in the uni swap discord and also we have a booth in the mirrors gallery this weekend so come by and say