Ledger-live-desktop: Add ability to copy balances to the clipboard

[Urgo]

TLDR: Please add the ability to right click on balances (of each coin and all together) and copy them to the clipboard.

Longer Explanation: Ledger Live is a great step towards managing my portfolio at a glance, but still only tracks balances of accounts stored on my nano s. This is fine and probably the right choice, but the feature I'd love to have is pretty simple. It would be great if you could either right click on balances (or really any place where a coin amount is shown) and copy them to the clipboard so I can copy and paste how much btc, eth, etc I have into a 3rd party app (i.e. delta). Right now once a day or so I have to manually type in the numbers. Copy and pasting would save a lot of time.

Part of the application

Ledger Live

[juan-cortes]

I had some time to play with this for a while, making it selectable like @NastiaS did on https://github.com/LedgerHQ/ledger-live-desktop/pull/1215 doesn't work because the balances use the FlipTicker component which is in charge of the flip animations on price changes and whatnot. Selecting the text results in the selection of _all_ the text inside the flip ticker. Think of the FlipTicker like an analog odometer from a car, made of wheels containing 0-9, when you select, you are selecting the whole wheel.

Only making it selectable, no good.

Approach 1

The first solution that is easily implemented (done if needed) would be to intercept the oncopy event and override the copied value with the formatted amount or whatever value deemed appropriate. I'm not totally convinced with it since the selection is visible and you might be copying only a part of the amount but still get the full amount.

Approach 2

Another option I whipped together is extending the component and showing a copy icon on hover, that will remove the need to manually select the text and _maybe_ feel more natural. Clicking on the hover element replaces the clipboard's content with the value to the left. A bit hacky since we need to generate a temp element to select the text from and all that, but nothing too noisy. This would of course require someone with an eye for design to make it look nice, I don't mind working together with someone else if needed.

@gre I know this is super low priority but I'm just warming up familiarising myself with the code, hope you guys don't mind

[gre]

@juan-cortes
hey :) you're good, any contribution is warmly welcomed! I also wish this feature to exist^^

I agree I think Approach 2 is the way to go. it's simpler to implement. I think it should paste the amount, without the "ETH " part.

for the actual design it will need to be discussed internally.

Also we might not have enough space to display it so maybe it has to be positioned absolutely (like at left padding position). this especially when we will display all digits (today, we have JS number approximation, but potentially there will be 18 digits there for ETH^^)

[juan-cortes]

@gre letting the design team decide on where to place it seems like a good idea. However, I also continued to play with this a bit more, and perhaps without changing the design at all, and simply using a different cursor to convey the fact that there's an action of sorts would work.

I think it should paste the amount, without the "ETH " part.

Sure, it's basically val/10**unit.magnitude if I got it right. So we'd get a BigNumber that would need a minimum of unit.magnitude digits to reach a unit of the currency. (I think)

I've added an allowClickToCopy flag to the FormattedVal which would allow any other amount (the USD equivalent, percentages, whatever) to also make use of this functionality by adding the flag. Seems to work well, I wonder if perhaps a global _toast_ system that can give some feedback would be worth considering?

Approach 3