From 45a4a9d5cec8eafc7e98ebd7ca2a9790c0ee94b4 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Mon, 6 Jul 2026 08:09:57 -0700
Subject: Icons in the receive selector and on silent-payment history rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The receive address-type picker was a native <select>, which can't
render SVG in <option>s. Replace it with a lightweight custom dropdown
(icon-select) that shows a glyph per rail — ₿ Bitcoin, ⚡ Lightning,
the Second mark for Ark, 🕶️ Silent payment — closing on select or an
outside tap. Receive modes gained an icon field; the address option is
built in app.js. Silent-payment receipts (which merge into history as
on-chain-looking rows) now get a rail glyph + SP tag via a
decorateTxRow so they're distinguishable, matching how ark/gift rows
already decorate.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/features/ark.js   | 2 +-
 src/features/sp.js    | 9 ++++++++-
 src/features/swaps.js | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'src/features')

diff --git a/src/features/ark.js b/src/features/ark.js
index 6cafe35..5f64b21 100644
--- a/src/features/ark.js
+++ b/src/features/ark.js
@@ -979,7 +979,7 @@ export function arkFeature(ctx) {
     stop() { stopArk(); },
     receiveModes() {
       if (!arkAvailable()) return [];
-      return [{ id: 'ark', label: t('receiveArkTab'), render: (seg) => arkReceivePane(seg) }];
+      return [{ id: 'ark', label: t('receiveArkTab'), icon: ARK_MARK(18), render: (seg) => arkReceivePane(seg) }];
     },
     receiveTakeover() {
       const offboarded = arkOffboardedScreen();
diff --git a/src/features/sp.js b/src/features/sp.js
index 5c55457..92f091f 100644
--- a/src/features/sp.js
+++ b/src/features/sp.js
@@ -42,7 +42,7 @@ export function spFeature(ctx) {
       const spAddr = wallet.silentPaymentsAvailable && wallet.silentPaymentsAvailable() ? wallet.silentPaymentAddress() : null;
       if (!spAddr) return [];
       return [{
-        id: 'sp', label: t('receiveSpTab'),
+        id: 'sp', label: t('receiveSpTab'), icon: '🕶️',
         render: (seg) => h(
           'div',
           { class: 'card col', style: 'align-items:center;gap:14px' },
@@ -54,6 +54,13 @@ export function spFeature(ctx) {
       }];
     },
     isSendDest(a) { return isSilentPaymentAddress(a); },
+    // Silent-payment receipts merge into the main history as on-chain-looking
+    // rows (tx.sp) — give them a rail glyph + tag so they're recognizable.
+    decorateTxRow(tx) {
+      return tx && tx.sp
+        ? { icon: '🕶️', label: h('span', {}, t('received'), ' ', h('span', { class: 'tag' }, t('receiveSpTab'))) }
+        : null;
+    },
     settingsCards() { return [spIndexerCard()]; },
   };
 }
diff --git a/src/features/swaps.js b/src/features/swaps.js
index b41b87a..2ff43ed 100644
--- a/src/features/swaps.js
+++ b/src/features/swaps.js
@@ -186,7 +186,7 @@ export function swapsFeature(ctx) {
       // a reverse swap needs our keys to claim on-chain
       if (wallet.watchOnly) return [];
       return [{
-        id: 'ln', label: t('receiveLnTab'),
+        id: 'ln', label: t('receiveLnTab'), icon: '⚡',
         render: (seg) => h('div', { class: 'card col', style: 'align-items:center;gap:14px' }, seg, ...lnReceiveContent()),
       }];
     },
-- 
cgit v1.2.3