feat: add cheatsheet

[theborakompanioni]

This PR adds a cheatsheet component.

It is currently only shown in devMode for now, as some items on the list (e.g. Fidelity Bonds), are not yet supported.

Differences to the Figma design:

• Adds a close button to the overlay - this is needed on small mobile devices (Should it be hidden on bigger screens?)
• Footer Link Icon does not match (currently using File as placeholder – found no real alternative on https://bitcoinicons.com/ yet)

📸

[theborakompanioni]

Footer Nav.Item's still need some styling on mobile.

[editwentyone]

thanks for the update. i added a "close" button and changed icon to the "file" icon from bitcoinicons. valid point for mobile use.

some thoughts:

would love to see the cheatsheet jump up once fully automatically after a delay when the user uses JAM for the first time, directly after the creation of the first wallet (see rapid prototype, flow "empty wallet" for a better understanding, press R to reset prototype).

the underlined words are links, the first 3 links in the text are linking to openoms sources and the other links are linking to parts inside the jam app. i.e.: (1) Fund your wallet first. (click it inside the prototype)

also its better to hide "cheatsheet" in the footer until the user created the first wallet (if easy and possible). just to not confuse too much at the beginning.

I gave point 4 fidelity bond another color to show its inactive for now, but never the less, there are some informations that enlightens the user. maybe its a good idea to also communicate the upcoming feature FB

[Djo1e]

I think you can take this one step further

interface ListItemProps {
  number: number
  transaltionKey: string
  descriptionKey: string
}

function ListItem({ number, children, transaltionKey, descriptionKey }: PropsWithChildren<ListItemProps>) {
  const { t } = useTranslation()
  return (
    <rb.Stack className="cheatsheet-list-item" direction="horizontal" gap={3}>
      <div className="numbered">{number}</div>
      <rb.Stack gap={0}>
        <h6>
          <Trans i18nKey={transaltionKey}>{children}</Trans>
        </h6>
        <div className="small text-secondary">{t(descriptionKey)}</div>
      </rb.Stack>
    </rb.Stack>
  )
}

<ListItem number={1} transaltionKey="cheatsheet.item_1.title" descriptionKey="cheatsheet.item_1.description">
    <Link to="/receive">Fund</Link> your wallet first.
</ListItem>

[theborakompanioni]

Passing translation keys strikes me as unnecessarily restrictive.
It is so little code - feels like over-engineering to me for now. Do not get me wrong - I love to over-engineer.. : D
But feel free to add any improvements once the PR is merged!

[theborakompanioni]

Updated screenshots.

[theborakompanioni]

would love to see the cheatsheet jump up once fully automatically after a delay when the user uses JAM for the first time, [...]

Done. Will be shown once after a wallet has been unlocked, just like the onboarding screen.

the underlined words are links, the first 3 links in the text are linking to openoms sources and the other links are linking to parts inside the jam app. i.e.: (1) Fund your wallet first. (click it inside the prototype)

👍

also its better to hide "cheatsheet" in the footer until the user created the first wallet (if easy and possible). just to not confuse too much at the beginning.

It will be displayed only if a wallet is unlocked - not on the login screen (links would not work).

I gave point 4 fidelity bond another color to show its inactive for now, but never the less, there are some informations that enlightens the user. maybe its a good idea to also communicate the upcoming feature FB

👍 Done. Opacity decreased for item 4.

Edit: The feature is still disabled by default for now - should it be enabled once scheduled transactions are supported?

[theborakompanioni]

Nice! That looks great already!

All honor to @editwentyone.

Some word choices could be improved, or at least we should explain the concepts somewhere.

I am always grateful for concrete wording suggestions, because there are so many people who have the necessary talent for this - but I am afraid I am not one of them.

Here is what came to mind:

* Why is "adding noise" good?

Changed from "add more noise" to "increase privacy of all". "noise" is avoided entirely. It is not used anywhere and would - like you said - need an explanation. Acceptable approach?

* What is "sweep"?

Since we use the term "sweep" on the Send screen also, do you think it can be explained there and is this the appropriate context? Refrained from changing anything in the cheatsheet component regarding this for now.

* "very private" - how about "more private"?

👍 "more private" it is.

* Not sure if we should focus on yield that heavily, as others mentioned in the past the amounts that you will earn are probably rather low. Maybe do some expectation management?

Yep, that is true. Maybe also better explained on the "Earn" screen, when the context is appropriate (?).

Feel free to ignore the above, we can improve all this at a later point as well. It's a good first version! clap

One question before it is merged - should item 3 and 4 be flipped?

[dergigi]

Should item 3 and 4 be flipped?

I'd say yes.

Another thing that touches on something that we discussed often—something that isn't fully resolved yet—is the mentioning of "levels."

If we manage to implement and ship #179 with the next release, manual consolidation (and thus anything that mentions "levels" at all) might fall to the wayside for most users, since this would be automated with scheduled transactions.

I'll propose some wording changes in the code directly.

[dergigi]

I just noticed that there are two sources of truth for the text due to the translation engine, so I will just type it out here before I propose code changes that might be misplaced:

---

The Cheatsheet

Follow the steps below to increase your financial privacy. It is advisable to switch from earning as a maker to sending as a taker back and forth. Learn more.

1) Fund your wallet.
Deposit some funds yourself or receive it from others.

2) Send a collaborative transaction to yourself.
Collaborative transactions increase everyone's privacy.

3) Optional: Lock funds in a fidelity bond.
A fidelity bond increases your chances of selling liquidity substantially.

4) Provide liquidity and earn yield.
Offer your sats to the marketplace. No trust or custody required—you are always in full control of your funds.

5) Make use of scheduled transactions
Automatically plan and execute a series of collaborative transactions. You can also automatically sweep your funds to cold storage, or use them to open a lightning channel, for example.

6) Go to step one and repeat.
Still confused? Dig into the documentation.

---

This assumes that we will ship #179 soon, which I think we will. I'm an optimist! 😁

Let me know what you think.

[theborakompanioni]

I just noticed that there are two sources of truth for the text due to the translation engine, so I will just type it out here before I propose code changes that might be misplaced.

Ah, yes, totally forgot that fact when applying the suggestions before.

This assumes that we will ship #179 soon, which I think we will. I'm an optimist! grin

Yes. Worst case is, we have to apply css class upcoming-feature to that item. Not an issue 👍

Let me know what you think.

I'd merge it! Ping @editwentyone for a competent design perspective.

[editwentyone]

hey :) because on mobile its a lot of text, I would suggest to fix the Numbers at the top of the cell, I also fixed it in Figma.

also I would suggest to link only the important words like Fund, Send, Earn, it reads faster

[theborakompanioni]

hey :) because on mobile its a lot of text, I would suggest to fix the Numbers at the top of the cell, I also fixed it in Figma.

👍 Done.

also I would suggest to link only the important words like Fund, Send, Earn, it reads faster

👍 Done.
I changed the wording slightly in order for links to come first (at least in English).

• "Provide liquidity and earn yield." => "Earn yield by providing liquidity."
• "Make use of scheduled transactions." => "Use scheduled transactions."

[dergigi]

Love it! One final suggestion from my side:

5. Schedule transactions.

This way it reads fund / send / earn / schedule.

Great suggestions Edi, and great job implementing all this tbk! 🧡

[theborakompanioni]

This way it reads fund / send / earn / schedule.

Looks and reads even better!

The latest changes also contain the most basic support for simple Feature Flags.
Feature 'cheatsheet' can be enabled once #179 is merged.

Will merge this as soon as it is approved, but please do not hold back in case anyone still comes up with suggestions or feedback.

[dergigi]

Looks good to me ✅

[editwentyone]

one little annoyance: by clicking a link like "Fund", its switching the page in the background and keeps the cheatsheet still in the front. could we close the cheatsheet also with the same click?

(+ is it possible to overlay the complete page including the header when the cheatsheet is active?)

[theborakompanioni]

one little annoyance: by clicking a link like "Fund", its switching the page in the background and keeps the cheatsheet still in the front. could we close the cheatsheet also with the same click?

I thought of that as a feature instead of a bug : D
But of course, it is possible! Would you open a ticket for that? Could be tagged with "good first issue".

(+ is it possible to overlay the complete page including the header when the cheatsheet is active?)

This is a little bit trickier, but also possible of course. The reason is that the navbar should be shown as usual on some occasions when a backdrop is active, e.g. when showing the navigation on mobile. Personally, if I may say that, I'd rather not do that.

[theborakompanioni]

one little annoyance: by clicking a link like "Fund", its switching the page in the background and keeps the cheatsheet still in the front. could we close the cheatsheet also with the same click?

I thought of that as a feature instead of a bug : D But of course, it is possible! Would you open a ticket for that? Could be tagged with "good first issue".

This should now also work with v0.0.6 @editwentyone 🚀