Add labels to denomination buttons

[kiocosta]

Add labels to denomination buttons as a way of increasing clarity on the meaning of each symbol.

Screenshots

Desktop / Tablet

Mobile

Aligned items on center to prevent elements from overlapping on small screens

[vercel]

@kiocosta is attempting to deploy a commit to the boltz Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
webapp	✅ Ready (Inspect)	Visit Preview	Feb 1, 2025 6:52am
webapp-mainnet	✅ Ready (Inspect)	Visit Preview	Feb 1, 2025 6:52am

[kilrau]

I like it. Other opinions?

[michael1011]

On desktop it makes sense. Not sure about mobile though

[kilrau]

Hmm it should fit left-aligned even on an iPhone SE screen, could you test and fix that? @kiocosta

[kiocosta]

@kilrau It does fit, but I noticed the sats icon may jump to another line depending on the value inserted, but I will try to come up with a solution other than aligning center

[kiocosta]

@kilrau @michael1011 what about this one?

Mobile

Placed the text on the left with "tabular" style for easier reading and to align with other inputs.

Or perhaps this one?

I think it might also make sense to align it with the page title

Desktop version remains the same from the opening of this PR.

---

Uh oh, I created a regression on the settings menu! Will rework this on the next push.

[kilrau]

Honestly, it's too much like this. It's a subtle config you probably only change once.

Two approaches how to continue for mobile:

1. Stick with symbol only to make things fit
2. Move btc/sats to settings menu

I tend to prefer 1 as on mobile amounts are often typed by hand and the switch is actually important (when pasting the btc/sats switch triggers smartomagically depending on the pasted amount but pasting is more of a desktop thing)

[kiocosta]

Honestly, it's too much like this. It's a subtle config you probably only change once.

Two approaches how to continue for mobile:

1. Stick with symbol only to make things fit
2. Move btc/sats to settings menu

I tend to prefer 1 as on mobile amounts are often typed by hand and the switch is actually important (when pasting the btc/sats switch triggers smartomagically depending on the pasted amount but pasting is more of a desktop thing)

Got it! I have reverted the mobile version to the original toggle and kept the buttons with label for the desktop version.