From 8ca1a4385cabeaa378bfaaf51f31945d754c95e8 Mon Sep 17 00:00:00 2001
From: Caio Costa <costa.caiof@gmail.com>
Date: Sat, 1 Feb 2025 02:46:08 -0300
Subject: [PATCH 1/3] feat: Add labels to denomination buttons

Add labels as a way of "teaching" the users what each denomination
symbol means.
---
 src/components/settings/Denomination.tsx | 36 ++++++++++++-
 src/style/index.scss                     | 66 ++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 2 deletions(-)

diff --git a/src/components/settings/Denomination.tsx b/src/components/settings/Denomination.tsx
index e057e77e..b4dea35a 100644
--- a/src/components/settings/Denomination.tsx
+++ b/src/components/settings/Denomination.tsx
@@ -1,7 +1,9 @@
 import btcSvg from "../../assets/btc.svg";
 import satSvg from "../../assets/sat.svg";
+import { BTC } from "../../consts/Assets";
 import { Denomination as Denoms } from "../../consts/Enums";
 import { useGlobalContext } from "../../context/Global";
+import { formatDenomination } from "../../utils/denomination";
 
 const Denomination = () => {
     const { denomination, setDenomination, t } = useGlobalContext();
@@ -12,9 +14,32 @@ const Denomination = () => {
         );
     };
 
-    return (
+    const Desktop = () => (
+        <div class="denomination-desktop" title={t("denomination_tooltip")}>
+            <button
+                data-testid="btc-denomination-button"
+                class={denomination() == Denoms.Btc ? "active" : ""}
+                onClick={() => setDenomination(Denoms.Btc)}>
+                <span class="denominator" data-denominator={Denoms.Btc} />
+                <span class="denominator-label">
+                    {formatDenomination(Denoms.Btc, BTC)}
+                </span>
+            </button>
+            <button
+                data-testid="sats-denomination-button"
+                class={denomination() == Denoms.Sat ? "active" : ""}
+                onClick={() => setDenomination(Denoms.Sat)}>
+                <span class="denominator" data-denominator={Denoms.Sat} />
+                <span class="denominator-label">
+                    {formatDenomination(Denoms.Sat, Denoms.Sat)}
+                </span>
+            </button>
+        </div>
+    );
+
+    const Mobile = () => (
         <div
-            class="denomination toggle"
+            class="denomination-mobile denomination toggle"
             title={t("denomination_tooltip")}
             onClick={toggleDenomination}>
             <img
@@ -29,6 +54,13 @@ const Denomination = () => {
             />
         </div>
     );
+
+    return (
+        <>
+            <Mobile />
+            <Desktop />
+        </>
+    );
 };
 
 export default Denomination;
diff --git a/src/style/index.scss b/src/style/index.scss
index 140bcab1..2b05f051 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -383,6 +383,72 @@ textarea {
         border: 1px solid rgba(255, 255, 255, 0.25);
     }
 }
+.denomination-desktop {
+    display: flex;
+    max-width: max-content;
+    flex-grow: 0;
+    gap: 1px;
+    padding: 2px;
+    height: fit-content;
+    border: 1px dashed rgba(255, 255, 255, 0.2);
+    background: rgb(11, 22, 34);
+    border-radius: 20px;
+    span {
+        filter: grayscale(1);
+    }
+    button {
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        flex-grow: 0;
+        gap: 10px;
+        padding: 0.3rem 0.9rem;
+        background: rgb(11, 22, 34);
+        color: rgba(255, 255, 255, 0.5);
+        cursor: pointer;
+        position: relative;
+        box-sizing: border-box;
+        border: 1px solid transparent; // ensures the button is always the same size
+        &:first-child {
+            border-radius: 20px 0 0 20px;
+        }
+        &:last-child {
+            border-radius: 0 20px 20px 0;
+        }
+        &:hover {
+            background: rgb(20, 40, 63);
+            color: rgba(255, 255, 255, 0.8);
+            border: 1px dashed rgba(255, 175, 75, 0.15);
+        }
+        &.active {
+            color: vars.$primary;
+            background-color: rgb(30, 45, 60);
+            border: 1px dashed rgba(255, 175, 75, 0.2);
+            span {
+                filter: none;
+            }
+        }
+        // for keyboard navigation
+        &:focus-visible {
+            outline: none;
+            border: 1px solid vars.$primary;
+        }
+        &.active:focus-visible {
+            outline: none;
+            border: 1px solid vars.$primary;
+        }
+    }
+}
+@media (max-width: 488px) {
+    .denomination-desktop {
+        display: none;
+    }
+}
+@media (min-width: 489px) {
+    .denomination-mobile {
+        display: none;
+    }
+}
 .denomination img {
     filter: brightness(10);
     cursor: pointer;

From fd9ed22a298a500f73fb2a2f75cb2b43fc31b53a Mon Sep 17 00:00:00 2001
From: Caio Costa <costa.caiof@gmail.com>
Date: Tue, 28 Jan 2025 22:48:51 -0300
Subject: [PATCH 2/3] test: Denomination buttons should update global context

---
 tests/components/Denomination.spec.tsx | 37 ++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 tests/components/Denomination.spec.tsx

diff --git a/tests/components/Denomination.spec.tsx b/tests/components/Denomination.spec.tsx
new file mode 100644
index 00000000..8db7c5ff
--- /dev/null
+++ b/tests/components/Denomination.spec.tsx
@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from "@solidjs/testing-library";
+
+import Denomination from "../../src/components/settings/Denomination";
+import { TestComponent, contextWrapper, globalSignals } from "../helper";
+
+describe("Denomination", () => {
+    test("should change denomination on button click", async () => {
+        render(
+            () => (
+                <>
+                    <TestComponent />
+                    <Denomination />
+                </>
+            ),
+            {
+                wrapper: contextWrapper,
+            },
+        );
+
+        const btcDenomination = (await screen.findByTestId(
+            "btc-denomination-button",
+        )) as HTMLDivElement;
+        const satsDenomination = (await screen.findByTestId(
+            "sats-denomination-button",
+        )) as HTMLDivElement;
+
+        expect(btcDenomination.classList.contains("active")).toBeFalsy();
+        expect(satsDenomination.classList.contains("active")).toBeTruthy();
+        expect(globalSignals.denomination()).toEqual("sat");
+
+        fireEvent.click(btcDenomination);
+
+        expect(btcDenomination.classList.contains("active")).toBeTruthy();
+        expect(satsDenomination.classList.contains("active")).toBeFalsy();
+        expect(globalSignals.denomination()).toEqual("btc");
+    });
+});

From a5ed3602dd1647ebd7398e734b3686cb7af5ce77 Mon Sep 17 00:00:00 2001
From: Caio Costa <costa.caiof@gmail.com>
Date: Tue, 28 Jan 2025 22:53:17 -0300
Subject: [PATCH 3/3] feat: Change swap buttons' hover color for more
 consistency

---
 src/style/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/style/index.scss b/src/style/index.scss
index 2b05f051..025b3194 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -90,7 +90,7 @@ hr.spacer {
     left: 10px;
     cursor: pointer;
     &:hover {
-        background-color: rgba(255, 255, 255, 0.25);
+        background: rgb(20, 40, 63);
     }
 }