From 7472a9662475c634d32300c2dab514b04b74e70f Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Wed, 11 Mar 2026 22:23:59 -0700
Subject: fee rate ui

---
 src/routes/(app)/payment/[id]/+page.svelte         |  6 +++---
 .../[address]/[amount]/[...feeRate]/+page.svelte   | 22 +++++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index ff5cc9ef..8ba33c02 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -69,7 +69,7 @@
     bumpTargetRate = targetRate;
     bumpError = "";
     try {
-      bumpEstimate = await post(`/payment/${id}/bump-estimate`, { id, targetFeeRate: targetRate });
+      bumpEstimate = await post("/bump/estimate", { id, targetFeeRate: targetRate });
     } catch (e: any) {
       bumpError = e.message;
     }
@@ -80,7 +80,7 @@
     bumpEstimate = null;
     bumpError = "";
     try {
-      const est = await post(`/payment/${id}/bump-estimate`, { id, targetFeeRate: 10 });
+      const est = await post("/bump/estimate", { id, targetFeeRate: 10 });
       bumpEstimate = est;
       bumpTargetRate = est.fees?.fastestFee || 10;
       await fetchEstimate(bumpTargetRate);
@@ -93,7 +93,7 @@
     bumpLoading = true;
     bumpError = "";
     try {
-      const res = await post(`/payment/${id}/bump`, { id, targetFeeRate: bumpTargetRate });
+      const res = await post("/bump", { id, targetFeeRate: bumpTargetRate });
       p.childTxid = res.txid;
       p.bumpedFee = res.childFee;
       showBump = false;
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
index d5a8f6e5..022abea1 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -169,7 +169,7 @@
   let lowRate = $derived(fees ? 0.1 : 0.1);
   let midRate = $derived(fees ? fees.hourFee : 1);
   let highRate = $derived(fees ? Math.max(fees.fastestFee, 8) : 10);
-  let maxRate = $derived(Math.max(highRate * 2, 16));
+  let maxRate = $derived(highRate);
 
   let sliderValue = $state(50);
 
@@ -229,18 +229,26 @@
 
     {#if fees}
       <div class="text-center space-y-2">
-        <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2>
+        <h2 class="text-secondary text-lg">{$t("payments.feeRate")}</h2>
 
         <div class="px-2">
-          <Slider bind:value={sliderValue} handle={handleSlide} min={0} max={100} />
+          <div class="relative">
+            <Slider bind:value={sliderValue} handle={handleSlide} min={0} max={100} />
+            <div class="absolute inset-0 pointer-events-none">
+              <span
+                class="absolute top-1/2 -translate-y-1/2 text-sm font-semibold whitespace-nowrap"
+                style="left: calc({sliderValue}% + 20px)"
+              >{feeRate} sat/vB</span>
+            </div>
+          </div>
           <div class="flex justify-between text-secondary mt-1 px-1">
-            <span>{lowRate} sat/vB</span>
-            <span>{midRate} sat/vB</span>
-            <span>{highRate} sat/vB</span>
+            <span>{$t("payments.slow")}</span>
+            <span>{$t("payments.medium")}</span>
+            <span>{$t("payments.fast")}</span>
           </div>
         </div>
 
-        <div class="text-lg">{feeRate} sat/vB</div>
+        <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2>
         {#if feeLoading}
           <Spinner class="text-secondary" />
         {:else}
-- 
cgit v1.2.3