Improve the "Hide balances" feature

[dahaca]

Currently the balances are just getting blurred but the length of the number stays the same.

Therefore, I would render a 3-5 random digit string replacing the original value contained in the HiddenPlaceholder.

[peter-sanderson]

Just notes from my playing with it for a while:

• The <HiddenPlaceholder> takes any inner component, it can be formatted string, image, chart, really it can be ANY react component
• This it is not possible to change the content of it reliably.

I have been also experimenting with replacing blur with just a "blackening" of the data:

This worked better but still the max-size of such element needs to be addressed.

• Here is the PR with my playground: Playground for the better Secret mode (blurring the numbers) #10565
• Here is the PR with last sub-optimal update: Review: blur amounts better #10534

[dahaca]

• The <HiddenPlaceholder> takes any inner component

Currently only the graph is being blurred, which can either be left as is, since it does now show any obvious scale or passed some placeholder data as well, not via the HiddenPlaceholder

• This it is not possible to change the content of it reliably

HiddenPlaceholder should ideally be re-written with a different structure to allow for that. That's why I separated the issue.

And colored bars are definitely a no-go solution, since they are extremely obtrusive 🙏

[MiroslavProchazka]

Could we use some static number like 0,123456 instead of some random one every time? It would have fixed length so we would know it does not break or overflow some fields. Your opinion @Hermez-cz ?

[Hannsek]

We've discussed blurring some time ago. I'll try to find that. But generally the way is to either blur random strings so you cannot read it through the blur or use asterisks or improved blurring.

[dahaca]

@MiroslavProchazka as I wrote in the issue, if only 3-5 digits are rendered, nothing will overflow for sure :D Looks much better than using the same value. Revolut does this, for example.

[komret]

Unless anyone has a better idea, let's replace the whole value with ***** while blurred.

[prusnak]

Unless anyone has a better idea, let's replace the whole value with ***** while blurred.

Let's see how it looks. Maybe we would need to use a different character (# or 8) which has the same height as numbers. Asterisk character has much smaller height. That said, it might still work, so let's see :)

[bosomt]

QA OK

Info:

• Suite version: desktop 24.10.0 (03347b5)
• Browser: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) TrezorSuiteDev/24.10.0 Chrome/126.0.6478.234 Electron/31.6.0 Safari/537.36
• OS: MacIntel
• Screen: 1512x982
• Device: Trezor T3T1 2.8.4 regular (revision ab96ce7954c7db384b26bc863d8752150027adbf)
• Transport: BridgeTransport 2.0.33