Bitshares DEX Astro UI - Developer showcase! Smartcoin lookup!
Welcome back to the Astro UI Dev update blog!
This blog aims to continue updating you with regards to the development of the Bitshares Astro UI; a DEX UI which aims to be the most performant BTS DEX UI possible!
So what's new in today's dev blog post?
Today we'll be talking about the newly developed Smartcoin overview page!
So, as you can see from the above GIF, the user can navigate smartcoins via:
- All active smartcoins
- Only smartcoins for which they hold collateral (e.g. bitUSD has BTS collateral)
- View held smartcoins - so users can rapidly locate smartcoins held in their balance
- By text search - Using fuse.js, the user can search by Debt symbol, Collateral symbol and by issuer name.
Alright, so the UX seems pretty solid and ready for production, now how about performance?
Nice one! These results speak for themselves, eh?
Admittedly, I'll need to do better with the cumulative layout shift, by adding a placeholder card whilst the required smartcoin data is loading, that should drop the CLS down further, but we're talking about work to get that single last performance point, lol!
OK, so big deal, how does it perform compared to the existing reference Bitshares wallet?
Ouch, ok, the reference smartcoin exploration page is slower than the new Astro UI.
How about just the reference wallet margin position overview page? That's similar in functionality to the new "smartcoin holdings" tab, plus it's a pretty simple page too..
Ouch, again, pretty poor performance scores output by the reference UI.
I will admit however, these two reference pages do have an impressive CLS score, so we'll need to step up our CLS accommodations to truly outshine the reference UI properly.
Final performance comparison table!
Let's condense the above figures into a more consumable format:
| Page | Performance | Accessibility | Best practices | SEO |
|---|---|---|---|---|
| Astro UI Overview | 99 (230-254%) | 93 (127-137%) | 100 (133-135%) | 100 (142%) |
| Ref UI Explore | 39 | 68 | 74 | 70 |
| Ref UI Positions | 43 | 73 | 75 | 70 |
The percentage improvements over the reference wallet UI are shown alongside the astro figures; they're shown as a range as we're comparing the one Astro UI page to the two reference UI pages. Between 230-254% higher performance is pretty dang sweet.
The development of the Bitshares DEX UI using Astro, React, ElysiaJS, ShadCN and BunJS continues to prove to be highly worthwhile!
Interested in checking out the code?
Don't forget to click the ⭐ button to like the github repos above!
These developments were brought to you by the NFTEA Gallery.
Consider collecting an NFTEA NFT to support continued Bitshares developments.
Don't have a Bitshares account? Make one today!