A Massive Makeover for the Mithril Diesel Pool (And Other HiveTools Updates)

(edited)

Lately, I’ve been busy making a bunch of changes to HiveTools and Market-Viewr.

This wasn’t just one big feature drop. Instead, it was a laundry list of layout cleanups, UI/UX polish, dark mode fixes, and some under-the-hood structural changes that I finally got around to staging.

Before I jump into the details, I want to give a massive shoutout and special thanks to @forkyishere. Most of the UI improvements and functional tweaks listed below came directly from his suggestions and feedback. Working with the community to make these tools less annoying is easily the best part of building them.

Here is the rundown of what has been going on.


1. Beeswap is now the Mithril Diesel Pool

The first big change is a branding shift. The old Beeswap references and modules are now rebranded to Mithril Diesel Pool.

Along with the name change, the layout got a complete makeover:

  • Theme-aware banner headers that match your preference.
  • A responsive sidebar layout for balances.
  • Clearer spacing and typography across the swap and pool pages.

It looks a lot cleaner and feels like a cohesive part of the tool suite.

The new Mithril Diesel Pool swap interface


2. Dynamic OpenGraph Preview Images

If you shared a specific pool link on Twitter/X or Discord before, you just got the default site metadata.

Now, pools have a dynamic OG image generator built on the backend using Python's Pillow library. When a link is shared, the server dynamically draws a custom preview image showing the pair symbols, active reserves, current price, and TVL metrics.

You also get full OpenGraph, Twitter Cards, and Facebook tags generated dynamically for every single pool route. Sharing is much more visual now.

Example of a dynamic OpenGraph preview card


3. Dropdowns Aren't Stupidly Long Anymore

In the pool pages, we have long dropdowns listing available tokens or user positions. If you are dealing with common base tokens like SWAP.HIVE, that list can stretch to dozens or hundreds of items. It overflowed the screen, looked terrible, and made selection a chore.

We fixed this by:

  • Adding sticky search boxes at the top of the dropdown lists.
  • Restricting list height and making them scrollable (max-height: 250px or 300px).
  • Preventing the dropdown from closing when you click the search box.
  • Auto-focusing the search input as soon as you toggle the dropdown open.

This is active on the main swap interface, the tokens list, and the add/remove liquidity screens.

The new searchable, scrollable token/pair dropdown menu in action


4. Dark Mode Actually Works Everywhere

Dark mode is great until you find pages with high-contrast text that look like they were styled in 1998, or cards with white backgrounds that blind you.

I did a sweep across the code and fixed these:

  • Changed remaining hardcoded bg-light classes to theme-aware bg-body-tertiary or bg-body-secondary.
  • Resolved contrast issues in the Post Curation Tool (PCT) post cards, links, badges, and tag chips.
  • Removed outdated table-light headers that overrode dark mode table rendering.
  • Fixed text colors on error pages and feature headings to use text-body-emphasis so they are readable.

5. Dynamic Sitemap and Favicons

Search engine optimization isn't exciting, but it has to be done.

I wired up a /sitemap.xml endpoint that dynamically queries the Flask application's url_map. It automatically lists every static and tools route while filtering out dynamic detail pages, API endpoints, and redirects. If I add a new tool tomorrow, it will show up in the sitemap automatically.

Also, I finally put together a proper favicon suite (including high-res icons and a web app manifest) so the app icons look crisp on mobile home screens and modern browsers.


6. Market-Viewr Updates

On the Market-Viewr side, I made a couple of adjustments to align with the new design:

  • Updated the header layout and external links to match the Mithril Diesel Pool branding.
  • Fixed a bug in the services layer where market history queries weren't filtering data by the requested timeframe on the python backend. Now, history charts display only the selected range instead of throwing range mismatches.

The updated Market-Viewr layout and history charts


It feels good to get these details sorted.

As always,
Michael Garcia a.k.a. TheCrazyGM

0.09056127 BEE
1 comments

Signal

Type: original post | Authentic: authentic | Importance: important

Topic: Visual and usability improvements to Hive tools to make them more user-friendly.

Tags: #hive #webdesign #update

Claim: The user argues that the software improves when the community is listened to.

Stance: support

00 — Extensive drop-down menus have been created that display available tokens or user positions.

Why it matters: Because an app that looks good and is easy to use makes our browsing experience much more enjoyable.


Posted via First Context

0.00375426 BEE