diff options
| -rw-r--r-- | src/app.js | 3 | ||||
| -rw-r--r-- | src/features/ark.js | 12 | ||||
| -rw-r--r-- | src/format.js | 10 | ||||
| -rw-r--r-- | src/i18n.js | 2 |
4 files changed, 19 insertions, 8 deletions
@@ -18,6 +18,7 @@ import { shortTxid, timeAgo, SATS, + ARK_ICON, } from './format.js'; const wallet = new Wallet(); @@ -510,7 +511,7 @@ function howItWorksScreen() { h('h3', {}, '⚡ ' + t('hiwLnTitle')), para('hiwLn1')), h('div', { class: 'card col', style: 'gap:14px' }, - h('h3', {}, '⚔ ' + t('hiwArkTitle')), + h('h3', { class: 'row gap6', style: 'align-items:center' }, h('span', { html: ARK_ICON(18) }), t('hiwArkTitle')), para('hiwArk1'), para('hiwArk2'), para('hiwArk3')), diff --git a/src/features/ark.js b/src/features/ark.js index 961b1a0..db7debb 100644 --- a/src/features/ark.js +++ b/src/features/ark.js @@ -14,7 +14,7 @@ import { utxoId } from '../wallet.js'; import { getNetwork, setNetwork, arkPresets, getArkProviderId, setArkProviderId, getArkCustom, setArkCustom, getArkConfig } from '../api.js'; import { t } from '../i18n.js'; import { qrSvg } from '../qr.js'; -import { shortAddr, shortTxid, timeAgo } from '../format.js'; +import { shortAddr, shortTxid, timeAgo, ARK_ICON, ARK_MARK } from '../format.js'; // t?ark1… bech32m — an Ark address for this or another ASP. export function isArkAddress(a) { return /^t?ark1[a-z0-9]{20,}$/i.test((a || '').trim()); } @@ -326,7 +326,7 @@ export function arkFeature(ctx) { render(); }; const head = [ - h('h3', {}, '⚔ Ark'), + h('h3', { class: 'row gap6', style: 'align-items:center' }, h('span', { html: ARK_ICON(18) }), 'Ark'), h('p', { class: 'small muted', style: 'margin:0' }, t('arkDesc')), h('select', { onChange: (e) => applyProvider(e.target.value) }, presets.map((p) => h('option', { value: p.id, selected: p.id === id }, p.label))), @@ -1051,12 +1051,12 @@ export function arkFeature(ctx) { if (!ark || !ark.state) return null; if (tx.net < 0) { const a = ark.state.actions.find((x) => x.type === 'board' && x.fundingTxid === tx.txid); - return a ? { icon: '⚔', label: h('span', {}, t('arkBoardHistory')) } : null; + return a ? { icon: h('span', { html: ARK_MARK(16) }), label: h('span', {}, t('arkBoardHistory')) } : null; } const o = ark.state.actions.find((x) => x.type === 'offboard' && x.txid === tx.txid); - if (o) return { icon: '⚔', label: h('span', {}, t('arkOffboardHistory')) }; + if (o) return { icon: h('span', { html: ARK_MARK(16) }), label: h('span', {}, t('arkOffboardHistory')) }; const e = ark.state.actions.find((x) => x.type === 'exit' && x.claimTxid === tx.txid); - return e ? { icon: '⚔', label: h('span', {}, t('arkExitHistory')) } : null; + return e ? { icon: h('span', { html: ARK_MARK(16) }), label: h('span', {}, t('arkExitHistory')) } : null; }, txDetailSection(tx) { if (!ark || !ark.state) return null; @@ -1064,7 +1064,7 @@ export function arkFeature(ctx) { if (!a) return null; const done = a.step === 'done'; return h('div', { class: 'summary col', style: 'gap:0' }, - h('div', { style: 'font-weight:600;margin:12px 0 2px' }, '⚔ ' + t('arkBoardHistory')), + h('div', { class: 'row gap6', style: 'font-weight:600;margin:12px 0 2px;align-items:center' }, h('span', { html: ARK_ICON(16) }), t('arkBoardHistory')), h('div', { class: 'line' }, h('span', { class: 'k' }, t('arkBalance')), h('span', { class: 'v' }, '+' + fmtAmount(a.amountSat - a.feeSat) + ' ' + unitLabel())), diff --git a/src/format.js b/src/format.js index 6191033..56f2b82 100644 --- a/src/format.js +++ b/src/format.js @@ -3,6 +3,16 @@ export const SATS = 100_000_000; +// The Ark mark — Second's logo (second.tech): a triangle with an inner cutout +// (evenodd). ARK_MARK is the bare glyph in currentColor (sits inline like an +// emoji, themes automatically); ARK_ICON is the app-badge treatment (dark +// rounded square + white mark) for card headers. +const ARK_PATH = 'M218.4 50.9c-8.4-14.5-29.4-14.5-37.7 0L20.9 327.6c-8.4 14.5 2.1 32.7 18.9 32.7h319.5c16.8 0 27.3-18.2 18.9-32.7L218.4 50.9ZM73.9 305.5c-5.1 9.1 3.7 19.7 13.5 16.4l134.8-45.3c6.8-2.3 9.8-10.2 6.2-16.5l-55.3-95.8c-4.4-7.6-15.4-7.6-19.7.1L73.9 305.5Z'; +export const ARK_MARK = (px = 16) => + `<svg width="${px}" height="${px}" viewBox="0 0 400 400" style="display:inline-block;vertical-align:-2px"><path fill="currentColor" fill-rule="evenodd" d="${ARK_PATH}"/></svg>`; +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>`; + export function btc(sats) { return (Number(sats) / SATS).toFixed(8); } diff --git a/src/i18n.js b/src/i18n.js index cfaf187..ea89e91 100644 --- a/src/i18n.js +++ b/src/i18n.js @@ -390,7 +390,7 @@ const STR = { arkRefreshBtn: 'Refresh / consolidate {n} coin(s)', arkOffboardBtn: 'Move {n} back on-chain', giftSourceChain: 'On-chain', - giftSourceArk: '⚔ Ark', + giftSourceArk: 'Ark', giftArkNote: 'Sent from your Ark balance — the link claims instantly, off-chain, with no fee.', giftArkOutstanding: '{n} unclaimed Ark gift(s)', giftArkRevoked: 'Gift swept back to your Ark balance.', |