feat: denomination toggle (#398)

src/components/Fees.jsx

@@ -2,7 +2,7 @@ import { Show, createEffect } from "solid-js";
 
 import btcSvg from "../assets/btc.svg";
 import satSvg from "../assets/sat.svg";
-import { fetchPairs, isMobile } from "../helper";
+import { fetchPairs } from "../helper";
 import t from "../i18n";
 import {
     asset,
@@ -22,7 +22,7 @@ import {
     calculateBoltzFeeOnSend,
     calculateSendAmount,
 } from "../utils/calculate";
-import { formatAmount } from "../utils/denomination";
+import { denominations, formatAmount } from "../utils/denomination";
 
 const Fees = () => {
     createEffect(() => {
@@ -49,23 +49,26 @@ const Fees = () => {
         }
     });
 
+    const toggleDenomination = () => {
+        setDenomination(
+            denomination() === denominations.btc
+                ? denominations.sat
+                : denominations.btc,
+        );
+    };
+
     fetchPairs();
 
     return (
         <div class="fees-dyn">
-            <div class="denomination">
-                <Show when={!isMobile}>
-                    <label>{t("denomination")}: </label>
-                </Show>
+            <div class="denomination" onClick={() => toggleDenomination()}>
                 <img
                     src={btcSvg}
-                    onClick={() => setDenomination("btc")}
                     class={denomination() == "btc" ? "active" : ""}
                     alt="denominator"
                 />
                 <img
                     src={satSvg}
-                    onClick={() => setDenomination("sat")}
                     class={denomination() == "sat" ? "active" : ""}
                     alt="denominator"
                 />

src/style/index.scss

@@ -92,10 +92,6 @@ hr.spacer {
     padding-right: 8px;
 }
 
-.denomination {
-    margin-left: 5px;
-}
-
 .fees-dyn {
     display: flex;
     justify-content: center;
@@ -360,8 +356,25 @@ textarea {
     background-image: url(../assets/sat.svg);
 }
 
+.denomination > :first-child {
+    margin-right: 5px;
+}
+.denomination {
+    cursor: pointer;
+    flex-grow: 0;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 18px;
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+    padding: 0 5px;
+    &:hover {
+        background: rgb(20, 40, 63);
+    }
+}
 .denomination .active {
     filter: none;
+    border-radius: 50%;
+    background-color: rgb(23, 34, 46);
+    border: 1px solid rgba(255, 255, 255, 0.25);
 }
 
 .hidden {