Make fiat currency configurable and display amounts additionally in fiat

bumi commented 2 years ago

Additionally to the satoshi amounts we should show fiat amounts for the not-yet hyper-bitcoinized users.

The favorit currency should be configurable and additional to the satoshi amounts we should convert the amount to fiat.

mmalisani commented 2 years ago

how about something like this? https://www.figma.com/file/fFj8yLtRu8VMp8RUsW03Dy/Alby-Suggestions--By-Mariano-Malisani?node-id=200%3A41

escapedcat commented 2 years ago

how about something like this?

You think people will switch this a lot or could it be under settings?

bumi commented 2 years ago

@mmalisani thanks for the proposal. we fist should add this to the extension before we add it to the getalby.com webapp. And @escapedcat I agree, having a setting for this is good - will not often change.

lightningxbtc commented 2 years ago

I'd like to take this ticket and bounty on. Is the thinking something like this? A select option next to the input that allows the user to toggle the value display and then on creation of the invoice the value gets converted back to sats?

Or is the thinking more of a global toggle thats changes all values in the alby app? @bumi @escapedcat

escapedcat commented 2 years ago

I'd like to take this ticket and bounty on.

Awesome!

Is the thinking something like this? A select option next to the input that allows the user to toggle the value display and then on creation of the invoice the value gets converted back to sats? Or is the thinking more of a global toggle thats changes all values in the alby app?

I think it's the second option. That's how I understood bumi:

I agree, having a setting for this is good - will not often change.

lightningxbtc commented 2 years ago

Thanks!

How many currencies should it support? Just the "main" ones, or as many as possible? And any preferences on where I acquire currency exchange info from?

bitcoinuser commented 2 years ago

Thanks!

How many currencies should it support? Just the "main" ones, or as many as possible? And any preferences on where I acquire currency exchange info from?

I think should support as many as possible. Breez app use https://yadio.io/ and is great.

bitcoinuser commented 2 years ago

See Breez:

Screenshot_2022-05-08-08-00-44-182_com breez client

Screenshot_2022-05-08-08-00-27-648_com breez client

diana0xUX commented 2 years ago

Taking into account everything that was written I've made the designs to reflect the Fiat values.

I’ve taken the cases where the user interacts with the values and needs the Fiat reference. Made adjustments to reflect fiat values. Feel free to review, leave feedback or ask questions.

Figma Link

Take a look, there is V1 and V2 in some cases. One case is if we allow the user to input fiat values and another case is when we only reference values in fiat. Looking forward to your comments :speech_balloon:

bumi commented 2 years ago

yeah! super cool @lightningxbtc 🚀

as the preferred fiat currency will not change much I thought it's best to save it in the settings. maybe we can also keep the source for the exchange rates rather flexible that we in the future can even allow the user to choose their source?

When displaying the amounts I think only one other currency is enough, meaning we show sats and the selected fiat currency.

besides the UI topics I think it's important to check how we handle the currency data. Right now our amounts are often represented as strings (we also don't do any calculations with it). Is there something like the Ruby money gem in JS? Which allows us to have some "object" that knows about the amount and currency and has functionality to convert to other currencies? What's the best way to handle this in the most universal way?

looking forward to get this is, as this is a highly requested feature

escapedcat commented 2 years ago

So far we only use simple native selects I believe.

No need to style it in this way.

lightningxbtc commented 2 years ago

Is there something like the Ruby money gem in JS? Which allows us to have some "object" that knows about the amount and currency and has functionality to convert to other currencies?

there is https://openexchangerates.github.io/money.js/

bumi commented 2 years ago

maybe we can start with a native dropdown? (should be much easier to develop)

@lightningxbtc what do you think about money.js?

dylancom commented 2 years ago

https://github.com/dinerojs/dinero.js might be interesting.

escapedcat commented 2 years ago

moneyjs seems unmaintained (last release 7 years ago?)
dineros last release was an alpha sometime last year
currency.js seems maintained but is not yet full TS

I guess we should have a closer look at dinero and currency? What else is out there?

diana0xUX commented 2 years ago

native selects

No need for the custom design dropdown. 👍🏻 I've edited the design file to reflect the native dropdown.

diana0xUX commented 2 years ago

In terms of function, I've made 2 versions. Version 1 - Only reflects Fiat value Version 2 - The switcher between SATS and FIAT values in inputs (like in Phantom).

The ticker requested "to display amounts". I've added a switcher between values as an option 2. Do you think adding the switcher will be an easy update or we should keep it till further updates?

escapedcat commented 2 years ago

If version 1, should the "Budget" label be updated to include "SATS"? It might be obvious that the amount will always be input as SATS but maybe not for everyone?

diana0xUX commented 2 years ago

Good point, I've updated values to reflect SATS.

lightningxbtc commented 2 years ago

I think the native drop downs (Selects) should be fine, are are styled components already in the setting that use them like the theme picker. Only thing with using native select is lack of search so might be a bit of scrolling to find your currency.

On Thu, May 12, 2022, at 2:22 PM, Michael Bumann wrote:

maybe we can start with a native dropdown? (should be much easier to develop)

@lightningxbtc https://github.com/lightningxbtc what do you think about money.js?

— Reply to this email directly, view it on GitHub https://github.com/getAlby/lightning-browser-extension/issues/597#issuecomment-1124575822, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZAIWG4VHXD3KGAJC5DF3FDVJSPSFANCNFSM5N6DOUJA. You are receiving this because you were mentioned.Message ID: @.***>

escapedcat commented 2 years ago

Only thing with using native select is lack of search so might be a bit of scrolling to find your currency.

Good point. Let's keep this in mind for i.e. a second iteration. Could be an autocomplete or something similar depending on how this feature will be accepted/used by the users.

dylancom commented 2 years ago

I prefer to keep the currency next to the entered amount (v1), where in v2 I think SATS looks out of placement. From v2 I like it though that the USD amount is directly placed below the sats amount. (instead of left - right).

The USD amount could potentially be also placed directly into the input like for e.g. in MetaMask:

diana0xUX commented 2 years ago

The USD amount could potentially be also placed directly into the input like for e.g. in MetaMask:

I tried the MetaMask field, and it does seem very intuitive and takes up less space. I think it's the best choice at this point.

If everyone agrees, here's a link to a file that has all the amendments discussed earlier.

Figma link Switch icon.zip

https://user-images.githubusercontent.com/35034985/168803724-75a721ff-50c9-472e-8f16-3691afde49ae.mov

https://user-images.githubusercontent.com/35034985/168803733-578652a5-d36e-4ca7-ab7c-413efa8032ee.mov

https://user-images.githubusercontent.com/35034985/168803738-db5fb85e-8b49-4d19-a47a-1f0aa7bf75da.mov

bumi commented 2 years ago

looks good to me. great. can this be a universal react component that then takes care of everything?

diana0xUX commented 2 years ago

looks good to me. great. can this be a universal react component that then takes care of everything?

This is definitely possible and desirable. Is there a repository of our components somewhere in react?

escapedcat commented 2 years ago

Is there a repository of our components somewhere in react?

atm we have the Storybook setup: https://lbe-stories.netlify.app
This might not cover all existing components though

diana0xUX commented 2 years ago

Based on the previous feedback, here is the video of the prototype of the Input field where users can switch between the Fiat and SATS by pressing on the switch icon on the right of the field.

I've made a small interaction design where states change when hovering over the icon and it becomes tint smaller on the press.