@sponsorcoin/merit-wallet 0.0.0-stage → 0.0.2

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# @sponsorcoin/merit-wallet
+
+The Merit Wallet component, shared by the web app, the browser extension and later the phone apps.
+
+Status (2026-10-08): created by moving `MeritWallet.tsx` out of `@sponsorcoin/spcoin-panels`, unchanged apart from its imports.
+It depends on `@sponsorcoin/spcoin-panels` (peer dependency). The plan for merging the web and extension wallets into this one component
+is in `docs/meritWalletNpmDesignToDo.txt` of the web app repo.
+
+Build: `npm run build` (tsc, output in `dist/`, which is tracked like the other packages).
+
+## Host injectables and defaults
+
+The wallet owns portable defaults where they are safe. Hosts inject the parts that differ by deployment. An empty optional hook or API is not a working implementation: required behavior must be supplied by the host.
+
+| Injectable | Wallet default | What an app overrides it for | Who supplies it today |
+| --- | --- | --- | --- |
+| `MeritWalletApi` (`session`, `accounts`, `signing`) | `createWallet()` supplies an empty authenticator registry and in-memory active-authenticator selection; it does not create a vault or sign. | Connect the wallet UI to a real vault, accounts, approvals, signing, and transaction transport. | Web: `webWallet` and `webApprovers` backed by wallet state/server routes. Extension: local vault and background worker. |
+| `createWallet` registry, default backend, and active-authenticator store | Empty registry; `appDefault` is required; active selection falls back to memory. | Register the host's signers and persist account-to-signer selection. | Web: server keystore authenticator and web default. Extension: local vault authenticator and extension storage. |
+| Vault storage and capability | `VaultSession` and `createLocalVault` implement crypto and account operations; the host must provide ciphertext storage. | Choose secure persistence and an unlock lifecycle for the device. | Web uses its server keystore. Extension uses `chrome.storage` through the background worker. |
+| `MeritWalletApi.networks` | Network data comes from shared `spcoin-feeds`; wallet selection helpers do not own persistence. | Supply a different network set or persist active-network changes. | Web: shared registry plus app chain selection. Extension: shared registry plus extension chain selection. |
+| `WalletDataSource.resolveNetwork` | Shared `spcoin-feeds` resolver when omitted by consumers that use the shared network helper. | Use an app-specific registry. | Web and extension use shared feeds; no separate resolver is currently injected. |
+| `WalletDataSource.loadNetworkInfo` | Relative fetch from `/assets/blockchains/<chainId>/info.json` in the panel layer. | Change the asset origin or provide a native/platform data source. | Web uses same-origin assets. Extension supplies its packaged asset base URL. |
+| `WalletDataSource.loadTokenRecord` | No loader; token detail can remain partial when no loader is supplied. | Hydrate an address-only token from the app's token registry. | Web supplies its token store loader. Extension currently leaves it unset. |
+| `MeritPlatform` | `domPlatform`: browser clipboard, URL opening, file download, localStorage preferences, visibility and focus. | Replace browser operations with native share/storage/lifecycle behavior. | Web and extension use the package default. |
+| `walletAssetBaseUrl` | Empty base URL, so assets resolve from the current origin. | Point packaged wallet identity assets at an extension or other app bundle. | Web uses its origin. Extension supplies `chrome.runtime.getURL('')`. |
+| Sponsor read cache store | LocalStorage with memory fallback. | Share/cache sponsor totals through an app backend or platform storage. | Web registers the HTTP cache store. Extension uses the local default. |
+| Sponsor read transport (`SpCoinReadStepFn`) | HTTP POST to the same-origin `/api/spCoin/run-script` route. | Use a direct RPC client or another route when the host has no web server. | Web uses the default route. Extension injects direct chain RPC. |
+| Hosted API base | Enabled by default for engine features that use host API routes. | Disable hosted reads when running without the web server, or select another API base. | Web keeps the same-origin API. Extension disables hosted API calls. |
+| Account/profile source | No universal profile backend; package offers account profile UI/client contracts. | Load and persist account labels, profiles, and active account for the host. | Web uses account API/store. Extension uses its local profile adapter and bundled assets. |
+
+These defaults are runtime behavior, not a claim that every host can run without configuration: vault operations, token hydration, and chain reads require their corresponding host implementation. Keep host adapters limited to those real differences; do not copy package defaults into host code.

package/dist/AgentSelectDropDown.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { spCoinAccount } from '@sponsorcoin/spcoin-common/context';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+export interface ConnectedAgentSelectDropDownProps {
+    panelGateId?: SP_COIN_DISPLAY | null;
+    label?: string;
+    addrPrePostSize?: number;
+    /** Host-specific avatar for a selected agent (the web app's opens the account panel on click). Default: the package's plain AccountAvatar. */
+    renderAccountAvatar?: (account: spCoinAccount) => React.ReactNode;
+}
+export default function ConnectedAgentSelectDropDown({ panelGateId, label, addrPrePostSize, renderAccountAvatar, }: ConnectedAgentSelectDropDownProps): import("react/jsx-runtime").JSX.Element;

package/dist/AgentSelectDropDown.js

@@ -0,0 +1,53 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/AgentSelectDropDown.tsx
+//
+// 2026-10-08 (docs/meritWalletNpmDesignToDo.txt row 5, S2b-2) -- the agent picker, wired to the exchange engine, written once for both
+// hosts. It is a move, not a rewrite, of the web app's node_source/spCoinPanels/AssetSelectDropDowns/AgentSelectDropDown.tsx: the same
+// data resolution (useAgentAccount), the same open/close orchestration (useOpenActiveListPanel), the same Sponsor/Recipient/Agent
+// mutual-exclusion rule (validateAccount), feeding the portable, hook-free AgentSelectDropDown from @sponsorcoin/spcoin-panels. Only
+// engine and package imports are used, so it runs wherever an ExchangeContext provider does: the web app's ExchangeProvider and the
+// extension's LiteExchangeProvider.
+//
+// The one host-specific thing is the avatar. The web app's avatar opens the account panel on click (web-only hooks), so a host that wants
+// that passes renderAccountAvatar; without it the package's plain AccountAvatar is used (no click behaviour).
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { panelPartClass } from '@sponsorcoin/spcoin-common/styles';
+import { useCallback } from 'react';
+import { FEED_TYPE } from '@sponsorcoin/spcoin-common/context';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { useExchangeContext, usePanelVisible, useOpenActiveListPanel, useAgentAccount, validateAccount, } from '@sponsorcoin/spcoin-exchange-engine';
+import { AccountAvatar, PanelGate } from '@sponsorcoin/spcoin-panels';
+import { AgentSelectDropDown as PortableAgentSelectDropDown } from './panels';
+export default function ConnectedAgentSelectDropDown({ panelGateId, label = 'Select Agent', addrPrePostSize = 4, renderAccountAvatar, }) {
+    const { exchangeContext } = useExchangeContext();
+    const [agentAccount, setAgentAccount] = useAgentAccount();
+    const { openActiveListPanel, closeActiveListPanel } = useOpenActiveListPanel();
+    const agentListVisible = usePanelVisible(SP_COIN_DISPLAY.REMOTE_ACCOUNT_AGENT_LIST);
+    const address = String(agentAccount?.address ?? '');
+    // A real account with a deliberately blanked address is the "unselected" placeholder.
+    const isUnselected = !!agentAccount && !address;
+    const openAgentList = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (agentListVisible) {
+            closeActiveListPanel('AgentSelectDropDown:closeAgentList');
+            return;
+        }
+        openActiveListPanel({
+            feedType: FEED_TYPE.REMOTE_AGENT_ACCOUNTS,
+            onCommit: (asset) => setAgentAccount(asset),
+            selectOnLogoClick: true,
+            currentTokenAddress: address || undefined,
+            validateSelection: (addr) => validateAccount('AGENT', addr, exchangeContext?.apiCoreSyncedMembers?.accounts ?? {}),
+        }, 'AgentSelectDropDown:openAgentList', SP_COIN_DISPLAY.REMOTE_ACCOUNT_AGENT_LIST);
+    }, [agentListVisible, openActiveListPanel, closeActiveListPanel, setAgentAccount, exchangeContext?.apiCoreSyncedMembers?.accounts, address]);
+    return (_jsx(PortableAgentSelectDropDown
+    // No agent (never selected, or selection cleared) falls through to the portable component's shared Anonymous avatar.
+    , { 
+        // No agent (never selected, or selection cleared) falls through to the portable component's shared Anonymous avatar.
+        icon: agentAccount && !isUnselected
+            ? (renderAccountAvatar
+                ? renderAccountAvatar(agentAccount)
+                : _jsx(AccountAvatar, { account: agentAccount, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: panelPartClass.avatarFill, roleLabel: "AGENT" }))
+            : undefined, address: isUnselected ? undefined : address || undefined, symbol: isUnselected ? undefined : agentAccount?.symbol, placeholderLabel: label, onSelectClick: openAgentList, listOpen: agentListVisible, addrPrePostSize: addrPrePostSize, panelGateId: panelGateId === null ? undefined : (panelGateId ?? SP_COIN_DISPLAY.AGENT_SELECT_DROP_DOWN), panelGate: panelGateId === null ? undefined : PanelGate }));
+}

package/dist/AgentSelectDropDownWithAvatar.d.ts

@@ -0,0 +1,10 @@
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+interface Props {
+    panelGateId?: SP_COIN_DISPLAY | null;
+    label?: string;
+    addrPrePostSize?: number;
+    /** Accepted and ignored, so existing callers do not change. */
+    collapseKey?: unknown;
+}
+export default function AgentSelectDropDownWithAvatar({ panelGateId, label, addrPrePostSize }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AgentSelectDropDownWithAvatar.js

@@ -0,0 +1,13 @@
+// File: src/AgentSelectDropDownWithAvatar.tsx
+//
+// 2026-10-10 (docs/nodeSourceMigrationPlan.txt row 16) -- the agent picker as the web app mounts it, moved from node_source/spCoinPanels/AssetSelectDropDowns/AgentSelectDropDown.tsx: this package's ConnectedAgentSelectDropDown with the shared avatar that opens
+// the account panel on click (spcoin-panels' AccountAvatarWithOpen), so a host no longer has to write the adapter.
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { panelPartClass } from '@sponsorcoin/spcoin-common/styles';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { AccountAvatarWithOpen } from '@sponsorcoin/spcoin-panels';
+import ConnectedAgentSelectDropDown from './AgentSelectDropDown';
+export default function AgentSelectDropDownWithAvatar({ panelGateId, label = 'Select Agent', addrPrePostSize = 4 }) {
+    return (_jsx(ConnectedAgentSelectDropDown, { panelGateId: panelGateId, label: label, addrPrePostSize: addrPrePostSize, renderAccountAvatar: (account) => _jsx(AccountAvatarWithOpen, { account: account, mode: SP_COIN_DISPLAY.AGENT_ACCOUNT, className: panelPartClass.avatarFill, roleLabel: "AGENT" }) }));
+}

package/dist/ChangePasswordPanel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `note` is the host's own small print (the web's development keystore says that every account is re-encrypted); `title` and `confirmLabel`
+ * let a host keep its wording. The new password must also differ from the current one.
+ */
+export default function ChangePasswordPanel({ changePassword, onDone, note, title, confirmLabel }: {
+    changePassword(oldPassword: string, newPassword: string): Promise<void>;
+    onDone(): void;
+    note?: string;
+    title?: string;
+    confirmLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ChangePasswordPanel.js

@@ -0,0 +1,42 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/ChangePasswordPanel.tsx
+//
+// 2026-10-08 -- change the wallet password: old password, new password, confirmation. Host-independent: the host supplies the call that
+// re-encrypts the vault (the extension sends merit/vault/changePassword to its worker, which checks the old password again).
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formKitStyle } from '@sponsorcoin/spcoin-common/styles';
+import { useState } from 'react';
+import { MIN_WALLET_PASSWORD_LENGTH } from './session/walletSession';
+const box = formKitStyle.box(12);
+const field = formKitStyle.input;
+const primary = formKitStyle.primary;
+/**
+ * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `note` is the host's own small print (the web's development keystore says that every account is re-encrypted); `title` and `confirmLabel`
+ * let a host keep its wording. The new password must also differ from the current one.
+ */
+export default function ChangePasswordPanel({ changePassword, onDone, note, title = 'Change password', confirmLabel = 'Change password' }) {
+    const [oldPw, setOldPw] = useState('');
+    const [newPw, setNewPw] = useState('');
+    const [confirm, setConfirm] = useState('');
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [changed, setChanged] = useState(false);
+    if (changed) {
+        return (_jsxs("div", { id: "WALLET_PASSWORD_CHANGED", style: box, children: [_jsx("p", { style: formKitStyle.plain, children: "Your password was changed." }), _jsx("button", { type: "button", style: primary, onClick: onDone, children: "Done" })] }));
+    }
+    return (_jsxs("form", { id: "WALLET_CHANGE_PASSWORD", style: box, onSubmit: (e) => {
+            e.preventDefault();
+            if (newPw.length < MIN_WALLET_PASSWORD_LENGTH)
+                return setError('Password must be at least ' + MIN_WALLET_PASSWORD_LENGTH + ' characters.');
+            if (newPw !== confirm)
+                return setError('Passwords do not match.');
+            if (newPw === oldPw)
+                return setError('The new password must be different from the current password.');
+            setBusy(true);
+            setError('');
+            changePassword(oldPw, newPw)
+                .then(() => setChanged(true))
+                .catch((err) => setError(err instanceof Error ? err.message : 'The password could not be changed.'))
+                .finally(() => setBusy(false));
+        }, children: [_jsx("p", { style: formKitStyle.heading, children: title }), _jsx("input", { type: "password", autoComplete: "current-password", placeholder: "Current password", value: oldPw, onChange: (e) => setOldPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "New password", value: newPw, onChange: (e) => setNewPw(e.target.value), style: field }), _jsx("input", { type: "password", autoComplete: "new-password", placeholder: "Confirm new password", value: confirm, onChange: (e) => setConfirm(e.target.value), style: field }), error && _jsx("p", { style: formKitStyle.error, children: error }), _jsx("button", { type: "submit", disabled: busy || !oldPw, style: formKitStyle.primaryDim(busy || !oldPw), children: busy ? 'Changing…' : confirmLabel }), note && _jsx("p", { style: formKitStyle.note, children: note })] }));
+}

package/dist/ConnectedMessagePanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { MessageAccountEntry, MessageTokenEntry } from '@sponsorcoin/spcoin-common/context';
+export interface ConnectedMessagePanelProps {
+    renderAccountRow?: (entry: MessageAccountEntry, index: number) => React.ReactNode;
+    renderTokenRow?: (entry: MessageTokenEntry, index: number) => React.ReactNode;
+}
+export default function ConnectedMessagePanel({ renderAccountRow, renderTokenRow }: ConnectedMessagePanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ConnectedMessagePanel.js

@@ -0,0 +1,37 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/ConnectedMessagePanel.tsx
+//
+// 2026-10-08 (docs/meritWalletNpmDesignToDo.txt, row 8 / S2b-4b) -- the message panel (MESSAGE_PANEL), wired to the exchange engine, written
+// once for both hosts. The card itself is spcoin-panels' MessagePanelReal; what the web app's components/views/MessagePanel.tsx added was
+// reading the current error message from the exchange context and filling the account / token row slots. This is that wiring, moved: the
+// message comes from the engine's useExchangeContext (the same field the web hook useErrorMessage reads; the hook's only extras were a
+// dedupe on write and a debug trace, neither used by a reader).
+//
+// Rows: a host may pass its own renderers (the web app passes rows built on its click-through account pill and token logo). Without them
+// the package renders plain rows: the token row is the web app's MessageTokenRow, unchanged (it only uses the package TokenLogo); the
+// account row is a simple avatar + "ROLE: symbol | name" + address line, since the web pill's click behaviour is web-only.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { messageRowStyle } from '@sponsorcoin/spcoin-common/styles';
+import { useSyncExternalStore } from 'react';
+import { useExchangeContext, stepPanelContentStore } from '@sponsorcoin/spcoin-exchange-engine';
+import { MessageAccountRow, TokenLogo } from '@sponsorcoin/spcoin-panels';
+import { MessagePanelReal } from './panels';
+import { pendingApprovalMessageStore } from './approval/pendingApprovalMessageStore';
+/** The web app's MessageTokenRow, unchanged. */
+function DefaultTokenRow({ entry }) {
+    return (_jsxs("div", { style: messageRowStyle.tokenColumn, children: [_jsxs("div", { style: messageRowStyle.line, children: [_jsx(TokenLogo, { tokenContract: entry.token, className: "", style: messageRowStyle.tokenLogo }), _jsxs("span", { style: messageRowStyle.label, children: [_jsxs("span", { style: messageRowStyle.role, children: [entry.label, ":"] }), ' ', [entry.token.symbol, entry.token.name].filter(Boolean).join(': ')] })] }), entry.detail && _jsx("div", { style: messageRowStyle.detail, children: entry.detail })] }));
+}
+export default function ConnectedMessagePanel({ renderAccountRow, renderTokenRow }) {
+    const { errorMessage } = useExchangeContext();
+    // 2026-10-29: present only while a Merit-authorized write is waiting on a person —
+    // useMeritApprovalMessagePanel.ts (mounted once in MeritWallet.tsx) publishes it here rather
+    // than as a prop, since this component is mounted in more than one place — see that store's own
+    // doc comment for why.
+    const pendingApproval = useSyncExternalStore(pendingApprovalMessageStore.subscribe, pendingApprovalMessageStore.getSnapshot, pendingApprovalMessageStore.getServerSnapshot);
+    // A step-through popup published for MESSAGE_PANEL (the Swap tab's Steps flow) replaces the normal message while it is up.
+    const stepContent = useSyncExternalStore(stepPanelContentStore.subscribe, stepPanelContentStore.getSnapshot, stepPanelContentStore.getServerSnapshot);
+    // A write waiting on a person (Approve / Reject, the password) always comes first: the step popup returns once it is answered.
+    if (stepContent && !pendingApproval)
+        return _jsx("div", { style: messageRowStyle.stepContent, children: stepContent });
+    return (_jsx(MessagePanelReal, { errorMessage: errorMessage, renderAccountRow: renderAccountRow ?? ((entry, i) => _jsx(MessageAccountRow, { entry: entry }, `${entry.role}-${i}`)), renderTokenRow: renderTokenRow ?? ((entry, i) => _jsx(DefaultTokenRow, { entry: entry }, `token-${i}`)), pendingApproval: pendingApproval }));
+}

package/dist/ConnectedNetworkPanel.d.ts

@@ -0,0 +1,15 @@
+import type { NetworkElement } from '@sponsorcoin/spcoin-common/context';
+/** A NetworkElement for a chain id straight from the registry (the default for previewing a chain other than the live one). */
+export declare function networkElementFromRegistry(chainId: number): NetworkElement;
+export interface LiveNetwork {
+    network: NetworkElement & Record<string, unknown>;
+    chainId: number;
+}
+/** Default live network: the exchange context's network, filled in from the registry the way the web app's useNetwork fills it from its helpers. */
+export declare function useLiveNetworkFromContext(): LiveNetwork;
+export interface ConnectedNetworkPanelProps {
+    onClose?: () => void;
+    /** Host hook for the live network (stable module-level function). Default: the exchange context filled from the registry. */
+    useLiveNetwork?: () => LiveNetwork;
+}
+export default function ConnectedNetworkPanel({ useLiveNetwork }: ConnectedNetworkPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ConnectedNetworkPanel.js

@@ -0,0 +1,118 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/ConnectedNetworkPanel.tsx
+//
+// 2026-10-08 (docs/meritWalletNpmDesignToDo.txt, row 8 / S2b-4b) -- the network detail overlay (NETWORK_PANEL), wired to the exchange engine,
+// written once for both hosts. It is the web app's components/views/RadioOverlayPanels/NetworkPanel/index.tsx moved: same gates, same
+// preview-then-live logic, same rows. Where the inputs come from is what changed, the MetaMask way (one network registry that every screen
+// reads, like its NetworkController):
+//   - the preview store is the engine's (previewNetworkStore, moved there unchanged);
+//   - a chain's name, symbol, logo, explorer and RPC come from spcoin-feeds' network registry (getNetworkConfiguration);
+//   - the host may override how the live network and a previewed chain are resolved, and how the extra info.json fields are loaded: the web
+//     app does, so what it shows stays exactly what it showed (it still resolves names and symbols through its own helpers until those are
+//     rebased on the registry, a separate step: the two sources differ for Base, Polygon and Sepolia).
+// A host that passes nothing gets the registry defaults, which is what the extension uses.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokenRowClass, tokenRowStyle } from '@sponsorcoin/spcoin-common/styles';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CopyBtn } from './TokenSlotPanels';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { defaultStaticImage, previewNetworkStore, useExchangeContext, usePanelVisible, usePreviewNetworkChainId, } from '@sponsorcoin/spcoin-exchange-engine';
+import { getNetworkConfiguration } from '@sponsorcoin/spcoin-feeds/networks';
+import { getNetworkMetaData } from '@sponsorcoin/spcoin-panels';
+import MetaDetailScreen from './account/MetaDetailScreen';
+import { useWalletData } from './walletData';
+/** A NetworkElement for a chain id straight from the registry (the default for previewing a chain other than the live one). */
+export function networkElementFromRegistry(chainId) {
+    const cfg = getNetworkConfiguration(chainId);
+    return {
+        connected: false,
+        appChainId: 0,
+        chainId,
+        name: cfg?.name ?? '',
+        symbol: cfg?.symbol ?? '',
+        logoURL: cfg?.logoURL ?? '',
+        url: cfg?.explorerUrl ?? '',
+        rpcUrl: cfg?.rpcUrl ?? '',
+    };
+}
+/** Default live network: the exchange context's network, filled in from the registry the way the web app's useNetwork fills it from its helpers. */
+export function useLiveNetworkFromContext() {
+    const { exchangeContext } = useExchangeContext();
+    const ctxNet = (exchangeContext?.apiCoreSyncedMembers?.network ?? {});
+    const chainId = ctxNet.appChainId || 0;
+    const cfg = getNetworkConfiguration(chainId);
+    const network = {
+        ...ctxNet,
+        chainId,
+        name: ctxNet.name || cfg?.name || '',
+        logoURL: ctxNet.logoURL || cfg?.logoURL || '',
+        url: ctxNet.url || cfg?.explorerUrl || '',
+        rpcUrl: ctxNet.rpcUrl || '',
+        connected: !!ctxNet.connected,
+    };
+    return { network, chainId };
+}
+export default function ConnectedNetworkPanel({ useLiveNetwork = useLiveNetworkFromContext }) {
+    const vNetworkPanel = usePanelVisible(SP_COIN_DISPLAY.NETWORK_PANEL);
+    const { resolveNetwork, loadNetworkInfo } = useWalletData();
+    const { network: liveNetwork, chainId: liveChainId } = useLiveNetwork();
+    const previewChainId = usePreviewNetworkChainId();
+    const isPreviewMode = previewChainId != null;
+    const previewNetwork = useMemo(() => (isPreviewMode ? (resolveNetwork ?? networkElementFromRegistry)(previewChainId) : undefined), [isPreviewMode, previewChainId, resolveNetwork]);
+    const network = previewNetwork ?? liveNetwork;
+    const chainId = isPreviewMode ? previewChainId : liveChainId;
+    // Self-heal the fields NetworkElement doesn't carry (website/description) from the network's own info.json.
+    const [info, setInfo] = useState(undefined);
+    useEffect(() => {
+        if (!vNetworkPanel || !chainId) {
+            setInfo(undefined);
+            return;
+        }
+        let cancelled = false;
+        const load = loadNetworkInfo
+            ? loadNetworkInfo(chainId)
+            : fetch(`/assets/blockchains/${chainId}/info.json`).then((res) => (res.ok ? res.json() : undefined));
+        load
+            .then((data) => {
+            if (!cancelled)
+                setInfo(data);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setInfo(undefined);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [vNetworkPanel, chainId, loadNetworkInfo]);
+    // Clear the preview once NETWORK_PANEL closes, so a stale preview doesn't linger for the next time it's opened.
+    const prevVisibleRef = useRef(false);
+    useEffect(() => {
+        const wasVisible = prevVisibleRef.current;
+        prevVisibleRef.current = vNetworkPanel;
+        if (!wasVisible || vNetworkPanel)
+            return;
+        previewNetworkStore.clear();
+    }, [vNetworkPanel]);
+    if (!vNetworkPanel)
+        return null;
+    if (!chainId) {
+        return (_jsx("div", { id: "NETWORK_PANEL", children: _jsxs("div", { className: tokenRowClass.empty, style: tokenRowStyle.text, children: [_jsx("p", { className: tokenRowClass.emptyTitle, children: "No network selected." }), _jsx("p", { className: tokenRowClass.emptyText, children: "Select a network to view its details." })] }) }));
+    }
+    const resolvedNetwork = { ...network, ...info };
+    const logoURL = (resolvedNetwork.logoURL ?? '').toString().trim();
+    const name = (resolvedNetwork.name ?? '').toString().trim();
+    const rows = getNetworkMetaData(resolvedNetwork).map((f) => {
+        if (!f.value)
+            return { label: f.label, value: 'N/A' };
+        if (f.kind === 'url') {
+            return {
+                label: f.label,
+                value: (_jsxs("span", { className: tokenRowClass.cell, children: [_jsx("a", { href: f.value, target: "_blank", rel: "noopener noreferrer", className: tokenRowClass.link, children: f.value }), _jsx(CopyBtn, { text: f.value })] })),
+            };
+        }
+        return { label: f.label, value: f.value };
+    });
+    // 2026-11-09 (owner): drawn by the shared read-only screen, the twin of the Account Details screen. Network logos are already complete, self-contained circular brand marks with real transparent padding, so no navy fill behind them.
+    return (_jsx(MetaDetailScreen, { screenId: "NETWORK_PANEL", logoFlag: SP_COIN_DISPLAY.NETWORK_LOGO, metaFlag: SP_COIN_DISPLAY.NETWORK_META_DATA, logoId: "NETWORK_LOGO", metaId: "NETWORK_META_DATA", logoSrc: logoURL || defaultStaticImage, logoAlt: name, toggleLabel: "Network Meta", imageKind: "network", rows: rows, plainLogo: true, fitImageShape: true }));
+}

package/dist/DeleteWalletDialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+/**
+ * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `warning` carries the host's wording for what is lost (the default says the wallet is removed from this device); `title` and `confirmLabel` keep a
+ * host's own words (the web's development keystore says "Remove Account"); `footnote` is optional small print under the buttons.
+ */
+export default function DeleteWalletDialog({ confirmDelete, onClose, warning, title, confirmLabel, footnote }: {
+    confirmDelete(password: string): Promise<void>;
+    onClose(): void;
+    warning?: React.ReactNode;
+    title?: string;
+    confirmLabel?: string;
+    footnote?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DeleteWalletDialog.js

@@ -0,0 +1,74 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/DeleteWalletDialog.tsx
+//
+// 2026-10-08 -- the confirmation popup for deleting the wallet from this device: it asks for the wallet password and deletes only when the host says
+// the password is right. Host-independent: the host supplies confirmDelete(password), which throws a readable message for a wrong password.
+//
+// 2026-10-22 (owner request): the submit button itself carries the whole state (see dialogStyle.deleteConfirmButton's own doc comment) -- blue
+// "Password Required" while empty, still blue with the host's confirmLabel once something is typed (nothing here can know the password is RIGHT
+// before the server says so, so typing alone never turns it green), a quick double red/blue flash on a wrong password then solid red with the
+// server's own message for a few seconds before it reverts on its own, and green only once the server actually confirms the password and the
+// delete succeeds. A wrong password is kept, not cleared (the same rule the login screen follows), so a typo can be fixed instead of retyped. An
+// eye icon toggles the field between masked and plain text.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dialogStyle } from '@sponsorcoin/spcoin-common/styles';
+import { Eye, EyeOff } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import DialogPortal from './DialogPortal';
+const FLASH_STEP_MS = 150;
+const FLASH_STEPS = 4; // two full red/green cycles
+const ERROR_SHOWN_MS = 5000; // how long the solid red state stays, after the flash settles
+/**
+ * 2026-10-11 (docs/design/accountAuthDesign.txt 14.3, item V5): `warning` carries the host's wording for what is lost (the default says the wallet is removed from this device); `title` and `confirmLabel` keep a
+ * host's own words (the web's development keystore says "Remove Account"); `footnote` is optional small print under the buttons.
+ */
+export default function DeleteWalletDialog({ confirmDelete, onClose, warning, title = 'Delete wallet', confirmLabel = 'Delete wallet', footnote }) {
+    const [password, setPassword] = useState('');
+    const [visible, setVisible] = useState(false);
+    const [error, setError] = useState('');
+    const [errorNonce, setErrorNonce] = useState(0);
+    const [flashOn, setFlashOn] = useState(false);
+    const [errorSettled, setErrorSettled] = useState(false);
+    const [busy, setBusy] = useState(false);
+    // only the server knows whether the password is right: green appears here, and only here, once confirmDelete actually resolves.
+    const [success, setSuccess] = useState(false);
+    // one failed submit runs the flash, then the solid error, then clears itself -- a SECOND failure (even with the identical message) must restart the
+    // whole sequence, which is why this keys off a nonce rather than the error text (two equal strings would not re-trigger a dependent effect).
+    useEffect(() => {
+        if (errorNonce === 0)
+            return;
+        setErrorSettled(false);
+        setFlashOn(true);
+        let step = 1;
+        const flashTimer = setInterval(() => {
+            step += 1;
+            setFlashOn((v) => !v);
+            if (step >= FLASH_STEPS) {
+                clearInterval(flashTimer);
+                setErrorSettled(true);
+            }
+        }, FLASH_STEP_MS);
+        const revertTimer = setTimeout(() => {
+            setError('');
+            setErrorSettled(false);
+        }, FLASH_STEPS * FLASH_STEP_MS + ERROR_SHOWN_MS);
+        return () => {
+            clearInterval(flashTimer);
+            clearTimeout(revertTimer);
+        };
+    }, [errorNonce]);
+    const variant = success ? 'success' : error ? (errorSettled ? 'error' : 'flash') : password ? 'typed' : 'empty';
+    const label = success ? 'Deleted' : busy ? 'Deleting…' : error ? error : password ? confirmLabel : 'Password Required';
+    return (_jsx(DialogPortal, { children: _jsx("div", { id: "DELETE_WALLET_DIALOG", role: "dialog", "aria-modal": "true", style: dialogStyle.backdrop, children: _jsxs("form", { style: dialogStyle.formCardDanger, onSubmit: (e) => {
+                    e.preventDefault();
+                    setBusy(true);
+                    setError('');
+                    confirmDelete(password)
+                        .then(() => setSuccess(true))
+                        .catch((err) => {
+                        setError(err instanceof Error ? err.message : 'The wallet could not be deleted.');
+                        setErrorNonce((n) => n + 1);
+                    })
+                        .finally(() => setBusy(false));
+                }, children: [_jsx("p", { style: dialogStyle.title, children: title }), _jsx("p", { style: dialogStyle.warning, children: warning ?? 'This deletes the wallet and all its accounts from this device. You can only get them back with your Secret Recovery Phrase (imported accounts need their private keys).' }), _jsxs("div", { style: dialogStyle.inputWrap, children: [_jsx("input", { type: visible ? 'text' : 'password', autoFocus: true, autoComplete: "current-password", placeholder: "Enter your password to confirm", value: password, onChange: (e) => setPassword(e.target.value), style: dialogStyle.input }), _jsx("button", { type: "button", onClick: () => setVisible((v) => !v), "aria-label": visible ? 'Hide password' : 'Show password', title: visible ? 'Hide password' : 'Show password', style: dialogStyle.eyeButton, children: visible ? _jsx(EyeOff, { size: 16 }) : _jsx(Eye, { size: 16 }) })] }), _jsx("button", { type: "submit", disabled: busy || !password, style: dialogStyle.deleteConfirmButton(variant, flashOn, busy), children: label }), _jsx("button", { type: "button", onClick: onClose, style: dialogStyle.cancelButton, children: "Cancel" }), footnote && _jsx("p", { style: dialogStyle.footnote, children: footnote })] }) }) }));
+}

package/dist/DialogPortal.d.ts

@@ -0,0 +1,3 @@
+export default function DialogPortal({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/DialogPortal.js

@@ -0,0 +1,19 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/DialogPortal.tsx
+//
+// 2026-10-22 (owner report: "the Delete Permanently button does not work"). Every full-screen confirmation dialog (DeleteWalletDialog, PasswordPromptDialog, the Reset Password card in
+// WalletSessionDialogs) is `position: fixed; inset: 0` drawn deep inside MeritWallet's own tree. The web app's floating wallet positions itself with a CSS `transform` (SpCoinWalletPopup.tsx's
+// drag positioning) — a plain CSS rule then reparents `position: fixed` to THAT transformed ancestor instead of the real viewport, so the dialog's "full screen" backdrop no longer actually
+// covers the screen, and the Config tab's own scrollable content painted OVER it, catching every click meant for the dialog's buttons (confirmed with document.elementFromPoint at the button's
+// own pixel: it resolved to the Config panel, never the dialog, even on a forced click). Escaping to the platform's portal target (platform/platform.ts's portalContainer — document.body for
+// every real DOM host) fixes it for every wallet layout mode and every host; this file itself touches no device API directly (test/platformBoundary.test.mjs), only the platform interface.
+'use client';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { usePlatform } from './platform/platform';
+export default function DialogPortal({ children }) {
+    const container = usePlatform().portalContainer();
+    // No portal target (a host with no such nesting problem, or none supplied): render in place, same as before this fix existed.
+    if (!container)
+        return _jsx(_Fragment, { children: children });
+    return createPortal(children, container);
+}