Add unit switching within the "Amount" input

[stackingsaunter]

Currently there are two important missing features while creating an invoice that are often used and requested:

• creating invoiced priced in fiat currency
• being able to see/use units in BTC not sats

Let's add both being able to set an input by user in fiat and also change sats to BTC.
You can play how desired outcome should work in this prototype

You can see the behaviour flow and hanoff HERE.

Changes description:

1. Add trailing users input "sats" or "BTC" unit:
   

2. Those units should be clickable and change to BTC (and vice versa)
   

3. Clicking on fiat unit should switch it's place with bitcoin units, thus making it possible for the user to create an invoice priced in fiat:
   

4. If fiat unit has a symbol, we show it in front of the number. If it uses 3 letters (USD, ARS, TRY, PLN etc) we should show it after the fiat amount:
   

5. All units have hover states I also found one colouring inconsistency. Amount input in dark mode uses "gray" instead of "neutral" like all the rest units, so we could upgrade it to "neutral" with PR related to this issue^
   

Handoff

[abhiShandy]

I would like to work on this for Hacktoberfest.

[stackingsaunter]

@abhiShandy I assigned you

[abhiShandy]

First phase

• Add trailing "sats"
• Make trailing "sats" clickable to switch to "BTC" and vice versa
• Fix the text color in dark mode fix: dual currency input styles #2784
• Add hover states to units
• Show three letter fiat code after the fiat amount

Second phase

• Switch from fiat to bitcoin and vice-versa

[abhiShandy]

The Intl.NumberFormat displays fiat in different formats when locale is changed. Check this example.

[stackingsaunter]

@abhiShandy I changed a bit colors in the inputs. Please refer to those colors:

[abhiShandy]

@stackingsaunter Adding a trailing unit in the user input is difficult with HTML and CSS. I'll try to find a JavaScript trick. Meanwhile, have you considered an alternative design?

[bumi]

I was wondering if an auto-growing input field maybe might work? - to have the unit not as part of the input but after the input.
though avoiding JS would be nice.

[abhiShandy]

I was wondering if an auto-growing input field maybe might work? - to have the unit not as part of the input but after the input. though avoiding JS would be nice.

width: fit-content doesn't work on Chrome at least. Check this Tailwind Playground.

[abhiShandy]

This CSS trick uses <span contenteditable> instead of <input type="number"/>. Is that an acceptable solution?

[stackingsaunter]

@abhiShandy hey are you still working on this?

[abhiShandy]

@abhiShandy hey are you still working on this?

No. I'm not working on this.

[bumi]

maybe we start without 2 - and just do the fiat - sat switch first?

[stackingsaunter]

@bumi you mean add a button somewhere?

[ffrediani]

This is indeed very well missed feature. Being able to see the equivalent fiat amount when entering the amount of sats in a new invoice is very useful thing to have. Remember to add somewhere an option to choose the available fiat to be the default used.