feat: onboarding screen

[secondl1ght]

I started working on an initial draft of the onboarding screen, I created a new component for this. I used the designs from Figma as a starting point, @GBKS made some suggestions of what to include with these screens in issue #13. I am not familiar enough with the app to write the copy for this myself and I think there still needs to be a decision on what we want included. I am starting this draft pull request to get feedback and continue the discussion on this.

Here are the 2 screens I have so far:

Please let me know what you think and what I should add to this going forward. Also I haven't hooked it up yet to run when the user initially launches the app, it still needs to be integrated that way.

Thanks!

Closes #13

[dergigi]

Nice! Looks good already! We should make sure to adjust the logo color based on the theme, but that's a minor thing.

I'll do my best to write some copy for this soon, and as @dnlggr suggested we should probably also include a kind of warning in the first couple of versions. This is beta software after all, we should do some expectation management 😅

[dergigi]

I tried my hand and writing a basic introduction. Not sure how helpful it is, it is very general and not linked to the concepts in the UI yet. Consider it a humble 1st draft.

---

1: Welcome to JoinMarket!

JoinMarket is a privacy-focused software solution that aims to improve the confidentiality and privacy of your bitcoin transactions. It facilitates the creation of collaborative transactions through a peer-to-peer marketplace.

⚠️ Warning: While JoinMarket is tried and tested, this user interface is not. If anything breaks please report an issue on GitHub.

2: Collaborative Transactions

To have strong privacy guarantees in the open and transparent world of bitcoin, special kinds of transactions have to be created. JoinMarket helps you to create these transactions in an easy and automated way.

3: You Are In Control

JoinMarket is fully non-custodial, meaning that you always have full control over your funds. The system uses Bitcoin’s smart contracts to make sure that all transactions are atomic and your funds are secure at all times.

4. No Trusted Third Parties

Since JoinMarket is a peer-to-peer system, trusted third parties are eliminated from the get-go. This unique market-driven approach reduces counterparty risk to a minimum.

5: Privacy for All

JoinMarket is free and open-source software without a single point of failure. Everyone is free to use it and build upon it.

[secondl1ght]

Awesome thanks @dergigi, here are some screenshots so you can see how it looks so far. I also added some icons to each screen, I made them a bit smaller than the logo icon on the landing page but I could make them all larger and the same size if you think that looks better.

[dergigi]

I think it looks great already! The text is far from perfect, but I think it's better than having no intro at all 😅

[ghost]

Nice, good job! It looks great already. The icons are definitely a nice addition. ✨

So far we've been using icons from bitcoinicons.com. If possible, I'd say let's use icons from there to keep the looks consistent across the whole app. I'm not saying we shouldn't use other icons but if an icon is available at bitcoinicons.com (e.g. the key 🔑 ), let's use that one then. If you can't find good replacements there, then keeping the current icon is fine as well of course!

As for deciding on when to show the onboarding flow, I'd say let's just use something like a showOnboarding flag in local storage and set it to false after the onboarding flow was shown once. You can add settings flags here. See here for how to set/unset them.

Let me know if you need anything!

[secondl1ght]

Thanks for the feedback and help! I have now hooked it up to the local storage like @dnlggr suggested. So it will appear when you first load the app. I've also made changes for all the suggestions. Here are some updated screenshots, I am going to change this from a draft PR to a regular PR now because technically it could be merged at this state and work. We may want to keep this open until we iterate on ideas for the onboarding more. Or if we like what we have so far we could merge this and move the discussion for improvements to the issue #13 and then I can put in a new PR once we hash out what we want included.

I updated the final button to sat 'Let's go!' instead of Continue like the others ones.

[secondl1ght]

One second there was a problem when merging from master - I am fixing now.

[secondl1ght]

Looks like I missed a merge conflict, sorry about that. Should be good to go now!

[theborakompanioni]

@secondl1ght Nice work! 💪

Some observations and questions regarding this:

• I'd vote for a "Skip intro" link - what do you think?
• Padding on mobile seems suboptimal, both left and right (text), as well as top and bottom (logo and button) e.g. try landscape mode
• Some users like to delete all website data often - can we prevent this from being shown every time? (e.g. skip the intro if there is already a wallet, or something like this)
• Should we change "Continue" to "Next"?
• Five pages seem a bit much, would try to reduce it to a maximum of three. This is just a personal opinion.

[secondl1ght]

Thanks! Ok I made all of your changes except for # 3 and # 5. Personally I don't think its bad to show the onboarding each time, especially now that we have the Skip button. But I can make that change if people want it, and I also kind of like having each item on its own screen. We could just show all of the information in a single page but that would make the onboarding very short and people might skip it. Whereas having each item on it's own page, I think people will read the shorter amount of text.

Here is a couple updates screenshots:

I can make those last changes just wanted to give my thoughts on it as well.

[ghost]

Nice, it's almost there! I'd recommend updating the buttons one more time (see my inline suggestions).

As for whether to show the intro if there's already a wallet, I'd say it's fine either way. With the "Skip Intro" option it should be ok to just keep it but I have no strong feelings either way.

[secondl1ght]

Updated screenshots:

[ghost]

Nice, thanks for the updates. LGTM. Good job! ✅

My last NIT: The buttons aren't all on the same height which makes it a bit cumbersome to click through. That's something we can tackle in a separate PR though, let's not make this a blocker for getting this in.