![LeoFinance Beta UI Development Update  Content Discovery Reimagined, Themes, HiveOnboarding .png](https://images.hive.blog/DQmSRreRgP725VTfsxwcNNCf691JfYhziWzQXeZanZn5LpH/LeoFinance%20Beta%20UI%20Development%20Update%20|%20Content%20Discovery%20Reimagined,%20Themes,%20HiveOnboarding%20.png)

The LEO team has been busy the past few weeks. Not only have we been preparing everything for the wLEO launch - including 3 new websites/landing pages - but we’ve also been testing various things over on Ethereum and connecting with different communities as well. The wLEO launch is going to a spectacular show of our ability to connect with communities outside of Hive and onboard new users.

The preparations for wLEO are just one of the things we’ve been building. For the past ~2 months, we’ve been designing and building our own interface from the ground up. 12 days ago, we launched it into public [Beta](https://beta.leofinance.io) and are continually rolling out changes on a daily basis. 

The updates, upgrades and new features that we’re bringing to our glorious new interface are incredibly fun to design and dream up and even more fun to play with after they’ve been implemented. Many features are being added by community recommendations and feedback along with a core set of features that are being added according to a longer-term roadmap.

This past week, we’ve added a whole host of changes, updates and upgrades. In this post, I’ll review many of the updates that have been made thus far and then talk about some of the upcoming implementations which will be rolled out in the next 7 days.

- Homepage: Reimagining Content Discovery
- Dark Mode Toggle
- Light, Dim or Lights Out?
- Sticky Footer
- Vote Details
- LeoApps Menu 
- Wallet Page
- HiveOnboard Integration
- New Sign In Window
- Get Help!
- In the Pipeline

<h2> Homepage: Reimagining Content Discovery</h2> 

![image.png](https://images.hive.blog/DQmZTn6FLtzyWjuk33xaMMYQNSGLk2FMf1XSnYh13iBYv9y/image.png)

- Curated Content
- Topics Slider 
- Popular
- Latest

On our new homepage, we've taken a different approach than what's been done on Hive before. The first section exclusively displays manually curated content. The current implementation of this displays the top 5 pieces of content ranked by an algorithm which calculates the vote weight % of a curator and the time when they curated that piece of content. 

In a future update, we're adding an extended list of curated content which will be accessible with a button that says "**See More Curated Content**". This section will lead to a redesigned page that shows filterable content going back further than just the current payout window. Giving more attention to evergreen content that was created and curated for quality in the past.

Above the curated content section, you'll our redesigned "**Topics Slider**". The Topics Slider shows some of the most popular tags on the LeoFinance platform. Users can click on a tag that they're interested in to go to the Trending page for that specific content category. 

![image.png](https://images.hive.blog/DQmPh4mgj3EvF59fyqxdh1FcinCcTv5Y89NMej6HRsPr4FN/image.png)

Below the curated section, you'll see two familiar feed styles: **Popular** and **Latest**.

The Popular feed is the infamous "Trending" page for LeoFinance content. This feed is ranked by the amount of LEO a post is earning - the more LEO a post earns, the higher it ranks. You'll also notice a promoted post at the top of the feed: users can promote posts by burning LEO (sending it to @null with the link to their post in the memo field). 

To the right of that is the Latest (a.k.a. Created) feed. This shows the 5 most recent posts that were published to LeoFinance. Below this section, you'll see a "See More New Posts" which will take you to the full Created page. 

<h2> Dark Mode Toggle</h2>

![image.png](https://images.hive.blog/DQmZgeCWSt1Lb1kcFDyzcNCNpypZjihogCYMnyQKCMpVi5h/image.png)

<center>https://media0.giphy.com/media/FBPHRCeGgXoEXizymD/giphy.gif</center>

This one is custom made for @rollandthomas. When I asked for his input on the dark mode, he said that he couldn't find the switch to turn it on. So I looked around on some of my favorite UI designs and we came up with this light/dark toggle next to the LeoFinance logo. 

This toggle will instantly switch your display between the Light and Lights Out themes.

<h2> Light, Dim or Lights Out?</h2>

We've added 3 themes to the LeoFinance Beta UI! You can toggle between the 3 in your settings page or toggle between lightest and darkest using the button next to our logo.

**Light:**

![image.png](https://images.hive.blog/DQmR8e8fKq6Dn3cW8kiDZbiSet94VAb7HxgNU7rmS57jtMN/image.png)

**Dim:**

![image.png](https://images.hive.blog/DQmdHya1wgd8wnP7T8kyVGyBX6DR6iAs8RjMhCoeHgHDn2f/image.png)

**Lights Out:**

![image.png](https://images.hive.blog/DQmPqZdhdKKDBUKrZ24dQDUTKeKyQPSPBFA1eXVNJR7FDNw/image.png)

We have a lot of plans for this new ability to add themes to our UI. In the future, you can expect a lot of interesting implementations and customizations that ship standard to all users. We're also going to release certain theme packs that are unlocked based on LEO Power, community status, achievements, etc. 

Themes might seem like a vanity feature on the surface, but close your eyes and imagine a day when the theme customization you have selected shows off not only an interface tailored to your liking, but also one that reflects your status in the LeoFinance community as a stakeholder, author and curator. 

<h2> Sticky Footer</h2>

![image.png](https://images.hive.blog/DQmaxqF6RayWGpSxQgDVUGQpThMj3AYHrVwRdn4ptMMe3ag/image.png)

This is a small detail, but is one of the many features that makes my life as a curator a whole lot easier. When you're reading a post, the metadata (vote button, comment, reblog, payout, etc.) will all be shown in a sticky footer.

<h2> Vote Details:</h2>

![image.png](https://images.hive.blog/DQmSbDWXVYz3AfvVkzjSDULuoykrvgwBP1WfzeKSkbqKgqF/image.png)

If you hover over the # of upvotes a post has received, you'll see the top 10 users (ranked by LEO) who've upvoted this post already. When you click on this number, it will show a detailed display of prior votes. Showing you every user who voted on the post including the value of their vote (in LEO), the vote weight % they used and the time after publication that they casted their vote.

*You can also hover over the pie chart to see who's vote contributed the largest chunk of LEO to the total payout value.* 

<h2> LeoApps Menu</h2>

![image.png](https://images.hive.blog/DQmNmkhad5J8cDP7hWXsYAw7ueaw1cBVW2i7wdjcpRUGFKM/image.png)

Quick access navigation to the LeoApps suite: LeoDex, Hivestats and LeoPedia. Soon, the wLEO interface will be added to the list!

<h2> Wallet Page</h2>

![image.png](https://images.hive.blog/DQmSKmGFfN1qaWLevCuy4zz7eQJLCD7Mvh1tSZqkfJxJYMk/image.png)

Since our last UI update post, we've made a lot of changes to the wallet page. One of the main things you'll notice is the addition of a **LEO Wallet** tab on the left side. This wallet is the default display and will show:
- Liquid LEO token balance
- LEO Power (LP) balance
- Ongoing Power Down (if one is in progress)
- Estimated Account Value (LEO + LP * current LEO price)

Along with these displays are the buttons to interact with LEO. From this wallet you can:
- Send LEO
- View the Trade Page On LeoDex
- Power Up (Stake) LEO
- Delegate to Another User 
- Undelegate
- Power Down
- Cancel Powerdown

On the right side of the wallet, you'll see real-time price displays for HIVE, HBD and LEO - which we've discussed in a prior update. 

![image.png](https://images.hive.blog/DQmdFeKynNN86hFCDHuopT2JfRQ5kVpZpazQLAdjLgjJBTC/image.png)

Below the wallet itself you can see your LEO Transaction history. This will show any curation, author & mining reward payouts along with inbound/outbound transfers of LEO. 

We also made some improvements to the Hive-Engine wallet, which I won't detail in this post. You can now see historical transactions, rewards, etc. for all Hive-Engine tokens along with a few other key features. 

<h2> HiveOnboard Integration</h2>

This is an integration that we rolled out with high priority as the wLEO launch date approached. Even though we pushed back the launch of wLEO because of ETH network congestion, we still have the onboarding feature implemented for when new users come to the site and try to sign up. 

When a new user comes to the site, they'll see two options:
- Sign In
- Sign Up

The Sign Up button opens a popup window that is integrated with the HiveOnboard service. From there, the user simply enters the username of the Hive account they want to create, then they verify that they aren't a robot and then save their keys.

![image.png](https://images.hive.blog/DQmVvmUFtVWJ1DtbkcRn25iCyVvGLVJKvLfxMqcvykdRdm4/image.png)

After that, the UI automatically re-prompts them to login with the Username they just created. I did a [video demo of this signup process](https://twitter.com/FinanceLeo/status/1306253744137478145), which you can view over on Twitter.

This is still an early implementation of the onboard process - we have some updates to this process being rolled out in the next 1-2 days. Again, we built this feature as fast as possible so that it would be ready for the wLEO launch but now we have some more time to polish it and add the additional displays/integrations that we designed.

We also have some other big news in terms of onboarding/Hive account signups. We'll talk about that in a post next week.

<h2> New Sign In Window</h2>

![image.png](https://images.hive.blog/DQme1Uy68ck88s1DX27iLkEALjaqJYTWmKA5ikRfATy6QLe/image.png)

We also revamped the Sign In process by adding the options for Hivesigner and Hive Keychain. If the user has Hive Keychain, it will prompt them to enter their username and hit enter or choose Hivesigner if that's their preference.

If the user doesn't have Hive Keychain installed, they'll see the above dialogue which says to login using Hivesigner or install Hive Keychain from their respective browser webstore.

Next week, you'll see why this Sign In update is so important ;)

<h2> Get Help!</h2>

![image.png](https://images.hive.blog/DQmaCgUzMwDbebkD1Wm3XsRUA5KVZN5gS9eMt1SmfakVQr3/image.png)

You may have noticed the 3 icons in the bottom right. On desktop, there are 3 buttons here which link out to the LeoFinance Twitter Page, the LeoFinance Telegram and our Discord Server. 

**Get Help! (On Mobile)**


![image.png](https://images.hive.blog/DQmPtZUzN9EGQam5D1EjanrY7emuhZMY8VgeipGcgKSEDnw/image.png)

On mobile, the Discord server button is shown in the bottom right corner. Similar to a help button, this will help new and existing users quickly navigate to our Discord server to ask specific questions, receive tech support, request new features, etc.

<hr>

This post is running quite a lot longer than I expected. As you can see, we've added a lot of new features to the site with many more on the way. Expect another development update post in a few days 🦁

<h2> In the Pipeline</h2>

We're actively adding new features to the Beta UI each day. Anyone who has been testing/using the Beta interface has seen that each day you visit it, there is something new. Whether it's a small but useful feature like the Dark/Light mode toggle by the logo, bug fixes or something major like the new homepage.

What's even more exciting is the release that we have in the works right now. We're updating the mobile version of the site and adding a mind-blowing new integration that has not yet been done on any Hive-based content interface. 

Pushing back the wLEO launch due to the ETH network fee issues is a blessing in disguise for a few different reasons. We've turned a negative into a positive, especially with this upcoming feature. 

*Hint: it will onboard a lot of new users from DeFi/Ethereum into Hive accounts. All through the new LEO UI.* 

&nbsp;
![steemleo black token divider.png](https://files.steempeak.com/file/steempeak/steem.leo/TxGWqiPZ-steemleo20black20token20divider.png)
&nbsp;

<h2>Join Our Hive Community & Earn LEO Rewards!</h2>

Earn LEO + HIVE rewards by creating crypto/finance-related content in our [PeakD community](https://peakd.com/c/hive-167922/created) or directly from our hive-based interface at [leofinance.io](https://LeoFinance.io) or [LeoFinance <sup>Beta</sup>](https://beta.leofinance.io) 

|        Track Hive Data           |           New Interface!               |          About Us          |
|:---------------------------------:    |:-----------------------------------:    |:-----------------------------------:    |
| [Hivestats](https://hivestats.io)     | [LeoFinance <sup>Beta</sup>](https://beta.leofinance.io)     | [Learn More](https://leopedia.io/explainer)     |
| https://i.imgur.com/q2sLO5O.png | https://i.imgur.com/WK1cedj.png | https://i.imgur.com/k4R5L2Y.png |

|          Trade Hive Tokens              |        Learn & Contribute           |       Hive  Witness           |
|:-----------------------------------:    |:-------------------------------:    |:-------------------------------:    |
| [LeoDex](https://leodex.io)     | [LeoPedia](https://leopedia.io) | [Vote](https://hivesigner.com/sign/account-witness-vote?witness=leofinance&approve=1)
| https://images.hive.blog/640x0/https://i.imgur.com/HZrtczc.png | https://i.imgur.com/Vqmx14q.png | https://i.imgur.com/RmGMjcS.png |

<center><sub>**Follow @leofinance for official updates**</sub></center>

Posted Using [LeoFinance <sup>Beta</sup>](https://beta.leofinance.io/hive-167922/@leofinance/beta-ui-development-update-or-content-discovery-reimagined-themes-hiveonboarding)