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.
While engaging under 
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
