Empowering Polkadot users with easy token swaps on Asset Hub.
Intro
Our MVPW team has successfully developed the UI & FrontEnd for Asset Conversion Pallet, a project supported by Parity Technologies. Formerly known as State-Swap, this initiative brings us closer to Polkadot’s goal of establishing a robust asset hub essential for converting assets within the Polkadot community.
The Asset Conversion Pallet, crafted in Rust code, embodies the logic of Uniswap v2 DEX. Its development addresses the challenge of asset conversion across Polkadot’s parachains via the Asset Hub. Presently, swapping assets from different parachains is not possible. The Asset Conversion Pallet, has the goal to enable, and streamline this process, ensuring a smoother, faster, and more secure execution through the system parachain Asset Hub, acting as a “management portal” for asset creators. This portal facilitates token minting and burning, providing an overview of the total token issuance across the entire Polkadot network, including tokens transferred to various network locations.
What we built
To facilitate the use of this pallet for current and future Polkadot developers, we’ve designed a user-centric front end with a focus on excellent user experience. This UI kit for the pallet comes fully documented, providing clear instructions on how to integrate with the pallet. It serves as a valuable resource for developers aiming to create decentralized exchanges (DEX) or other products with varied functionalities. UI & FrontEnd for Asset Conversion Pallet has been deployed on Westend Asset Hub, Rococo Asset Hub and Kusama Asset Hub, with plans for its appearance on Polkadot in the near future.
Emphasizing transparency and reliability through open-source development, our focus has been on enhancing end-user experiences, specifically highlighting the swap and liquidity provision features. Drawing inspiration from UniSwap v2 and adapting it to meet the ecosystem’s needs, our aim with this MVP was to amalgamate the best aspects of Uniswap while tailoring them to the Polkadot ecosystem.
The asset conversion pallet’s greatest advantage lies in its comprehensive explanation of how to utilize the pallet and its adaptability, allowing developers and users to customize it for their own DEX products and further development. As part of our MVPW initiative, our goal is to support Polkadot’s vision by facilitating liquidity flow across parachains, enabling easy asset purchase, exchange, and utilization for all users.
Useful links about project:
- GitHub repo of UI & FrontEnd for Asset Conversion Pallet
- Public Figma file on Figma Community
- Pallet UI is deployed on Westend Asset Hub, Rococo Asset Hub and Kusama Asset Hub. Try it out via live staging.
Importance of Asset Conversion Pallet
We decided to support this initiative for several reasons but primarily to contribute to the growth of Polkadot’s ecosystem. Our involvement allowed us to deeply understand the concept and significance of the Asset Hub, which facilitates secure digital asset transfers without compromising scalability. By not processing asset transactions directly on the Relaychain, the Asset Hub, a system parachain, enhances efficiency and enables a higher transaction throughput.
Also, our decision to develop a user-friendly interface for the asset conversion pallet serves multiple purposes. Firstly, it assists future decentralized exchanges (DEXes) and users by simplifying and making accessible the process of utilizing this technology. Moreover, thanks to the Asset Hub, our pallet and front end ensure secure asset transfers without reliance on a third-party intermediary.
Additionally, our work serves as a valuable educational resource for other builders interested in constructing DEX products. We aimed to set an example and provide insights into implementing similar initiatives within the Polkadot ecosystem.
How it works
There are five main features you can use in order to manipulate your assets via Asset Conversion Pallet.
Before you start
- To use UI & FrontEnd for Asset Conversion Pallet on Rococo or Westend, you’ll need faucet tokens in advance. You can obtain Westend tokens here and Rococo tokens here. To use it on Kusama, you need to buy KSM tokens.
- Once you’ve acquired these assets, you’ll need to teleport them from the respective Relay chain to its Asset Hub (for instance, from Kusama to Kusama’s Asset Hub). For detailed instructions, refer to the testing guide available for more information.
- Please note that the default transaction fee is set at 15% due to the current low liquidity of pools. However, you have the flexibility to adjust the slippage to your preferences at any point for all actions within UI & FrontEnd for Asset Conversion Pallet.
01 Connect wallet
To utilize UI & FrontEnd for Asset Conversion Pallet, you’ll need a Polkadot browser extension wallet. Go on our staging, choose network and connect your wallet. While it has been thoroughly tested on Talisman, Subwallet, Polkadot.js & Ekrypt, no bugs have been reported on other wallets, indicating compatibility with them as well.
By clicking “connect wallet,” you’ll gain access to view all your assets and their balances. Additionally, a simple click on the wallet address, after connecting, enables you to log out successfully.
02 Add a new pool
To create a liquidity pool using your own assets, follow these steps:
- Click on the “Pools” tab.
- Select the “New position” button.
- From the list of assets you possess, choose the asset you wish to create the pool with.
- Each pool is formed between the native token and another asset. As the pool owner, you’ll have the ability to set the ratios between these tokens according to your preference.
Upon selecting the tokens and their respective amounts, the next step involves signing a transaction. The initial transaction creates the pool pair with the tokens you’ve chosen. Subsequently, you’ll be prompted to sign another transaction. This secondary transaction is designed to fill the pool with the predefined amounts you’ve specified.
Following this process, once completed, your created pool will be visible within the “Pool” tab. All displayed pools already exist, and those listed at the top of the page are the pools in which you are actively involved. You’ll be able to view the amount of LP tokens associated with each pool.
03 Swap
When swapping your tokens for others available in a liquid pool, select the tokens you wish to exchange. By specifying the amount of the first token, you’re indicating the payment amount, and the received quantity of the second token can fluctuate due to slippage. Conversely, if you define the amount of the second token, the value of the first token will adjust accordingly.
04 Add to the existing pool
When contributing to an existing pool, find the pool you wish to add funds to from the available list. If you possess tokens from that particular pool pair, you can easily add funds by selecting the “Deposit” option. After choosing the amount of token A you want to contribute, the amount of token B will automatically adjust based on the set ratio in the pool. Once you’ve completed adding funds, this pool will be displayed as one of your prioritized pools.
05 Withdraw
Once you’re a participant in one or multiple pools, you have the option to withdraw funds. Clicking on the withdrawal button triggers a new window displaying withdrawal options. This window includes the choice to withdraw a maximum amount, which allows you to calculate the maximum allowable withdrawal. However, if you’re the sole participant in the pool, you won’t be able to withdraw 100% of your funds, as the pool must maintain a minimum required amount per token to prevent it from being emptied completely.
Apart from the MAX option, you have alternatives to withdraw 25%, 50%, 75%, or 100% (if you are not the only liquidity provider in the pool) of the deposited assets. Additionally, you can set a custom amount to withdraw based on your preferences.
How can I customize it?
If you’re interested in delving into the development of the asset conversion pallet and modifying its features and user interface, our Readme section offers comprehensive guidance. It contains detailed explanations covering essential information, including installation procedures, testing methods, and instructions on how to contribute if you encounter specific bugs or develop new features for the pallet. While our reasons for participating in this initiative are clear, we aspire to have delivered equivalent value to the community. We welcome feedback and thoughts on our contributions.
For a more detailed, step-by-step guide, please refer to this documentation. Now is the perfect time to initiate your first asset swaps and create pools via Asset Hub! Visit UI & FrontEnd for Asset Conversion Pallet and be sure to share your initial impressions with us.
Advancing Forward
During our development phase, we encountered time and budget constraints that necessitated a focused effort on the essential features for our MVP. As a consequence, while our current product showcases fundamental functionalities, there remain areas that require improvement to optimize the user experience. Key aspects in our focus for the next period:
- Addressing Liquidity Concerns: Some pools experience low liquidity as those were made for testing purpposes.
- Transaction Loader: The current loader that indicates waiting times for transactions to occur, can have a significantly better user experience.
- Network Switcher: Adding a network switching functionalities instead of having different domains for each network, simplifies user interaction.
- User messages: When needed to double the transaction or similar, we lack user explanation of these actions (e.g. for pool creation etc.).
- Swap Input Switcher: Implementing a feature allowing users to switch inputs during token swaps.
- Transaction Preview Box: Offering a transaction preview window for users to review before confirmation.
- Transaction Review: Enabling users to view their transactions in a linked block explorer.
- Foreign Asset Pallet Development: Implementing foreign asset pallets for cross-parachain asset conversion to expand the utility of asset conversion pallet.
In addition to our ongoing UX enhancements and new features, we’ve identified several potential improvements for the asset conversion pallet itself. These enhancements hold the promise of significantly elevating user satisfaction:
- there is a need for a pallet function that calculates Asset to Asset prices (similar to this one quote_price_exact_tokens_for_tokens, which only calculates prices if one of the Assets passed to the method is a Native Token)
- also quote functions e.g. (quote_price_exact_tokens_for_tokens) can be improved to return amounts more similar to actual numbers (by taking into account price slippage)
We’re committed to continually improving our platform and are actively working on these enhancements to elevate user experience and functionality. Here you can always find out what our current weekly focus is and see our progress. As we continue to refine this initiative and enhance the pallet UI, we’re eager to hear from you about your experiences and any insights you’ve discovered. Your feedback is invaluable in aiding our ongoing improvements – reach out 🙂
We greatly appreciate your support in spreading the word among other Polkadoters!
Should you require additional information, feel free to contact us at [email protected].
