Dexible v1.5 Released — New UI, Optimism + Arbitrum, TWAPs 2.0
Celebrate the Start of 2023 with the foundations for a reworked Dexible application
Contents:
- What does version 1.5 of Dexible bring to Dexible?
- Is there both a new Dark and Light mode UI? Why does that matter?
- So Dexible now works on the Optimism network too?
- What is Dexible working on in January 2023, and what’s coming up?
Happy 2023 everyone! The Dexible team is pleased to announce a new version of the Dexible Dark and Light Mode UIs.
New Dark and Light Mode UI
The Dexible UI has gone through several iterations. However, until recently, there had been very little change since its alpha version.
We’re glad to say the Dexible UI has gotten a complete rework in its color design department. Both Light and Dark Modes are MUCH, much more pleasing to the eye. Admittedly, there was a lot of purple in the previous versions. We worked with Dexible community members to choose which color palette to select.
The reactions from the greater Dexible community following these updates have been resoundingly positive.
Tweet from Dexible community member and Champion, Cyber Strategy.
Dexible community member & Champion Tritium#0069 said
“I’m not much of a light mode user but I like the gentle use of purple. The darkmode looks cleaner/easier to read to me. I think it’s an improvement.”
Dexible community member BrianBoru.lens#0279 replied
“I’ve started to revert back to light mode. I’ve been reading dark modes are gonna rekt our eyesight/focus long term lol”
Another Dexible community member added:
“The purple as an accent rather than the whole thing is a lot more palatable….and professional”
We also have new order-type icons for both modes.
Dexible UX Improvements
Token Selector was Improved
The Dexible team made the Token Selector search more intuitive.
Some traders did not realize that there was a search input field above the dropdown for selecting which token to use for input or output. We’ve addressed this by making that input field much more obvious in terms of being a typeable field. It will also be typeable by default to account for the confusion of adding a custom token address or searching the list.
Furthermore, we’ve pinned several of the most popular tokens of each network to the top of the token selector dropdown. This makes it easier to get started with an order.
Dexible will apply its order sizing algo to any order. Still, there’s so much deep liquidity in pairs like the chain native fee token (aka ETH) to DAI, there’s very little chance that the input will be split into different rounds.
Token Approval is SO MUCH Better
Dexible users approve the tokens they want to swap as a bot will later call that user’s address to facilitate each round of their order. To enable and display the state of their approval, we had a lock or unlocked icon next to the input token. These icons did not communicate what the approval was very well, and so many users would glance right over it. So our team has decided to rip these icons out.
First, not many users were even familiar with the concept of Token Approvals. So clearing up this UX piece critical to using Dexible would help with the learning curve for first-time users.
Second, even when users had approved tokens, it wasn’t clear to them. The icons were not contrasted well enough with each other to effectively communicate their purpose. So in the latest version, the Dexible approval flow is part of submitting an order.
To expand on that, in the new version, we’ll use the order submission button to control user token approvals. See below in the linked clip:
Loading Estimates is WAY MORE Seamless
It’s way faster and easier to make multiple quotes to Dexible.
We revamped the Estimated Outcomes loading state. Dexible quotes use a certain 3rd party router API which takes a while because Dexible lobs multiple queries for every user’s one quote at their router.
In our original design for what the experience on the Dexible UI should be, we wanted a way to prevent extra user activities from interfering with the estimated outcomes of their quote to display. So we had originally opted for a quick and dirty solution of covering the whole screen in a dark cover as new quotes are loaded. This UX ended up being high friction. It was hard for deep users to run multiple quotes in a way that allowed traders to easily compare estimated outcomes based on certain parameters and input configurations.
We’ve also made improvements to highlight the input fields required for quotes. Dexible orders take several fields before spitting back a response. It is one of the key differences between itself and Uniswap, the level of customization that goes into each order. A user with an immediate ad-hoc swap on the DEX itself will likely pass on the bells and whistles of conditionality.
TWAP Price Bounds function as Range Orders
Dexible community member had stated the following:
“When setting boundaries on TWAP orders, the default is for the upper boundary to be set at the current price and only go higher. I find myself wanting to set TWAP orders at some range below the current price. I have to move to manually typing in amounts, which seems to work fine, but the fact that the slider on the UI won’t go there made me wonder if it would/if I was using it right.
It’s more just why can’t the sliders go in both directions so one doesn’t have to switch to numbers. Even after switching to numbers I wondered if what I was doing would work since the sliders didn’t want to let me do it. I tried anyway and it did. So the simple UI change would just be to let the sliders range both above and below the current price on both the min and max pricing.”
In response to this issue, the Frontend team made significant updates to the Price Bounds UI component. The default values for the price bounds are no longer positioned at the absolute end of the slider spectrum. In the case of the upper bound, the slider was on the far left, letting you only slide it up, and vis versa for the lower bound, the slider was on the far right, letting you only slide it down.
The latest price bounds update allows you significant flexibility to drag the price either way. This means that TWAP orders now function as Limit Order (or Range Orders if you prefer that term from Uniswap) DCAs. An example would be if you set an upper bound 25% above spot and a lower bound 15% above spot prices.
We also disabled rounding in TWAP bounds to avoid bugs when inverting the spot price twice.
Refreshed Quote UX
We’ve updated how to prevent quotes from going stale on the UI. Traders used to have to activate a button, which looked like a timer inside of a circular border, that would specifically wait for refreshes. Now it’s part of the Order Submission flow. There’s just one button for approval, submission, AND getting fresh quotes, making the Dexible usability experience vastly less error-prone.
Improve Quotes
Price Impact in the Dexible Quote
One of the key values for using Dexible over something like the LlamaSwap aggregator is that Dexible is a price impact & slippage-minimizing solution. The only other solutions available to traders to minimize these externalities that affect any trader swapping on AMM-based liquidity pools, are submitting directly through MEV bots.
While Dexible limits the total experienced slippage of your order, it wasn’t communicating the expected price impact to the user on the frontend. The app will now show how much specifically your trade will move the market by, letting you set smarter swaps.
Improved Limit Price Accuracy
Dexible also computes the Limit Price Output by using both the trigger price rate and the trader’s input amount. We used to display the estimated output amounts from setting Limit Orders by simply multiplying the input amount by the limit price. But we now reflect the price impact on the quote and deduct fees to compute the amount after fees.
Other Fixes:
- Fixed a critical bug when users had multiple tabs of Dexible open to different networks.
- Notifications are more clear — we added a message that says “You’ll get notified when this order is done”. It wasn’t clear what notifications were for previously.
- Updated highlight for the token input field to just be the container around the input
- When traders cancel orders, we now show a modal with a button that leads traders to our support channel.
- Fixed an input validation bug on mobile devices.
Dexible Integrated both Arbitrum & Optimism
Dexible Integrated Arbitrum
We launched Arbitrum support back in October:
Continue Reading about Arbitrum here → https://dexible.io/blog/solving-the-low-liquidity-problem-on-arbitrum
It didn’t take very long for Arbitrum trading to become a significant driver of new growth for Dexible.
Dexible Integrated Optimism
We launched Optimism support in December:
Continue Reading about Optimism here → https://dexible.io/blog/dexible-integrates-optimism-the-key-to-unlocking-layer-2-capital-efficiency
What’s Coming Up
A Public Roadmap
In over two years of operations, Dexible has NEVER published a public roadmap. What would it look like if it did?
Get PSYCHED and stay tuned.
Abstracted Token List
One of the first upcoming changes is an updated list of tokens. See for every network, Dexible makes a call to an open-source library that structures a token list object. Dexible uses that along with the new prioritized tokens to render each list for each network. An abstracted token lists means that Dexible can maintain its own token list in a database and make API calls to that shared resource across any of its applications. 3rd parties that integrate the Dexible SDK, the Dexible Widget, and the Dexible Trade Portal will all be able to lean on this resource. This shared resource will keep tokens up to date and allow more efficient management, addition, or removal of certain tokens being presented.
USDC-Based Limit and Stop Loss Price Rates
On Dexible today, traders making swaps between two non-stable assets will have to do some math to determine the price rates for their stop loss and limit orders. This is because price rates are asset-to-asset, which could be volatile. The asset to stablecoin price rate ore easily reflects an asset’s price. So Dexible would index those prices and a trader would be able to use a correlated asset to trigger an order.
Refactored Order Logs UI.
In an upcoming version of Dexible, you will get access to a price history chart within completely refactored Order Logs. Here’s an early concept mock of what that would look like.
The key thing about this chart is that you would be able to see your real fills versus the spot market price at the time of each of those fills, then Dexible would build trend lines to show performance versus the market. It’s this chart that nails on the head one of the key value props of Dexible — achieving better effective pricing versus the market.
Condensing the Estimated Outcomes
Even on the Dexible version 1.5 UI, we show three columns for Recommended, Custom, and Delta Quotes. There’s still a sizable chunk of users who don’t know about customization. Improving the discoverability of the customization is something important to us. But for starters, we’ll work to cut down on the redundant information in the estimated outcomes section while highlighting the important information.
Cockpit Price Chart
A price chart for traders would be a tremendous addition to Dexible. Adding this chart requires a bit of infrastructure and data management. The prices from certain data sources don’t reflect the real price rates or keep a historical price rate for many of the pairs traders on Dexible would seek. This includes charts of assets to assets and those being compared to stablecoins. The load of the work is less in the frontend code and mostly on the backend in data indexing. We aim to integrate significant interactivity for order setting and changing parameters for live orders. If we realized that goal, it means a user would be able to see their limit prices and change those on the fly.
While We Have You
Community Call on Friday
Mark your calendars for Dexible Community Call #1 coming up this Friday at 11:00 AM EST, 16:00 UTC (12:00 UTC+8).
Topics on this call will include
- Having an AMA — please mention @DexibleApp on Twitter & add #CommunityCall to ask a question.
- Alternatively, please join our Discord and post questions into #general.
- Dexible version 1.5, reviewing all the latest additions.
- Details on the upcoming Referral Program 2.0 (1st piece of the new flagship Dexible roadmap).
- Other things coming up.
Twitter Spaces Link: https://twitter.com/i/spaces/1ynJOazOegAKR
Discord Call event link: https://discord.com/events/789015084600655893/1062551591971991572
About Dexible
Dexible is the execution platform for DeFi. It combines DEX aggregation and algos for DeFi trading. It routes across 60+ liquidity sources on all major chains and offers 7 algo order types.
Create your Referral Code today to lock in Early Adopter rebate and discount tiers.
Traders can use the web app or the low-code Typescript SDK. Also, see the user documentation.
3rd parties can integrate the Trade Portal or the Widget for free to bring the whole trading suite to their users in minutes, earning them money along the way.
- Reach out to us on Telegram or Discord for general inquiries or questions.
- To get in touch with our sales team — follow the link here.
For any media inquiries — team@dexible.io.
