@sponsorcoin/merit-wallet 0.0.0-stage → 0.0.1

package/README.md

@@ -1,3 +1,9 @@
-# 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).

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,51 @@
+// 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 { 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,
+            validateSelection: (addr) => validateAccount('AGENT', addr, exchangeContext?.apiCoreSyncedMembers?.accounts ?? {}),
+        }, 'AgentSelectDropDown:openAgentList', SP_COIN_DISPLAY.REMOTE_ACCOUNT_AGENT_LIST);
+    }, [agentListVisible, openActiveListPanel, closeActiveListPanel, setAgentAccount, exchangeContext?.apiCoreSyncedMembers?.accounts]);
+    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: "h-full w-full object-cover", 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,12 @@
+// 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 { 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: "h-full w-full object-cover", 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 { useState } from 'react';
+import { MIN_WALLET_PASSWORD_LENGTH } from './session/walletSession';
+const BORDER = '#334155';
+const box = { boxSizing: 'border-box', width: '100%', padding: 12, color: '#fff', display: 'flex', flexDirection: 'column', gap: 8 };
+const field = { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: '1px solid ' + BORDER, background: '#0E111B', padding: '8px 12px', color: '#fff', font: 'inherit', outline: 'none' };
+const primary = { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: 0, background: '#5981F3', padding: '8px 16px', fontWeight: 600, color: '#fff', cursor: 'pointer', font: 'inherit' };
+/**
+ * 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: { margin: 0 }, 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: { margin: 0, fontWeight: 600 }, 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: { color: '#f87171', fontSize: 12, margin: 0 }, children: error }), _jsx("button", { type: "submit", disabled: busy || !oldPw, style: { ...primary, opacity: busy || !oldPw ? 0.6 : 1 }, children: busy ? 'Changing…' : confirmLabel }), note && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#9ca3af' }, 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,35 @@
+// 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 { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { useExchangeContext } from '@sponsorcoin/spcoin-exchange-engine';
+import { AccountAvatar, TokenLogo } from '@sponsorcoin/spcoin-panels';
+import { MessagePanelReal } from './panels';
+const ROLE_TO_MODE = {
+    SPONSOR: SP_COIN_DISPLAY.SPONSOR_ACCOUNT,
+    RECIPIENT: SP_COIN_DISPLAY.RECIPIENT_ACCOUNT,
+    AGENT: SP_COIN_DISPLAY.AGENT_ACCOUNT,
+    ACCOUNT: SP_COIN_DISPLAY.ACTIVE_ACCOUNT,
+};
+function DefaultAccountRow({ entry }) {
+    const label = [entry.account.symbol, entry.account.name].filter(Boolean).join(' | ');
+    return (_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(AccountAvatar, { account: entry.account, mode: ROLE_TO_MODE[entry.role], roleLabel: entry.role, className: "h-8 w-8 rounded-full object-cover" }), _jsxs("span", { className: "text-sm", children: [_jsxs("span", { className: "font-semibold", children: [entry.role, ":"] }), " ", label] })] }), _jsx("div", { className: "pl-10 text-xs opacity-80 break-all", children: String(entry.account.address ?? '') }), entry.detail && _jsx("div", { className: "pl-10 text-xs opacity-80", children: entry.detail })] }));
+}
+/** The web app's MessageTokenRow, unchanged. */
+function DefaultTokenRow({ entry }) {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TokenLogo, { tokenContract: entry.token, className: "h-8 w-8 rounded-full object-contain" }), _jsxs("span", { className: "text-sm", children: [_jsxs("span", { className: "font-semibold", children: [entry.label, ":"] }), ' ', [entry.token.symbol, entry.token.name].filter(Boolean).join(': ')] })] }), entry.detail && _jsx("div", { className: "pl-10 text-xs opacity-80", children: entry.detail })] }));
+}
+export default function ConnectedMessagePanel({ renderAccountRow, renderTokenRow }) {
+    const { errorMessage } = useExchangeContext();
+    return (_jsx(MessagePanelReal, { errorMessage: errorMessage, renderAccountRow: renderAccountRow ?? ((entry, i) => _jsx(DefaultAccountRow, { entry: entry }, `${entry.role}-${i}`)), renderTokenRow: renderTokenRow ?? ((entry, i) => _jsx(DefaultTokenRow, { entry: entry }, `token-${i}`)) }));
+}

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,123 @@
+// 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 { useEffect, useMemo, useRef, useState } from 'react';
+import { CopyBtn } from './TokenSlotPanels';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { defaultMissingImage, previewNetworkStore, useExchangeContext, usePanelVisible, usePreviewNetworkChainId, } from '@sponsorcoin/spcoin-exchange-engine';
+import { getNetworkConfiguration } from '@sponsorcoin/spcoin-feeds/networks';
+import { getNetworkMetaData } from '@sponsorcoin/spcoin-panels';
+import { ReadOnlyMetaDataTable } from './panels';
+import { useWalletData } from './walletData';
+// text-sp-sm is a Tailwind token only the web app defines (var(--sp-text-sm), 1rem); an inline style gives every host the same size.
+const SP_TEXT_SM = { fontSize: 'var(--sp-text-sm, 1rem)' };
+/** 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 vNetworkMetaData = usePanelVisible(SP_COIN_DISPLAY.NETWORK_META_DATA);
+    const vNetworkLogo = usePanelVisible(SP_COIN_DISPLAY.NETWORK_LOGO);
+    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: "p-4 text-slate-200 text-center", style: SP_TEXT_SM, children: [_jsx("p", { className: "mb-2 font-semibold", children: "No network selected." }), _jsx("p", { className: "m-0", 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: "flex items-center justify-between w-full gap-2", children: [_jsx("a", { href: f.value, target: "_blank", rel: "noopener noreferrer", className: "underline decoration-slate-400/60 underline-offset-2 hover:decoration-slate-200 break-all", children: f.value }), _jsx(CopyBtn, { text: f.value })] })),
+            };
+        }
+        return { label: f.label, value: f.value };
+    });
+    return (_jsx("div", { id: "NETWORK_PANEL", children: vNetworkMetaData && (_jsx(ReadOnlyMetaDataTable, { rows: rows, logoURL: logoURL || defaultMissingImage, logoAlt: name, logoVisible: vNetworkLogo, 
+            // Network logos are already complete, self-contained circular brand marks with real transparent padding, so no navy fill behind
+            // them and no card frame around them (unlike token and account logos).
+            logoBackgroundClassName: "", logoContainerClassName: "p-2" })) }));
+}

package/dist/ConnectedPasswordPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type WalletSessionAdapter, type WalletSessionPhase } from './session/walletSession';
+export interface ConnectedPasswordPanelProps {
+    /** Where the host's wallet is: no answer yet, no wallet, locked, or unlocked. */
+    phase: WalletSessionPhase;
+    /** The host's create / unlock calls. */
+    adapter: Pick<WalletSessionAdapter, 'create' | 'unlock'>;
+    /** An error the host already has (for example its password-status check failed). */
+    hostError?: string;
+    /** Artwork above the form. */
+    icon?: React.ReactNode;
+}
+export default function ConnectedPasswordPanel({ phase, adapter, hostError, icon }: ConnectedPasswordPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ConnectedPasswordPanel.js

@@ -0,0 +1,30 @@
+// File: node_source/meritWallet/packages/@sponsorcoin/merit-wallet/src/ConnectedPasswordPanel.tsx
+//
+// 2026-10-08 (docs/meritWalletNpmDesignToDo.txt, table row 21) -- the PASSWORD_PANEL overlay slot, moved from the web app's
+// components/views/RadioOverlayPanels/PasswordPanel.tsx. The form is spcoin-panels' PasswordPanel; the rules (length, match, "Incorrect password.",
+// busy state) are the shared unlock gate in ./session/walletSession (the same function the Merit Wallet component's own password screen uses). What a
+// host supplies is the phase it knows and the two calls that create / unlock its wallet, so the web app passes walletState's and the
+// extension passes the vault's.
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { SP_COIN_DISPLAY } from '@sponsorcoin/spcoin-common/panels';
+import { PanelGate, PasswordPanel as PortablePasswordPanel } from '@sponsorcoin/spcoin-panels';
+import { passwordModeFor, submitWalletPassword } from './session/walletSession';
+export default function ConnectedPasswordPanel({ phase, adapter, hostError, icon }) {
+    const [error, setError] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+    const handleSubmit = async (password, confirmPassword) => {
+        setSubmitting(true);
+        setError('');
+        try {
+            const result = await submitWalletPassword(phase, adapter, password, confirmPassword);
+            if (!result.ok)
+                setError(result.error);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    return (_jsx(PanelGate, { panel: SP_COIN_DISPLAY.PASSWORD_PANEL, lazyLoad: false, children: _jsx(PortablePasswordPanel, { mode: passwordModeFor(phase), icon: icon, errorText: hostError || error, onSubmit: (pw, confirm) => void handleSubmit(pw, confirm), submitting: submitting, clearOnSubmit: 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,27 @@
+// 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.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } 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 = 'Delete wallet', confirmLabel = 'Delete wallet', footnote }) {
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [busy, setBusy] = useState(false);
+    return (_jsx("div", { id: "DELETE_WALLET_DIALOG", role: "dialog", "aria-modal": "true", style: { position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 12 }, children: _jsxs("form", { style: { boxSizing: 'border-box', width: '100%', maxWidth: 340, background: '#0E111B', border: '1px solid #7f1d1d', borderRadius: 12, padding: 16, color: '#fff', display: 'flex', flexDirection: 'column', gap: 8 }, onSubmit: (e) => {
+                e.preventDefault();
+                setBusy(true);
+                setError('');
+                confirmDelete(password)
+                    .catch((err) => {
+                    setError(err instanceof Error ? err.message : 'The wallet could not be deleted.');
+                    setPassword('');
+                })
+                    .finally(() => setBusy(false));
+            }, children: [_jsx("p", { style: { margin: 0, fontWeight: 700 }, children: title }), _jsx("p", { style: { margin: 0, fontSize: 12, color: '#fbbf24' }, 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).' }), _jsx("input", { type: "password", autoFocus: true, autoComplete: "current-password", placeholder: "Enter your password to confirm", value: password, onChange: (e) => setPassword(e.target.value), style: { boxSizing: 'border-box', width: '100%', borderRadius: 8, border: '1px solid #334155', background: '#0b0e17', padding: '8px 12px', color: '#fff', font: 'inherit', outline: 'none' } }), error && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#f87171' }, children: error }), _jsx("button", { type: "submit", disabled: busy || !password, style: { borderRadius: 8, border: 0, background: '#b91c1c', color: '#fff', padding: '8px 16px', fontWeight: 600, cursor: 'pointer', font: 'inherit', opacity: busy || !password ? 0.6 : 1 }, children: busy ? 'Deleting…' : confirmLabel }), _jsx("button", { type: "button", onClick: onClose, style: { borderRadius: 8, border: '1px solid #334155', background: 'transparent', color: '#fff', padding: '8px 16px', cursor: 'pointer', font: 'inherit' }, children: "Cancel" }), footnote && _jsx("p", { style: { margin: 0, fontSize: 12, color: '#9ca3af' }, children: footnote })] }) }));
+}