Learn how to configure LeoFinance on your phone to browse and engage with the best user experience. We will create a lite-app with optimized screen-space (full-screen view), reader view, custom search bar and more.
You can undoubtedly apply this method for any frontend, or website.
_{This post is also available in French here.}

Context of this post

While engaging under Hive account@taskmaster4450le’s The Leofinance 12K Comment Push post, I mentioned that I had configured a lite-app of LeoFinance so that I could easily engage on my phone. It sparkled some interest from Hive account@shawnlauzon, Hive account@amr008, Hive account@jfang003 and Hive account@taskmaster4450le himself. I briefly explained that I was using Hermit to do so, and what were the benefits over just using the browser. I asked if I should create a detailed post and they encouraged me to, so here I am!

Hermit, lite-app creator

Before I share how I configured a lite-app for LeoFinance using Hermit, we need to know what it is.
Note that there might be other ways to create a lite-app, I’m using Hermit because I have been using it for some years and it suits me well. I’ll let you do your own research.

Replace large, bulky, slow native apps with tiny, lean, blazing-fast Web-based Lite Apps.
“Sufficiently advanced technology that is indistinguishable from magic.”
• But there’s no magic. Lite Apps are still Web applications.
• Hermit offers an excellently-designed app to wrap them into a thoroughly enjoyable experience. See our reviews!
• Each Lite App opens in its own app-like window.
• Hermit doesn’t open new windows if your Lite App is already open (unlike other browsers!)
• Links clicked in other apps open directly in Lite Apps.
• Every customization setting is configurable individually for every Lite App.
— Hermit’s Playstore description.

---

This is what Hermit looks like:

As you can see I have created multiple lite-apps, each has its own settings.
I find that the mere fact of having LeoFinance on its dedicated app window already makes for a better user experience than having it as a tab in your browser. (Oh and if you’re wondering: yes these can be added to your homescreen).
Now lets dive in and create a lite-app for LeoFinance.

Setting LeoFinance’s lite-app up

Overview

This is the view I get when browsing in the lite-app. As you can see, the entire screen is dedicated to LeoFinance.io, no distracting top and bottom bar that takes too much space.

Creation

Install Hermit and open it.
Type https://leofinance.io in the search bar and press enter. Before logging in, drag from right to left to open the right side panel and press ″create a Lite App″.

Choose a title for your app and press ″create″.
You can now login. Once you’ve successfully logged in, it will remember you.

Settings

You can customize your lite-app when opening the right side panel.

---

If you go under More Settings > Behavior you will see this.

I recommend disabling Pull to refresh as it can act weirdly when you scroll up.
I personally check Frameless to hide the top bar. And I check Scroll to Top to... scroll to top.

Reader mode

Something cool for a blogging platform, is the ability to extract all the text of a post and display it in reading view:

_{Example using this post.}

To do so, open the right side panel and click Reader. Please note that any link and styling will disappear.

Privacy

Under More Settings > Privacy you have a bunch of options. I let you explore them.

---

MOST OF THE FOLLOWING FEATURES ARE FOR PREMIUM ONLY. That’s unfortunate I forgot about that... I am premium since a long time so I can show you these features, it’s up to you to decide if you need them or not. Premium is a one time purchase of around 6 bucks I believe.

---

Style

There is a night mode available for both free and premium users, but it doesn’t work well with LeoFinance, and LeoFinance already has a clean dark mode so I would rather use it.

Under More Settings > Theme, I have this:

I use a custom icon because the one retrieved from LeoFinance.io was low quality. I got it from Reddit (here).

I set a custom color in the last section. It is the color of the notification bar.
I like to create a sense of uniformity so I used the color of the LeoFinance top menu which is #0F171F.
If you prefer to use the dark mode background color, to create uniformity when reading a post, then you want to use #1E2E3E instead.

Custom notifications

You can setup custom push notifications under More Settings > Notifications. I have not been able to have something functional yet 😥 Any help is appreciated! There is a great helper page that I used, but nothing that I tried worked so far.

Here is what I tried: I first though of being notified when there is text update in @crazy-unicorn/notifications. However it can’t work as JavaScript is needed to load the notifications. So I tried with @crazy-unicorn/replies with the CSS selector .panel-body. In theory it should work, but it doesn’t and I can’t figure out why.

Anyway, this is a feature, and I will have it working eventually 😄 Again, any help is welcomed.

Custom search bar

This is something easier to setup. You type a link, and you add %s where you want your query to be placed in the link.
For example if I setup my custom search with https://leofinance.io/@%s and then search for leo.voter, it will load @leo.voter.

Apparently you can also configure your lite-app to be available when using a share feature from an other app, but I haven’t look into that.

Bookmarks

If you drag from left to right you will open the left side panel.
You can then add links to have quick access. I have put https://proofofbrain.io even if I could have created a different lite-app. You can for example put https://hivestats.io/ and https://leopedia.io/ those would be a good fit I guess but it’s up to you.

---

I hope I was able to teach you something useful.
Please let me know if you have any question!