Versie 0.3.3

client/pages/conversion-bitcoin.js

@@ -1,9 +1,10 @@
-// Generated, do not edit. sha256:1c9c0ff79637180d3780a7e1dd1e59dbb03533899d9a66468c9cdf709d9ee0fe
+// Generated, do not edit. sha256:29c2ecea7f7203cf2a789f574d5f90a158b4c2ec943bae44c680cc1e970776b5
 import { t, localeTag } from '../i18n/index.js';
 import { listAssets } from '../data/assets.js';
 import { liveSpotFor, basePriceOf } from '../price/providers.js';
 import { fmtMoney, fmtInt, currencySymbol, currencyName, parseLocaleNumber } from '../ui/format.js';
 import { baseCurrency } from '../app-settings.js';
+import { setPageHint } from '../ui/page-hint.js';
 
 const TO_BTC = { btc: 1, mbtc: 1e-3, bit: 1e-6, sat: 1e-8, msat: 1e-11 };
 const UNITS = ['fiat', 'btc', 'mbtc', 'bit', 'sat', 'msat'];
@@ -28,35 +29,27 @@ function formatUnit(unit, value) {
 export async function render(el) {
   const n = fmtInt;
   el.innerHTML = `
-
-    <div class="card price-hero">
-      <div>
+    <div class="card conv-card">
+      <div class="conv-head">
         <div class="t-label price-label">${t('conversion.btcRate')}</div>
         <div class="t-value price-val" id="price-display">€ -</div>
         <div class="price-meta" id="price-meta">${t('conversion.loading')}</div>
       </div>
-    </div>
-
-    <div class="conv-grid">
-      ${field('fiat', t('conversion.fiat'), '€ EUR', t('conversion.fiatHint'), true)}
-      ${field('btc', 'Bitcoin', '₿ BTC', t('conversion.btcHint'))}
-      ${field('mbtc', 'Millibitcoin', 'mBTC', `1 BTC = ${n(1e3)} mBTC`)}
-      ${field('bit', 'Bit (µBTC)', 'bit', `1 BTC = ${n(1e6)} bits`)}
-      ${field('sat', 'Satoshi', 'sat', `1 BTC = ${n(1e8)} sats`)}
-      ${field('msat', 'Millisatoshi', 'msat', `1 sat = ${n(1e3)} msats · Lightning`)}
-    </div>
-
-    <div class="info">
-      <div class="t-label info-title">${t('conversion.hierarchy')}</div>
-      <div class="info-body">
-        <strong>1 BTC</strong> = ${n(1e3)} mBTC = ${n(1e6)} bits = ${n(1e8)} sats = ${n(1e11)} msats<br>
-        <strong>1 mBTC</strong> = ${n(1e3)} bits = ${n(1e5)} sats<br>
-        <strong>1 bit</strong> = 100 sats · <strong>1 sat</strong> = ${n(1e3)} msats
+      <div class="conv-grid">
+        ${field('fiat', t('conversion.fiat'), '€ EUR', t('conversion.fiatHint'), true)}
+        ${field('btc', 'Bitcoin', '₿ BTC', t('conversion.btcHint'))}
+        ${field('mbtc', 'Millibitcoin', 'mBTC', `1 BTC = ${n(1e3)} mBTC`)}
+        ${field('bit', 'Bit (µBTC)', 'bit', `1 BTC = ${n(1e6)} bits`)}
+        ${field('sat', 'Satoshi', 'sat', `1 BTC = ${n(1e8)} sats`)}
+        ${field('msat', 'Millisatoshi', 'msat', `1 sat = ${n(1e3)} msats · Lightning`)}
       </div>
-      <div class="info-note">${t('conversion.satNote')}</div>
-    </div>
-
-    <div class="conv-footer">${t('conversion.footer')}</div>`;
+    </div>`;
+  setPageHint(el, { title: t('conversion.hierarchy'), rows: [
+    `1 BTC = ${n(1e3)} mBTC = ${n(1e6)} bits = ${n(1e8)} sats = ${n(1e11)} msats`,
+    `1 mBTC = ${n(1e3)} bits = ${n(1e5)} sats`,
+    `1 bit = 100 sats · 1 sat = ${n(1e3)} msats`,
+    t('conversion.satNote'),
+  ] });
 
   const q = id => el.querySelector('#' + id);
   const currency = baseCurrency();