nimiq-branding-cli 1.0.0 → 1.0.1

package/FEATURES.md

@@ -0,0 +1,113 @@
+# Supporting Features Roadmap
+
+Interactive widgets/flows across Nimiq's apps and sites that this CLI can scaffold as
+ready-made features (beyond single components). Surveyed 2026-06-11 from live sites +
+upstream sources. Full data: `references/supporting-features.json`.
+
+## High priority
+
+### Hub onboarding / connect-wallet (signup, login, choose address)
+- **Where:** https://hub.nimiq.com popup via @nimiq/hub-api — source: upstream/hub/src/views/OnboardingSelector.vue, Signup.vue, Login.vue, ChooseAddress.vue, ConnectAccount.vue
+- **Screenshots:** need it
+- The universal 'Connect with Nimiq' flow every third-party app starts with: OnboardingMenu (create account / login / Ledger), IdenticonSelector avatar picker, ChooseAddress address selector. Composes hub components OnboardingMenu.vue, IdenticonSelector.vue, StatusScreen.vue plus @nimiq/vue-components (SmallPage, PageHeader/Body, AccountSelector). A CLI scaffold = drop-in 'connect wallet' button + callback handling.
+- **Built from:** `hub/src/views/OnboardingSelector.vue`, `hub/src/views/ChooseAddress.vue`, `hub/src/components/OnboardingMenu.vue`, `hub/src/components/IdenticonSelector.vue`, `@nimiq/hub-api`, `@nimiq/vue-components AccountSelector`
+
+### Checkout / payment flow (Hub checkout)
+- **Where:** https://hub.nimiq.com checkout via hub-api; docs at nimiq.github.io/hub — source: upstream/hub/src/views/Checkout.vue + CheckoutTransmission.vue
+- **Screenshots:** need it
+- Multi-currency payment sheet: currency cards (CheckoutCardNimiq/Bitcoin/Ethereum/External), CheckoutManualPaymentDetails (pay-by-address+QR fallback), PaymentInfoLine + Timer from @nimiq/vue-components, CurrencyInfo, StatusScreen success/error. This is THE merchant-facing feature (woocommerce-gateway-nimiq builds on it). CLI scaffold = 'accept NIM/BTC/ETH payment' page with callback verification.
+- **Built from:** `hub/src/views/Checkout.vue`, `hub/src/components/CheckoutCardNimiq.vue`, `hub/src/components/CheckoutCardBitcoin.vue`, `hub/src/components/CheckoutCardEthereum.vue`, `hub/src/components/CheckoutManualPaymentDetails.vue`, `@nimiq/vue-components PaymentInfoLine + Timer + QrCode`
+
+### Cashlink create / manage / claim
+- **Where:** Hub views + wallet entry points — upstream/hub/src/views/CashlinkCreate.vue, CashlinkManage.vue, CashlinkReceive.vue; wallet/src/components/CashlinkButton.vue; github.com/nimiq/cashlink-generator (bulk tool)
+- **Screenshots:** have it (cashlink tx-detail modal in nimiq-branding-skill/screenshots/nimiq-wallet-app/Screenshot 2026-03-13 at 9.42.56 PM.png; create/claim screens still needed)
+- Signature Nimiq feature: send NIM via shareable link, no recipient address needed. Create flow (amount + message + fee), manage (copy/share/cancel link), receive/claim flow with CashlinkSparkle celebration animation. Wallet send modal offers 'Create a Cashlink' when address unavailable; cashlink txs render specially in the tx list. High reuse for tipping, airdrops, promo apps.
+- **Built from:** `hub/src/views/CashlinkCreate.vue`, `hub/src/views/CashlinkManage.vue`, `hub/src/views/CashlinkReceive.vue`, `hub/src/lib/Cashlink.ts`, `hub/src/components/CashlinkSparkle.vue`, `wallet/src/components/CashlinkButton.vue`
+
+### Staking calculator
+- **Where:** https://www.nimiq.com/staking-calculator/ (nimiq.com website; not in local upstream clones)
+- **Screenshots:** have it (nimiq-branding-skill/screenshots/staking-calculator/nimiq.com-staking-calculator-desktop.png + -mobile.png)
+- Standalone marketing-grade widget: NIM amount + duration inputs -> projected rewards/APY output, branded slider UI. Self-contained (only needs supply/reward-curve math + current staked ratio from network), making it the easiest high-visual feature to scaffold for any community/validator site.
+- **Built from:** `nimiq.com website widget (no local source)`, `reward-curve math from core-rs-albatross economics`, `validators-api for live staked supply`
+
+### Staking flow + validator picker
+- **Where:** wallet.nimiq.com — upstream/wallet/src/components/staking/ (26 components)
+- **Screenshots:** have it partially (staked-balance card + 'NimiqHub Staking 10.1% p.a.' row in nimiq-wallet-app/Screenshot ...9.42.22 PM.png; validator list page still needed)
+- Full multi-page StakingModal wizard: StakingWelcomePage -> StakingValidatorPage (validator list with ValidatorListItem, ValidatorFilter, ValidatorScoreDetails star-ratings, ValidatorIcon/IconStack) -> StakingGraphPage (AmountSlider over balance + reward projection StakingGraph) -> StakingRewardsPage/Chart. Backed by github.com/nimiq/validators-api ('helping stakers choose where to stake'). The validator-picker subcomponent alone is valuable for pool/validator websites (e.g. stakenimiq.com).
+- **Built from:** `wallet/src/components/staking/StakingModal.vue`, `StakingValidatorPage.vue`, `ValidatorListItem.vue`, `ValidatorFilter.vue`, `ValidatorScoreDetails.vue`, `AmountSlider.vue`, `StakingGraph.vue`, `StakingRewardsChart.vue`, `nimiq/validators-api`
+
+### QR scan + pay (request links / receive)
+- **Where:** wallet.nimiq.com — upstream/wallet/src/components/modals/ScanQrModal.vue + ReceiveModal.vue; libs github.com/nimiq/qr-scanner (2.9k stars) + qr-creator
+- **Screenshots:** have it (receive modal w/ request-link in ...9.42.34 PM.png; send modal w/ QR-scan entry + cashlink CTA in ...9.42.44 PM.png)
+- Two halves: (1) ScanQrModal using @nimiq/vue-components QrScanner (camera scan, parses nimiq:/bitcoin:/polygon payment URIs and routes to the right send flow); (2) ReceiveModal showing identicon + chunked address + QR + 'Create request link' (amount-encoded payment URI). Both libs are standalone MIT packages, so this scaffolds cleanly into any PoS/payment app (NimiPay, Gateflo).
+- **Built from:** `wallet/src/components/modals/ScanQrModal.vue`, `wallet/src/components/modals/ReceiveModal.vue`, `@nimiq/vue-components QrScanner + QrCode`, `nimiq/qr-scanner`, `nimiq/qr-creator`, `payment URI parser in wallet/src/lib`
+
+### Transaction history with fiat conversion + CSV export
+- **Where:** wallet.nimiq.com — upstream/wallet/src/components/TransactionList.vue, TransactionListItem.vue, FiatConvertedAmount.vue, modals/HistoryExportModal.vue
+- **Screenshots:** have it (mobile tx list with fiat values in nimiq-wallet-app/Screenshot ...9.42.22 PM.png)
+- Virtual-scrolled, month-grouped tx list with identicon avatars, contact-label resolution, cashlink/swap badges, historic fiat value per tx (via @nimiq/utils FiatApi rates), search bar, and CSV export modal. Per-currency variants exist (BtcTransactionList, UsdcTransactionList, UsdtTransactionList) sharing the pattern. Any wallet-adjacent or accounting app wants this.
+- **Built from:** `wallet/src/components/TransactionList.vue`, `TransactionListItem.vue`, `FiatConvertedAmount.vue`, `SearchBar.vue`, `modals/TransactionModal.vue`, `modals/HistoryExportModal.vue`, `@nimiq/utils FiatApi`
+
+### Identicon generator / avatar picker
+- **Where:** github.com/nimiq/identicons (MIT) + @nimiq/vue-components Identicon.vue + hub IdenticonSelector.vue; reference doc already at nimiq-branding-skill/references/identicons.md
+- **Screenshots:** have it (identicons visible in all wallet screenshots; documented in nimiq-branding-skill/references/identicons.md)
+- Deterministic hexagon avatar from any Nimiq address — the most recognizable Nimiq brand element. Two scaffold targets: plain Identicon renderer (address -> SVG) and the hub's IdenticonSelector 'choose your avatar' onboarding carousel. Tiny dependency, used by literally every Nimiq app.
+- **Built from:** `nimiq/identicons`, `@nimiq/vue-components Identicon.vue + AccountRing.vue`, `hub/src/components/IdenticonSelector.vue`, `wallet IdenticonButton.vue + IdenticonStack.vue`
+
+## Medium priority
+
+### Swap UI (NIM <-> BTC <-> USDC/USDT via Fastspot)
+- **Where:** wallet.nimiq.com Trade > Swap — upstream/wallet/src/components/swap/ (SwapModal.vue, SwapBalanceBar.vue, SwapAnimation.vue, SwapFeesTooltip.vue, SwapNotification.vue)
+- **Screenshots:** need it (only disabled Swap button visible in ...9.41.06 PM.png)
+- Atomic-swap UI: dual AmountInputs with live quote, draggable SwapBalanceBar showing post-swap balance split, SwapFeesTooltip fee breakdown, full-screen SwapAnimation during HTLC execution, background SwapNotification. Visually excellent but tightly coupled to Fastspot API + @nimiq/fastspot-api + hub setupSwap — scaffold as UI shell with pluggable quote provider. Directly relevant to Hashmark-style apps.
+- **Built from:** `wallet/src/components/swap/SwapModal.vue`, `SwapBalanceBar.vue`, `SwapAnimation.vue`, `SwapFeesTooltip.vue`, `@nimiq/fastspot-api`, `hub setupSwap/RefundSwap views`
+
+### Buy/Sell fiat on-ramp (Moonpay, Simplex, Coinify, OASIS bank swap)
+- **Where:** wallet.nimiq.com Buy flow — upstream/wallet/src/components/modals/BuyOptionsModal.vue, BuyCryptoModal.vue, SellCryptoModal.vue, MoonpayModal.vue, SimplexModal.vue, CoinifyModal.vue, TradeModal.vue; OASIS marketing page nimiq.com/oasis
+- **Screenshots:** have it partially (OASIS marketing page nimiq-website/nimiq.com-oasis-desktop+mobile.png; the actual buy-options modal still needed)
+- Provider-chooser pattern: BuyOptionsModal geo-gates providers via useGeoIp + CountrySelector/CountryFlag, then opens provider webview modals (Moonpay/Simplex/Coinify) or the OASIS SEPA bank-swap TradeModal (SwapSepaFundingInstructions, BankCheckInput, KYC components). Scaffold value is the chooser shell + provider-modal pattern; the providers themselves need API keys/contracts, and OASIS availability has been limited — hence medium.
+- **Built from:** `wallet/src/components/modals/BuyOptionsModal.vue`, `MoonpayModal.vue`, `SimplexModal.vue`, `CoinifyModal.vue`, `TradeModal.vue`, `CountrySelector.vue`, `swap/SwapSepaFundingInstructions.vue`, `BankCheckInput.vue`, `kyc/`
+
+### Address book / contacts
+- **Where:** wallet.nimiq.com — upstream/wallet/src/components/ContactBook.vue, ContactShortcuts.vue, UsdcContactBook.vue + stores/Contacts.ts
+- **Screenshots:** have it partially (Contacts entry point in send modal screenshot ...9.42.44 PM.png; open contact book still needed)
+- Identicon-driven contact list: add/edit/delete with LabelInput, recent-recipient shortcuts row in the send flow, contact resolution in tx history. Small, self-contained (localStorage store), reusable in any send-money UI.
+- **Built from:** `wallet/src/components/ContactBook.vue`, `ContactShortcuts.vue`, `stores/Contacts.ts`, `@nimiq/vue-components Identicon + LabelInput`, `modals/AddressSelectorModal.vue`
+
+### Amount input with live fiat sync
+- **Where:** wallet/src/components/AmountInput.vue + AmountMenu.vue + FiatConvertedAmount.vue; @nimiq/vue-components AmountInput + AmountWithFee + FiatAmount
+- **Screenshots:** need it
+- Auto-scaling NIM amount input with currency-flip (enter in fiat or NIM), max-button, and live conversion line. Foundational sub-widget for send/swap/staking/checkout — worth scaffolding once as a shared primitive since the wallet version is richer than the base vue-components one.
+- **Built from:** `wallet/src/components/AmountInput.vue`, `AmountMenu.vue`, `FiatConvertedAmount.vue`, `@nimiq/vue-components AmountWithFee`, `@nimiq/utils CurrencyInfo + FiatApi`
+
+### Network consensus indicator + network map
+- **Where:** wallet.nimiq.com network view — upstream/wallet/src/components/ConsensusIcon.vue, NetworkStats.vue, NetworkMap.vue, NetworkMapPeerList.vue, modals/NetworkInfoModal.vue
+- **Screenshots:** need it
+- Two tiers: (a) ConsensusIcon — small animated connecting/syncing/established indicator every light-client app should show (pairs with @nimiq/core web client); (b) the full maplibre world NetworkMap with peer list + NetworkStats (uses nimiq-ui packages/nimiq-maplibre-styles). Scaffold (a) as high-value default, (b) as optional showpiece.
+- **Built from:** `wallet/src/components/ConsensusIcon.vue`, `NetworkStats.vue`, `NetworkMap.vue`, `NetworkMapPeerList.vue`, `nimiq-ui/packages/nimiq-maplibre-styles`, `stores/Network.ts`
+
+## Low priority
+
+### Price chart / portfolio balance distribution
+- **Where:** wallet.nimiq.com sidebar — upstream/wallet/src/components/PriceChart.vue, LineChart.vue, BalanceDistribution.vue, AccountBalance.vue
+- **Screenshots:** have it (left sidebar in nimiq-wallet-app/Screenshot ...9.41.06 PM.png and wallet.nimiq.com-desktop.png)
+- Sidebar sparkline price charts (NIM/BTC with 24h delta) and the BalanceDistribution bar splitting portfolio across currencies/addresses. Nice-to-have dashboard garnish; visible in held wallet screenshots.
+- **Built from:** `wallet/src/components/PriceChart.vue`, `LineChart.vue`, `BalanceDistribution.vue`, `AccountBalance.vue`, `stores/Fiat.ts`
+
+### Fee selector
+- **Where:** upstream/wallet/src/components/FeeSelector.vue (used in BTC send flow; SendModalFooter for NIM)
+- **Screenshots:** need it
+- Free/standard/express SelectBar with live fee-in-fiat preview. Marginal for NIM (fees ~0, mostly hidden) — really only matters for BTC sends, so low priority for a Nimiq-branding CLI.
+- **Built from:** `wallet/src/components/FeeSelector.vue`, `@nimiq/vue-components SelectBar`, `lib/BitcoinTransactionUtils.ts estimateFees`
+
+### Vote / governance UI
+- **Where:** https://nimiq.com/vote — github.com/nimiq/vote (Vue + TypeScript + Pug, MIT)
+- **Screenshots:** need it
+- Community-decision app: choice ranking/weighting UI where vote weight = NIM balance, signed via Hub signMessage/transaction. Niche (only used for occasional community-wide decisions) and the repo is stylistically older (Stylus/Pug), so low priority unless the CLI targets DAO-ish use cases.
+- **Built from:** `nimiq/vote repo (not cloned locally)`, `@nimiq/hub-api signTransaction/chooseAddress`
+
+### Browser-wallet onboarding extras (welcome tour, backup nag, testnet faucet)
+- **Where:** upstream/wallet/src/components/modals/WelcomeModal.vue, MigrationWelcomeModal.vue, BackupModal.vue (warning banner visible in screenshots), TestnetFaucet.vue, UpdateNotification.vue
+- **Screenshots:** have it partially (backup warning banner + multisig promo modal in ...9.40.54 PM.png / ...9.41.06 PM.png)
+- Supporting onboarding chrome around the wallet: first-run welcome/tour modal, persistent 'no forgot password — Backup' warning banner, release-notes/update notification, and a testnet faucet widget (handy for any Nimiq dev-demo app the CLI scaffolds). Individually small; bundle as an 'app shell extras' template.
+- **Built from:** `wallet/src/components/modals/WelcomeModal.vue`, `modals/BackupModal.vue`, `TestnetFaucet.vue`, `UpdateNotification.vue`, `AnnouncementBox.vue`, `StatusScreen.vue`

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "nimiq-branding-cli",
-  "version": "1.0.0",
-  "description": "nq — pixel-verified Nimiq UI component registry + CLI. 39 components (Vue 3 + plain HTML) diffed against the real Nimiq apps, plus the team's real asset library. Unofficial community tool.",
+  "version": "1.0.1",
+  "description": "nq \u2014 pixel-verified Nimiq UI component registry + CLI. 39 components (Vue 3 + plain HTML) diffed against the real Nimiq apps, plus the team's real asset library. Unofficial community tool.",
   "type": "module",
   "bin": {
-    "nq": "bin/nq.js"
+    "nq": "./bin/nq.js"
   },
   "scripts": {
     "verify": "node scripts/verify.mjs",
@@ -36,16 +36,5 @@
     "scaffolding",
     "crypto",
     "ui"
-  ],
-  "files": [
-    "bin/",
-    "assets/",
-    "scripts/verify.mjs",
-    "scripts/snap.mjs",
-    "NOTICE.md",
-    "registry/index.json",
-    "registry/components/*/meta.json",
-    "registry/components/*/html/",
-    "registry/components/*/vue/"
   ]
-}
+}

package/registry/components/account-header/html/account-header.css

@@ -0,0 +1,343 @@
+/* Nimiq Account Header (wallet AddressOverview header)
+   Requires the legacy nimiq-style CSS (html{font-size:8px}, --nimiq-* vars,
+   .nq-button-pill / .nq-button-s / .nq-icon) + Mulish & Fira Mono fonts.
+   Composition of: AddressOverview.vue (.active-address + .actions),
+   SearchBar.vue, StakingButton.vue (+ green CTA tooltip), StakingIcon.vue,
+   vue-components Tooltip.vue (bottom subset).
+   All selectors namespaced under .account-header. */
+
+.account-header {
+    /* wallet themes.scss defaults */
+    --bg-primary: var(--nimiq-white);
+    --text-16: rgba(31, 35, 72, 0.16);
+    --text-22: rgba(31, 35, 72, 0.22);
+    --light-blue-40: rgba(5, 130, 202, 0.4);
+    --body-size: 2rem;
+    --h1-size: 3rem;
+    --large-button-size: 2rem;
+    --attr-duration: 300ms;
+    /* AddressOverview.vue layout vars (default: 1440px) */
+    --padding: 4rem;
+    --padding-bottom: 6rem;
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: var(--bg-primary);
+    color: var(--nimiq-blue);
+    font-family: 'Mulish', sans-serif;
+    /* composition chrome: room for the staking CTA tooltip (overlays the
+       transaction list in the wallet) */
+    padding-bottom: 9rem;
+}
+
+/* wallet global utilities */
+.account-header .flex-row { display: flex; flex-direction: row; }
+.account-header .ml-auto { margin-left: auto; }
+
+/* ---- active address row ---- */
+.account-header .active-address {
+    flex-shrink: 0;
+    align-items: center;
+    padding: calc(var(--padding) + 2rem);
+    padding-right: calc(var(--padding) + 4rem);
+    padding-bottom: var(--padding-bottom);
+}
+
+.account-header .active-address .identicon-wrapper {
+    position: relative;
+    margin-right: 4rem;
+}
+
+.account-header .active-address .identicon {
+    height: 11.25rem;
+    width: 11.25rem;
+    margin: -0.625rem 0; /* size identicon to be 90x80 px */
+    flex-shrink: 0;
+}
+.account-header .identicon img { width: 100%; height: 100%; }
+
+.account-header .active-address .meta {
+    flex-grow: 1;
+    min-width: 0;
+}
+.account-header .active-address .meta .flex-row { align-items: center; }
+
+.account-header .active-address .address,
+.account-header .active-address .label {
+    flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.account-header .active-address .label,
+.account-header .active-address .amount {
+    --size: var(--h1-size);
+    font-size: var(--size);
+    margin-top: 0.25rem;
+}
+
+.account-header .active-address .address,
+.account-header .active-address .fiat-amount {
+    --size: var(--body-size);
+    font-size: var(--size);
+    opacity: 0.5;
+}
+
+.account-header .active-address .label {
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+    margin-right: 3rem;
+    mask: linear-gradient(90deg, white, white calc(100% - 3rem), rgba(255,255,255, 0));
+}
+
+.account-header .active-address .address {
+    word-spacing: -0.2em;
+    font-family: 'Fira Mono', monospace;
+    transition: opacity .3s var(--nimiq-ease);
+}
+
+.account-header .active-address .copyable {
+    padding: 0.5rem 1rem;
+    margin-left: -1rem;
+    min-width: 0;
+    margin-right: 3rem;
+}
+
+.account-header .active-address .fiat-amount { margin-left: auto; }
+
+.account-header .active-address .amount,
+.account-header .active-address .fiat-amount { flex-shrink: 0; }
+
+.account-header .active-address .amount {
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+    white-space: nowrap;
+}
+
+.account-header .active-address .fiat-amount {
+    font-weight: 600;
+    line-height: 1;
+}
+
+/* ---- actions row ---- */
+.account-header .actions {
+    position: relative;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin: 0 var(--padding) 2rem;
+    padding: 0 3rem 0 2rem;
+}
+.account-header .actions button { flex-shrink: 0; }
+.account-header .actions .nq-button-pill { white-space: nowrap; }
+
+.account-header .actions .vertical-separator {
+    background: rgba(31, 35, 72, 0.15);
+    border-radius: 2rem;
+    width: 1.5px;
+    height: 3rem;
+    margin: 0.625rem .5rem 0.625rem 2rem;
+}
+
+.account-header .send,
+.account-header .receive {
+    margin: 0 0.5rem;
+    align-items: center;
+    padding: 1.125rem 2rem;
+    height: unset;
+    line-height: 1;
+    border-radius: 500px;
+    font-size: var(--large-button-size);
+}
+.account-header .send .nq-icon,
+.account-header .receive .nq-icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-right: 1rem;
+}
+.account-header .send { margin-left: 1.5rem; }
+.account-header .send .nq-icon { transform: rotateZ(-90deg); }
+.account-header .receive { margin-right: 0; }
+.account-header .receive .nq-icon { transform: rotateZ(90deg); }
+
+/* ---- search bar ---- */
+.account-header .actions .container {
+    width: 100%;
+    min-width: 5.5rem;
+}
+.account-header .search-bar {
+    --default-sb-width: clamp(5.5rem, 100%, 30rem);
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    cursor: text;
+    padding: 0.75rem 0;
+    min-width: var(--default-sb-width);
+    max-width: var(--default-sb-width);
+}
+.account-header .search-bar::after {
+    content: '';
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    box-shadow: inset 0 0 0 0.1875rem var(--text-16);
+    border-radius: 500px;
+    transition: box-shadow var(--attr-duration) var(--nimiq-ease);
+}
+.account-header .search-bar:hover::after {
+    box-shadow: inset 0 0 0 0.1875rem var(--text-22);
+}
+.account-header .search-bar:focus-within { color: var(--nimiq-light-blue); }
+.account-header .search-bar:focus-within > svg { opacity: 1; }
+.account-header .search-bar:focus-within::after {
+    box-shadow: inset 0 0 0 0.1875rem var(--light-blue-40);
+}
+.account-header .search-bar > svg {
+    flex-grow: 0;
+    margin-left: 1.75rem;
+    margin-right: 1rem;
+    flex-shrink: 0;
+    opacity: 0.4;
+    width: 1.75rem;
+    height: 1.75rem;
+    transition: opacity var(--attr-duration) var(--nimiq-ease);
+}
+.account-header .search-bar input {
+    font-family: inherit;
+    font-weight: 600;
+    color: inherit;
+    flex-grow: 1;
+    border: 0;
+    line-height: 2.75rem;
+    font-size: var(--body-size);
+    margin: 0;
+    padding: 0;
+    padding-right: 4rem;
+    background: none;
+    min-width: 0;
+}
+.account-header .search-bar input:focus { outline: none; }
+.account-header .search-bar input::placeholder {
+    font-weight: normal;
+    color: inherit;
+    opacity: 0.4;
+}
+
+/* ---- staking button + green CTA tooltip ---- */
+.account-header .staking-button {
+    position: relative;
+    height: 6.75rem;
+    margin: -1.25rem 0;
+}
+.account-header .staking-button svg { font-size: 6.75rem; }
+.account-header .staking-button.show-text {
+    display: flex;
+    align-items: center;
+}
+.account-header .stake {
+    display: block;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    padding: 0;
+}
+.account-header .show-text .stake {
+    display: flex;
+    align-items: center;
+    height: 4.25rem;
+    border-radius: 20rem;
+    padding-right: 1.875rem;
+    justify-content: center;
+}
+.account-header .show-text .stake .staking-icon {
+    margin-right: -1rem;
+    margin-left: -.5rem;
+}
+
+.account-header .staking-icon { font-size: 0; }
+.account-header .staking-icon path:nth-child(1),
+.account-header .staking-icon path:nth-child(2),
+.account-header .staking-icon path:nth-child(4) { opacity: 0; }
+
+/* tooltip base (bottom-position subset of vue-components Tooltip) */
+.account-header .tooltip {
+    display: inline-block;
+    position: relative;
+    line-height: 1;
+}
+.account-header .tooltip .trigger {
+    position: relative;
+    display: inline-block;
+    vertical-align: bottom;
+    text-decoration: none;
+    outline: none;
+    cursor: default;
+    color: inherit;
+}
+.account-header .tooltip .trigger::after {
+    opacity: 0;
+    content: '';
+    display: block;
+    position: absolute;
+    width: 2.25rem;
+    height: 2rem;
+    left: calc(50% - 1.125rem);
+    mask-image: url('data:image/svg+xml,<svg viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg"><path d="M9 7.12c-.47 0-.93.2-1.23.64L3.2 14.29A4 4 0 0 1 0 16h18a4 4 0 0 1-3.2-1.7l-4.57-6.54c-.3-.43-.76-.64-1.23-.64z" fill="white"/></svg>');
+    transition: opacity .3s var(--nimiq-ease), .3s visibility;
+    transition-delay: 16ms;
+    visibility: hidden;
+    z-index: 1000;
+}
+.account-header .tooltip[class*='position-bottom'] .trigger::after {
+    top: 100%;
+    background: var(--background, var(--nimiq-blue));
+}
+.account-header .tooltip.shown .trigger::after {
+    opacity: 1;
+    visibility: visible;
+}
+.account-header .tooltip .tooltip-box {
+    contain: layout paint style;
+    position: absolute;
+    color: white;
+    background: var(--background, var(--nimiq-blue-bg));
+    padding: 1.5rem;
+    border-radius: .5rem;
+    font-size: 1.75rem;
+    line-height: 1.5;
+    font-weight: 600;
+    box-shadow: 0 1.125rem 2.275rem rgba(0, 0, 0, 0.11);
+    z-index: 999;
+}
+.account-header .tooltip[class*='position-bottom'] .tooltip-box {
+    transform: translateY(2rem);
+}
+
+/* green staking CTA tooltip (StakingButton.vue .staking-feature-tip) */
+.account-header .tooltip.staking-feature-tip,
+.account-header .tooltip.staking-feature-tip .trigger {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 100%;
+    width: 100%;
+    z-index: 3;
+}
+.account-header .tooltip.staking-feature-tip .trigger::after {
+    background-color: var(--nimiq-green);
+    transform: translateY(calc(-1rem + 1px));
+}
+.account-header .tooltip.staking-feature-tip .tooltip-box {
+    background: var(--nimiq-green-bg);
+    color: white;
+    font-size: 1.75rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 140%;
+    padding: 0.5rem 1rem;
+    white-space: nowrap;
+    transform: translateY(1rem);
+}

package/registry/components/account-header/html/account-header.html

@@ -0,0 +1,90 @@
+<!-- Nimiq Account Header (wallet AddressOverview header).
+     Include account-header.css + legacy nimiq-style CSS + Mulish & Fira Mono fonts.
+     The identicon img starts on the hexagon placeholder and is swapped to the
+     generated iqon by the pinned @nimiq/iqons recipe below (deterministic per address).
+     Remove the .staking-feature-tip <span> to hide the green CTA tooltip.
+     The root reserves 9rem bottom padding for the tooltip (in the wallet it
+     overlays the transaction list below). -->
+<div class="account-header">
+
+    <div class="active-address flex-row">
+        <div class="identicon-wrapper">
+            <div class="identicon" data-address="NQ87 JY9X JUEE HA17 JNBB HPGM 5ETQ VT1G CVN2">
+                <img src='data:image/svg+xml,<svg width="64" height="64" viewBox="0 -4 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".1" d="M62.3 25.4L49.2 2.6A5.3 5.3 0 0 0 44.6 0H18.4c-1.9 0-3.6 1-4.6 2.6L.7 25.4c-1 1.6-1 3.6 0 5.2l13.1 22.8c1 1.6 2.7 2.6 4.6 2.6h26.2c1.9 0 3.6-1 4.6-2.6l13-22.8c1-1.6 1-3.6.1-5.2z" fill="url(%23identicon_radial)"/><defs><radialGradient id="identicon_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-63.0033 0 0 -56 63 56)"><stop stop-color="%23260133"/><stop offset="1" stop-color="%231F2348"/></radialGradient></defs></svg>' alt="Nimiq identicon">
+            </div>
+        </div>
+        <div class="meta">
+            <div class="flex-row">
+                <div class="label">Indigo Address</div>
+                <span class="amount">995 <span class="currency nim">NIM</span></span>
+            </div>
+            <div class="flex-row">
+                <div class="copyable">
+                    <div class="address">NQ87 JY9X JUEE HA17 JNBB HPGM 5ETQ VT1G CVN2</div>
+                </div>
+                <span class="fiat-amount">$0.50</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="actions flex-row">
+        <div class="container">
+            <div class="search-bar">
+                <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="6" cy="6" r="5" stroke="currentColor" stroke-width="2" />
+                    <path d="M13.31 14.73a1 1 0 001.42-1.42l-1.42 1.42zM8.3 9.7l5.02 5.02 1.42-1.42L9.7 8.3 8.29 9.71z" fill="currentColor" />
+                </svg>
+                <input type="text" placeholder="Search transactions">
+            </div>
+        </div>
+
+        <div class="flex-row ml-auto">
+            <div class="staking-button show-text">
+                <span class="tooltip staking-feature-tip position-bottom-center shown">
+                    <a href="javascript:void(0);" tabindex="0" class="trigger"></a>
+                    <div class="tooltip-box" style="top: 100%; left: 50%; transform: translate(-50%, 1rem);">
+                        Earn NIM every month by staking your NIM
+                    </div>
+                </span>
+                <button class="stake nq-button-pill green">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="nq-icon staking-icon">
+                        <path opacity=".6" fill="none" stroke="#21bca5" stroke-width="3.02" d="M70 22h0a48 48 0 0148 48v0a48 48 0 01-48 48h0a48 48 0 01-48-48v0a48 48 0 0148-48z"/>
+                        <path opacity=".4" fill="none" stroke="#21bca5" stroke-width="3.02" d="M70 12h0a58 58 0 0158 58h0a58 58 0 01-58 58h0a58 58 0 01-58-58h0a58 58 0 0158-58z" />
+                        <path opacity=".2" fill="none" stroke="none" stroke-width="3.02" d="M70 2.25h0A67.75 67.75 0 01137.75 70v0A67.75 67.75 0 0170 137.75h0A67.75 67.75 0 012.25 70v0A67.75 67.75 0 0170 2.25z" />
+                        <path d="M70 28.23a41.76 41.76 0 110 83.52 41.76 41.76 0 110-83.52z" fill="none"/>
+                        <path d="M70.71 69.1v21.56m18.71-26.11c0 12.4-6.31 18.89-18.71 18.89 0-17.56 5.28-18.89 18.71-18.89zM54.18 53.98c0 13.33 4.13 20.07 16.53 20.07 0-13.43-1.03-20.07-16.53-20.07z" fill="none" stroke="#fff" stroke-width="4.0316" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    <span class="stake-text">Stake</span>
+                </button>
+            </div>
+
+            <div class="vertical-separator"></div>
+
+            <button class="send nq-button-pill light-blue flex-row">
+                <svg class="nq-icon" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M10,1l5,5l-5,5" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="14" y1="6" x2="1" y2="6" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                Send
+            </button>
+            <button class="receive nq-button-s flex-row">
+                <svg class="nq-icon" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M10,1l5,5l-5,5" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="14" y1="6" x2="1" y2="6" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                Receive
+            </button>
+        </div>
+    </div>
+
+</div>
+
+<script type="module">
+    /* pinned identicon recipe — see registry/components/identicon */
+    import Iqons from 'https://cdn.jsdelivr.net/npm/@nimiq/iqons@1.6.0/dist/iqons.min.js';
+    // Identicon sprite: the REAL @nimiq/iqons@1.6.0 iqons.min.svg is vendored at ../../../../assets/img/iqons.min.svg
+    // (consumer projects: `nq add` copies it to ./nimiq/assets/img/iqons.min.svg). The iqons LIBRARY import
+    // above stays on the jsdelivr pin — it is code, not artwork. The CDN sprite (byte-identical content)
+    // is only the fallback when the local copy is unreachable (e.g. file:// contexts that block fetch).
+    const localIqonsSprite = '../../../../assets/img/iqons.min.svg';
+    const cdnIqonsSprite = 'https://cdn.jsdelivr.net/npm/@nimiq/iqons@1.6.0/dist/iqons.min.svg';
+    Iqons.svgPath = await fetch(localIqonsSprite, { method: 'HEAD' }).then((r) => (r.ok ? localIqonsSprite : cdnIqonsSprite)).catch(() => cdnIqonsSprite);
+
+    for (const el of document.querySelectorAll('.identicon[data-address]')) {
+        el.querySelector('img').src = await Iqons.toDataUrl(el.dataset.address);
+    }
+</script>