Icons in the receive selector and on silent-payment history rows

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 <[email protected]>

3 files changed, 10 insertions, 3 deletions

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()),
       }];
     },