Bitshares Astro DEX UI Showcase - Avatars!

in bitshares •  9 months ago  (edited)

So I've been posting recently about the recent Bitshares Astro DEX UI developments which are well underway & already delivering overwhelmingly positive performance improvements over the existing DEX reference UI.

So to keep everyone in the loop regarding developments, i'll be creating regular UI showcase posts to keep everyone up to date!

So let's get to today's topic!

Avatars!

I really liked the old robohash avatars that BTSX originally used, I feel that the switch to the identicon pattern avatars lost BTS a bit of personality in the UI, so I set out looking for a modern alternative to the robohashes.

I ended up finding the Moodie Avatars library created by the Describble team, which provided semi random avatars based on a string input.

Since the Moodie code is MIT licensed, I scooped out the core functionality for the eyes, mouth and random background colour, and set about making the direction the avar looks based on the location of the mouse, instead of based on the string input.

I really like how the avatars look and act now, the following is always shown at the bottom of every page, acting as a reminder of which account you've selected and offering a shortcut to rapidly switching account in the UI.

avatar1.gif

When you select "Switch account/chain", you can select from previously used accounts, and for each of them their avatar is shown and each tracks your mouse position.

avatar2.gif

And where appropriate, these avatars are being introduced directly to the BTS DEX UI forms:

avatar3.gif

You might have picked up on it from the above GIFs, the avatars blink at random intervals for random durations, so they feel a bit more life like!

Further, if you go AFK the avatar will go to sleep!

avatar4.gif


What do you think of this avatar system?

Would you want LTM members to have avatar accessories, or a decorated avatar card?

Would you like to change your eyes/mouth to different default expressions?

Do you miss the robohashes?


Want to see the code? https://github.com/BTS-CM/astro-ui

Don't forget to smash the Github ⭐ star button! ;)


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!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!