History: Ark glyph in the row circle (no text chip); real Bitcoin logo

Off-chain Ark rows (arkHistoryItem) showed an arrow + a redundant 'Ark'
text chip; now the Ark mark sits in the direction-colored circle and
the chip is gone — the label + signed amount carry direction. The
detail header gets the badge instead of the chip. And the receive
selector's Bitcoin option uses coinos's real bitcoin.svg (orange disc +
tilted white B) instead of a bare ₿ character.

Co-Authored-By: Claude Fable 5 <[email protected]>

3 files changed, 12 insertions, 4 deletions

diff --git a/src/app.js b/src/app.js
index 74fcb82..2b25381 100644
--- a/src/app.js
+++ b/src/app.js
@@ -19,6 +19,7 @@ import {
   timeAgo,
   SATS,
   ARK_ICON,
+  BITCOIN_ICON,
 } from './format.js';
 
 const wallet = new Wallet();
@@ -2057,7 +2058,7 @@ function receiveTab() {
   let mode = ui.receiveType || 'address';
   if (mode !== 'address' && !featModes.some((m) => m.id === mode)) mode = 'address';
   const opts = [
-    { id: 'address', label: t('receiveAddressTab'), icon: '₿' },
+    { id: 'address', label: t('receiveAddressTab'), icon: BITCOIN_ICON(20) },
     ...featModes.map((m) => ({ id: m.id, label: m.label, icon: m.icon })),
   ];
   const seg = opts.length > 1
diff --git a/src/features/ark.js b/src/features/ark.js
index 5f64b21..92b248a 100644
--- a/src/features/ark.js
+++ b/src/features/ark.js
@@ -269,11 +269,12 @@ export function arkFeature(ctx) {
     return h(
       'div',
       { class: 'item', style: 'cursor:pointer', onClick: () => { ui.arkMoveDetail = m.id; render(); } },
-      h('div', { class: `ico ${incoming ? 'in' : 'out'}` }, incoming ? '↓' : '↑'),
+      // Ark mark in the (direction-colored) circle carries the rail; the label
+      // + signed amount carry direction, so no redundant "Ark" text chip.
+      h('div', { class: `ico ${incoming ? 'in' : 'out'}`, html: ARK_MARK(15) }),
       h('div', { class: 'grow' },
         h('div', { class: 'row gap6' },
           label,
-          h('span', { class: 'tag' }, 'Ark'),
           m.status !== 'complete' ? h('span', { class: 'tag pending' }, m.status) : null),
         h('div', { class: 'small faint' }, timeAgo(m.ts / 1000))),
       h('div', { style: 'text-align:right' },
@@ -292,8 +293,8 @@ export function arkFeature(ctx) {
       'div',
       { class: 'card col', style: 'gap:10px' },
       h('div', { class: 'row gap6', style: 'align-items:center' },
+        h('span', { html: ARK_ICON(18) }),
         h('h3', { style: 'margin:0' }, label),
-        h('span', { class: 'tag' }, 'Ark'),
         m.status !== 'complete' ? h('span', { class: 'tag pending' }, m.status) : null),
       h('div', { class: incoming ? 'amount-pos' : 'amount-neg', style: 'font-size:20px' },
         (incoming ? '+' : '-') + fmtAmount(m.amountSat) + ' ' + unitLabel()),
diff --git a/src/format.js b/src/format.js
index 56f2b82..b553f5c 100644
--- a/src/format.js
+++ b/src/format.js
@@ -13,6 +13,12 @@ export const ARK_MARK = (px = 16) =>
 export const ARK_ICON = (px = 16) =>
   `<svg width="${px}" height="${px}" viewBox="0 0 400 400" style="display:inline-block;vertical-align:-3px"><rect width="400" height="400" rx="92" fill="#00090C"/><path fill="#fff" fill-rule="evenodd" transform="translate(37 34) scale(0.82)" d="${ARK_PATH}"/></svg>`;
 
+// The Bitcoin logo — coinos's bitcoin.svg (orange disc + tilted white ₿).
+const BTC_DISC = 'm63.033,39.744c-4.274,17.143-21.637,27.576-38.782,23.301-17.138-4.274-27.571-21.638-23.295-38.78,4.272-17.145,21.635-27.579,38.775-23.305,17.144,4.274,27.576,21.64,23.302,38.784z';
+const BTC_B = 'm46.103,27.444c0.637-4.258-2.605-6.547-7.038-8.074l1.438-5.768-3.511-0.875-1.4,5.616c-0.923-0.23-1.871-0.447-2.813-0.662l1.41-5.653-3.509-0.875-1.439,5.766c-0.764-0.174-1.514-0.346-2.242-0.527l0.004-0.018-4.842-1.209-0.934,3.75s2.605,0.597,2.55,0.634c1.422,0.355,1.679,1.296,1.636,2.042l-1.638,6.571c0.098,0.025,0.225,0.061,0.365,0.117-0.117-0.029-0.242-0.061-0.371-0.092l-2.296,9.205c-0.174,0.432-0.615,1.08-1.609,0.834,0.035,0.051-2.552-0.637-2.552-0.637l-1.743,4.019,4.569,1.139c0.85,0.213,1.683,0.436,2.503,0.646l-1.453,5.834,3.507,0.875,1.439-5.772c0.958,0.26,1.888,0.5,2.798,0.726l-1.434,5.745,3.511,0.875,1.453-5.823c5.987,1.133,10.489,0.676,12.384-4.739,1.527-4.36-0.076-6.875-3.226-8.515,2.294-0.529,4.022-2.038,4.483-5.155zm-8.022,11.249c-1.085,4.36-8.426,2.003-10.806,1.412l1.928-7.729c2.38,0.594,10.012,1.77,8.878,6.317zm1.086-11.312c-0.99,3.966-7.1,1.951-9.082,1.457l1.748-7.01c1.982,0.494,8.365,1.416,7.334,5.553z';
+export const BITCOIN_ICON = (px = 16) =>
+  `<svg width="${px}" height="${px}" viewBox="0 0 64 64" style="display:inline-block;vertical-align:-3px"><path fill="#f7931a" d="${BTC_DISC}"/><path fill="#fff" d="${BTC_B}"/></svg>`;
+
 export function btc(sats) {
   return (Number(sats) / SATS).toFixed(8);
 }