First milestone — Redesigning swap section
Greetings Stellar Family!
In order to achieve Lumenswap’s ultimate goal, which a perfect client for trading and swapping assets on the Stellar Network, we decided to represent milestones as the evolution stages of a product.
The first milestone of the Lumenswap evolution road was remaking the design and the structure of the swapping interface.
Design Changes
To make Lumenswap more minimal and unique, we decided to change the font from Inter to Sofia. Additionally, we’ve changed most of the UI components to achieve a better user experience. At first glance, it might seem similar to Uniswap. If we’re being honest, the Uniswap team has developed standard components for trading platforms so changing them too much doesn’t do anything other than making things worse. Although, we’re against forking and cloning a product. If you take a look at most of the trading platforms, you can see that 90% of them are forks of Uniswap. Because of that, the frontend part of Lumenswap is implemented by our own team entirely. We believe that each product can have its own unique design system so we tried to apply Lumenswap’s design system to the new UI.
We thank the Uniswap team for all of their efforts in making a standard UI for trading platforms.
Structural Changes
Estimated Amount
If you’ve worked with the previous version of Lumenswap, you might know that the estimated amount was not based on the liquidity rates and the order books on the network. It was solely based on the last order of that asset.
For example, if you wanted to convert 1 BTC to ETH, the system would show you that you’ll receive 2 ETH. If you wanted to convert 10 BTC to ETH, it’d show you that you’ll receive 20 ETH. This was not completely accurate as the estimated amount should change based on your order size. In the new version of Lumenswap, by using Horizon aggregations, we can show you the estimated amount that’s based on your order size and the liquidity rates of the network.
Find the Best Path
In the previous version, the path was static. For a pair of assets named x and y, if one of the assets was XLM, the path would be set to x → y. If none of them were XLM, the path would be set to x → XLM → y.
In the new version, we suggest a path based on the best rates and prices with Horizon aggregations’ help. This way you can make sure that you can trade your assets at the best prices possible.
This is an example that Horizon aggregations suggest possible paths for swap 100,000 ARS to USDC and we will set the best for you:
We thank the Stellar team for developing this magical tool called Horizon.
Price Impact
We’ve added a new variable called the price impact to this new version.
Price Impact is the percentage difference between the last price of a pair of assets and the price at which your order will be completed at.
Here’s an example:
Let’s say you want to convert 10 BTC to ETH, and currently, 1 BTC is equal to 2 ETH. So you should receive 20 ETH. Depending on your order size, you might get something lower than that (for example, 16 ETH). This is because the network needs to complete your order according to the order books and the liquidity rates.
In the above example, the price impact will be 1 — (16 / 20), which is 0.2 or 20%.
Default Assets List
According to our new policy, we’ve removed all of the assets that were listed so far from the default list. We’ve listed only those assets that have an acceptable liquidity rate. In the future, we’ll be using Governance and voting model to add new assets to the default list.
Adding Custom Assets
As you know, Lumenswap is an open source and decentralized client which supports all of the assets on the Stellar Network.
There are two methods for adding custom assets to Lumenswap:
The first method is more suitable for normal users. In the assets modal, click on the “Add Asset” button. Add your asset code and asset issuer and confirm. Your custom asset will be added to the list.
The second method is suitable for asset developers and project funders who want to redirect their community to their assets trading page using a single link. You can easily do this by using the URL format below:
https://app.lumenswap.io/swap?{asset_name}-{asset_issuer}
When someone uses your link to enter Lumenswap, they’ll be able to add your asset to their Lumenswap list.
For example, click on the link below to add GTN to your Lumenswap:
https://app.lumenswap.io/swap?GTN-GARFMAHQM4JDI55SK2FGEPLOZU7BTEODS3Y5QNT3VMQQIU3WV2HTBA46
Thank you for reading this article.
