From 3b88dcbf98980ef2e80d01425283ab34cd122c13 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:36:57 -0300
Subject: [PATCH 001/121] feat(carpincho-wallet): bring feature-ready wallet
 from darkpool

Private key import/export, shared runtime config for the extension worker,
content-script injection on all URLs, configurable password strength, and the
Amulet DevNet faucet UI. Imported as a subtree from the darkpool line on top of
the canton-barebones-splice wallet-service.
---
 carpincho-wallet/.env.example                 |   4 +
 carpincho-wallet/public/manifest.json         |  14 +-
 carpincho-wallet/src/api/walletService.ts     |  43 +-
 .../src/cip56/amuletPreapproval.ts            |  25 ++
 .../src/components/AssetsPanel.tsx            |  40 +-
 .../src/components/DarUploadPanel.tsx         |  74 ++++
 carpincho-wallet/src/components/HomeTabs.tsx  |   8 +
 .../src/components/LedgerToolsPanel.tsx       | 398 ++++++++++++++++++
 .../components/PasswordStrengthIndicator.tsx  |   6 +-
 .../src/components/PrivateKeyPanel.tsx        | 176 ++++++++
 .../src/components/menu/MenuSheet.tsx         |   5 +
 .../src/components/menu/screens.ts            |  16 +-
 carpincho-wallet/src/config/runtimeConfig.ts  |  73 +++-
 carpincho-wallet/src/ledger/contracts.ts      | 212 ++++++++++
 carpincho-wallet/src/utils/json.ts            | 218 ++++++++++
 carpincho-wallet/src/vault/VaultContext.tsx   |  15 +
 carpincho-wallet/src/vault/keypair.ts         |  16 +-
 .../src/vault/passwordStrength.ts             |  14 +-
 .../src/views/ConnectionSettingsView.tsx      |   2 +-
 .../views/onboarding/CreateFirstAccount.tsx   |  40 +-
 carpincho-wallet/src/vite-env.d.ts            |   8 +
 .../test/api/walletService.test.ts            |  71 ++++
 .../test/cip56/amuletPreapproval.test.ts      |  60 +++
 .../test/components/AccountCard.test.tsx      |   1 +
 .../test/components/AccountsDialog.test.tsx   |   1 +
 .../test/components/AssetsPanel.test.tsx      |  61 ++-
 .../components/CreateAccountForm.test.tsx     |   1 +
 .../test/components/DarUploadPanel.test.tsx   |  39 ++
 .../test/components/Header.test.tsx           |   1 +
 .../test/components/HomeTabs.test.tsx         |   4 +-
 .../test/components/LedgerToolsPanel.test.tsx | 271 ++++++++++++
 .../test/components/MenuSheet.test.tsx        |  22 +
 .../test/components/PrivateKeyPanel.test.tsx  | 205 +++++++++
 .../test/components/SecurityPanel.test.tsx    |   1 +
 .../test/components/SendConfirm.test.tsx      |   1 +
 .../test/components/TokenDetailSheet.test.tsx |   1 +
 .../test/components/TransfersPanel.test.tsx   |   1 +
 .../test/config/runtimeConfig.test.ts         |  77 ++++
 carpincho-wallet/test/extensionBridge.test.ts |   5 +-
 .../test/extensionManifest.test.ts            |   6 +-
 .../hooks/useWalletServiceStatus.test.tsx     |   2 +-
 .../test/ledger/contracts.test.ts             | 265 ++++++++++++
 carpincho-wallet/test/utils/json.test.ts      |  33 ++
 .../test/vault/exportPrivateKey.test.tsx      |  71 ++++
 carpincho-wallet/test/vault/keypair.test.ts   |  26 ++
 .../test/vault/passwordAcceptance.test.tsx    |  19 +
 .../test/vault/passwordStrength.test.ts       |  23 +
 .../views/ConnectionSettingsView.test.tsx     |   2 +-
 .../test/views/CreateVault.test.tsx           |   1 +
 .../test/views/OnboardingFlow.test.tsx        |  45 +-
 50 files changed, 2672 insertions(+), 51 deletions(-)
 create mode 100644 carpincho-wallet/.env.example
 create mode 100644 carpincho-wallet/src/components/DarUploadPanel.tsx
 create mode 100644 carpincho-wallet/src/components/LedgerToolsPanel.tsx
 create mode 100644 carpincho-wallet/src/components/PrivateKeyPanel.tsx
 create mode 100644 carpincho-wallet/src/ledger/contracts.ts
 create mode 100644 carpincho-wallet/test/api/walletService.test.ts
 create mode 100644 carpincho-wallet/test/components/DarUploadPanel.test.tsx
 create mode 100644 carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
 create mode 100644 carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
 create mode 100644 carpincho-wallet/test/config/runtimeConfig.test.ts
 create mode 100644 carpincho-wallet/test/ledger/contracts.test.ts
 create mode 100644 carpincho-wallet/test/utils/json.test.ts
 create mode 100644 carpincho-wallet/test/vault/exportPrivateKey.test.tsx
 create mode 100644 carpincho-wallet/test/vault/keypair.test.ts
 create mode 100644 carpincho-wallet/test/vault/passwordAcceptance.test.tsx
 create mode 100644 carpincho-wallet/test/vault/passwordStrength.test.ts

diff --git a/carpincho-wallet/.env.example b/carpincho-wallet/.env.example
new file mode 100644
index 00000000..fff96df2
--- /dev/null
+++ b/carpincho-wallet/.env.example
@@ -0,0 +1,4 @@
+# Optional. Minimum zxcvbn strength score (0-4) required to set a vault password.
+# 0 too weak, 1 very guessable, 2 fair, 3 strong, 4 excellent.
+# Defaults to 1 when unset. Use 3 for a security-conscious build.
+# VITE_MIN_PASSWORD_SCORE=1
diff --git a/carpincho-wallet/public/manifest.json b/carpincho-wallet/public/manifest.json
index 0182b277..73176b50 100644
--- a/carpincho-wallet/public/manifest.json
+++ b/carpincho-wallet/public/manifest.json
@@ -26,20 +26,10 @@
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://localhost/*",
-        "http://127.0.0.1/*",
-        "https://localhost/*",
-        "https://127.0.0.1/*"
-      ],
+      "matches": ["<all_urls>"],
       "js": ["contentScript.js"],
       "run_at": "document_start"
     }
   ],
-  "host_permissions": [
-    "http://localhost/*",
-    "http://127.0.0.1/*",
-    "https://localhost/*",
-    "https://127.0.0.1/*"
-  ]
+  "host_permissions": ["<all_urls>"]
 }
diff --git a/carpincho-wallet/src/api/walletService.ts b/carpincho-wallet/src/api/walletService.ts
index 285aa5c6..f38daa80 100644
--- a/carpincho-wallet/src/api/walletService.ts
+++ b/carpincho-wallet/src/api/walletService.ts
@@ -1,4 +1,4 @@
-import { loadRuntimeConfig } from '@/config/runtimeConfig'
+import { loadRuntimeConfigAsync } from '@/config/runtimeConfig'
 
 export interface JsonRpcErrorObject {
   code: number
@@ -52,9 +52,15 @@ export interface WalletServiceStatusResponse {
   }
 }
 
-const rpcUrl = (options?: WalletServiceRequestOptions): string =>
+export interface DarUploadResponse {
+  ok: true
+  vetAllPackages: true
+  response: unknown
+}
+
+const rpcUrl = async (options?: WalletServiceRequestOptions): Promise<string> =>
   options?.rpcUrl?.trim() === undefined || options.rpcUrl.trim() === ''
-    ? loadRuntimeConfig().walletServiceRpcUrl
+    ? (await loadRuntimeConfigAsync()).walletServiceRpcUrl
     : options.rpcUrl.trim()
 
 export const walletServiceRequest = async <T>(
@@ -62,7 +68,7 @@ export const walletServiceRequest = async <T>(
   params?: unknown,
   options?: WalletServiceRequestOptions,
 ): Promise<T> => {
-  const response = await fetch(rpcUrl(options), {
+  const response = await fetch(await rpcUrl(options), {
     method: 'POST',
     headers: { 'content-type': 'application/json' },
     body: JSON.stringify({
@@ -110,9 +116,13 @@ export const getWalletServiceNetworkId = async (
 
 type AdminRequestOptions = WalletServiceRequestOptions
 
-const adminUrl = (path: string, options?: AdminRequestOptions): string => {
-  const base = rpcUrl(options).replace(/\/rpc\/?$/, '')
-  return `${base}${path}`
+// Reuses the configured JSON-RPC base so admin utilities follow the same wallet-service target.
+const adminUrl = async (path: string, options?: AdminRequestOptions): Promise<string> => {
+  const base =
+    options?.rpcUrl?.trim() === undefined || options.rpcUrl.trim() === ''
+      ? (await loadRuntimeConfigAsync()).walletServiceRpcUrl
+      : options.rpcUrl.trim()
+  return `${base.replace(/\/rpc\/?$/, '')}${path}`
 }
 
 export const walletServiceAdminPost = async <TResult>(
@@ -120,7 +130,7 @@ export const walletServiceAdminPost = async <TResult>(
   body: Record<string, unknown>,
   options?: AdminRequestOptions,
 ): Promise<TResult> => {
-  const response = await fetch(adminUrl(path, options), {
+  const response = await fetch(await adminUrl(path, options), {
     method: 'POST',
     headers: { 'content-type': 'application/json' },
     body: JSON.stringify(body),
@@ -132,6 +142,23 @@ export const walletServiceAdminPost = async <TResult>(
   return (await response.json()) as TResult
 }
 
+// Sends compiled DAML archives as raw bytes so wallet-service can keep the ledger token boundary.
+export const uploadDarFile = async (
+  file: File,
+  options?: AdminRequestOptions,
+): Promise<DarUploadResponse> => {
+  const response = await fetch(await adminUrl('/admin/dars', options), {
+    method: 'POST',
+    headers: { 'content-type': 'application/octet-stream' },
+    body: file,
+  })
+  if (!response.ok) {
+    const text = await response.text().catch(() => '')
+    throw new Error(`wallet-service HTTP ${response.status}${text === '' ? '' : `: ${text}`}`)
+  }
+  return (await response.json()) as DarUploadResponse
+}
+
 export const prepareCreateParty = async (
   body: { publicKeyBase64: string; partyHint: string },
   options?: AdminRequestOptions,
diff --git a/carpincho-wallet/src/cip56/amuletPreapproval.ts b/carpincho-wallet/src/cip56/amuletPreapproval.ts
index 9f91ddab..733ff067 100644
--- a/carpincho-wallet/src/cip56/amuletPreapproval.ts
+++ b/carpincho-wallet/src/cip56/amuletPreapproval.ts
@@ -21,6 +21,10 @@ export interface AmuletPreapprovalActionParams {
   recordTransaction?: VaultContextValue['recordTransaction']
 }
 
+export interface AmuletTapApi {
+  tapAmulet: (params: AmuletPreapprovalActionParams) => Promise<ExecutePreparedResponse>
+}
+
 // Detects whether wallet-service returned a real command that needs signing.
 const hasCommands = (commands: unknown): boolean =>
   Array.isArray(commands) ? commands.length > 0 : commands !== undefined && commands !== null
@@ -37,6 +41,27 @@ export const getAmuletPreapprovalStatus = async (
 ): Promise<AmuletPreapprovalStatus> =>
   await walletServiceRequest<AmuletPreapprovalStatus>('amulet.preapproval.status', { receiver })
 
+// Requests the fixed 100 AMT DevNet faucet command while Carpincho keeps the receiver key local.
+export const tapAmulet = async ({
+  account,
+  signMessage,
+  recordTransaction,
+}: AmuletPreapprovalActionParams): Promise<ExecutePreparedResponse> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<WalletServiceCommands>(
+    'amulet.tap',
+    { receiver: account.partyId },
+  )
+  return await executePreparedCommands({
+    account,
+    commands,
+    disclosedContracts,
+    method: 'amulet.tap',
+    summary: 'Tap 100 AMT',
+    signMessage,
+    recordTransaction,
+  })
+}
+
 // Enables Amulet auto-accept while keeping the receiver signature inside Carpincho.
 export const createAmuletPreapproval = async ({
   account,
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 07a62bb6..e812cf65 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,9 +1,12 @@
 import { useState } from 'react'
+import { type AmuletTapApi, tapAmulet } from '@/cip56/amuletPreapproval'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
 import { TokenRow } from '@/components/TokenRow'
+import { PrimaryButton } from '@/components/ui/Button'
 import { LoadingState } from '@/components/ui/LoadingState'
+import { toast } from '@/components/ui/toast'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -13,14 +16,19 @@ export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
   sendApi?: Cip56SendApi
+  tapApi?: AmuletTapApi
 }
 
+const defaultTapApi: AmuletTapApi = { tapAmulet }
+
 // Renders active CIP-56 token holdings as activity-style rows that open a detail modal.
-export const AssetsPanel = ({ account, api, sendApi }: AssetsPanelProps): JSX.Element => {
+export const AssetsPanel = ({ account, api, sendApi, tapApi }: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [selected, setSelected] = useState<TokenHoldingSummary | null>(null)
+  const [tapping, setTapping] = useState(false)
   const { summaries, loading, error, refresh } = useTokenHoldings(activeAccount, { api })
+  const activeTapApi = tapApi ?? defaultTapApi
 
   if (activeAccount === undefined) {
     return (
@@ -30,8 +38,38 @@ export const AssetsPanel = ({ account, api, sendApi }: AssetsPanelProps): JSX.El
     )
   }
 
+  // Runs the fixed faucet request and reloads balances once the ledger accepts it.
+  const onTapAmulet = async (): Promise<void> => {
+    setTapping(true)
+    try {
+      await activeTapApi.tapAmulet({
+        account: activeAccount,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      await refresh()
+      toast.success('Tapped 100 AMT')
+    } catch (tapError) {
+      toast.error(tapError instanceof Error ? tapError.message : 'Amulet tap failed')
+    } finally {
+      setTapping(false)
+    }
+  }
+
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <div className="flex justify-end">
+        <PrimaryButton
+          className="px-3 py-1.5 text-[0.82rem]"
+          disabled={tapping}
+          onClick={() => {
+            void onTapAmulet()
+          }}
+        >
+          {tapping ? 'Tapping...' : 'Tap Amulet'}
+        </PrimaryButton>
+      </div>
+
       {error === undefined ? null : (
         <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
           {error}
diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
new file mode 100644
index 00000000..08f3a1cd
--- /dev/null
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -0,0 +1,74 @@
+import { useState } from 'react'
+import { type DarUploadResponse, uploadDarFile } from '@/api/walletService'
+import { PrimaryButton } from '@/components/ui/Button'
+import { toast } from '@/components/ui/toast'
+
+export interface DarUploadApi {
+  uploadDarFile: (file: File) => Promise<DarUploadResponse>
+}
+
+interface DarUploadPanelProps {
+  api?: DarUploadApi
+}
+
+const defaultApi: DarUploadApi = { uploadDarFile }
+
+// Development-only utility for uploading compiled DAML archives through wallet-service.
+export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.Element => {
+  const [file, setFile] = useState<File | undefined>()
+  const [uploading, setUploading] = useState(false)
+  const [uploadedFileName, setUploadedFileName] = useState<string | undefined>()
+
+  // Keeps validation and toast feedback inside the dev-only upload utility.
+  const onUpload = async (): Promise<void> => {
+    if (file === undefined) {
+      toast.warning('Select a DAR file')
+      return
+    }
+    setUploading(true)
+    setUploadedFileName(undefined)
+    try {
+      await api.uploadDarFile(file)
+      setUploadedFileName(file.name)
+      toast.success(`${file.name} uploaded`)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error))
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  return (
+    <section className="flex flex-col gap-4 px-1 py-2">
+      <label className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground">
+        DAR file
+        <input
+          type="file"
+          accept=".dar,application/octet-stream"
+          className="block w-full rounded-md border border-border bg-surface px-3 py-2 text-[0.95rem] font-medium normal-case tracking-normal text-foreground file:mr-3 file:rounded-sm file:border-0 file:bg-primary-soft file:px-3 file:py-1.5 file:text-primary file:font-semibold"
+          onChange={(event) => {
+            setUploadedFileName(undefined)
+            setFile(event.currentTarget.files?.[0])
+          }}
+        />
+      </label>
+      <PrimaryButton
+        className="w-full"
+        disabled={file === undefined || uploading}
+        onClick={() => {
+          void onUpload()
+        }}
+      >
+        {uploading ? 'Uploading...' : 'Upload DAR'}
+      </PrimaryButton>
+      {uploadedFileName === undefined ? null : (
+        <p
+          role="status"
+          className="text-center text-[0.9rem] font-semibold text-success"
+        >
+          {uploadedFileName} uploaded
+        </p>
+      )}
+    </section>
+  )
+}
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 0062b1f1..e841e978 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
+import { LedgerToolsPanel } from '@/components/LedgerToolsPanel'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TransfersPanel } from '@/components/TransfersPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
@@ -69,6 +70,7 @@ export const HomeTabs = ({
           ) : null}
         </TabTrigger>
         <TabTrigger value="activity">Activity</TabTrigger>
+        <TabTrigger value="utils">Utils</TabTrigger>
       </TabsList>
       <TabContent
         value="assets"
@@ -98,6 +100,12 @@ export const HomeTabs = ({
       >
         <ActivityList transactions={activeTransactions} />
       </TabContent>
+      <TabContent
+        value="utils"
+        className={TAB_CONTENT_CLASS}
+      >
+        <LedgerToolsPanel account={account} />
+      </TabContent>
     </Tabs>
   )
 }
diff --git a/carpincho-wallet/src/components/LedgerToolsPanel.tsx b/carpincho-wallet/src/components/LedgerToolsPanel.tsx
new file mode 100644
index 00000000..782e6817
--- /dev/null
+++ b/carpincho-wallet/src/components/LedgerToolsPanel.tsx
@@ -0,0 +1,398 @@
+import { useState } from 'react'
+import { DarUploadPanel } from '@/components/DarUploadPanel'
+import { Alert } from '@/components/ui/Alert'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
+import { INPUT_CLASS, TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import {
+  type ActiveContract,
+  createContract,
+  exerciseContract,
+  listActiveContracts,
+} from '@/ledger/contracts'
+import { cn } from '@/utils/cn'
+import { formatJsonInput, parseJsonObject, prettyJson } from '@/utils/json'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export interface LedgerToolsApi {
+  createContract: typeof createContract
+  exerciseContract: typeof exerciseContract
+  listActiveContracts: typeof listActiveContracts
+}
+
+interface LedgerToolsPanelProps {
+  account?: AccountPublic
+  api?: LedgerToolsApi
+}
+
+const defaultApi: LedgerToolsApi = { createContract, exerciseContract, listActiveContracts }
+
+const EMPTY_JSON = '{}'
+
+// Formats a ledger JSON textarea when possible without interrupting partially typed input.
+const formatJsonTextarea = (
+  value: string,
+  setValue: (value: string) => void,
+  label: string,
+): void => {
+  try {
+    setValue(formatJsonInput(value, label))
+  } catch {
+    return
+  }
+}
+
+// Renders one active contract with the id first for copying/inspection.
+const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
+  <article className="rounded-md border border-border bg-surface p-3">
+    <div className="flex flex-col gap-1">
+      <span className="text-[0.72rem] font-semibold uppercase text-muted-foreground">
+        Contract ID
+      </span>
+      <span className="break-all font-mono text-[0.82rem] text-foreground">
+        {contract.contractId}
+      </span>
+    </div>
+    <div className="mt-3 grid gap-1">
+      <span className="text-[0.72rem] font-semibold uppercase text-muted-foreground">Template</span>
+      <span className="break-all font-mono text-[0.82rem] text-muted-foreground">
+        {contract.templateId}
+      </span>
+    </div>
+    {contract.createdOffset === undefined ? null : (
+      <p className="mt-3 text-[0.8rem] font-medium text-muted-foreground">
+        Offset {contract.createdOffset}
+      </p>
+    )}
+    <pre className="mt-3 max-h-48 overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-[0.78rem] leading-relaxed text-foreground">
+      {prettyJson(contract.createArgument)}
+    </pre>
+  </article>
+)
+
+// Development ledger utility for generic creates and active-contract inspection.
+export const LedgerToolsPanel = ({
+  account,
+  api = defaultApi,
+}: LedgerToolsPanelProps): JSX.Element => {
+  const vault = useVault()
+  const [createTemplateId, setCreateTemplateId] = useState('')
+  const [createJson, setCreateJson] = useState(EMPTY_JSON)
+  const [exerciseTemplateId, setExerciseTemplateId] = useState('')
+  const [exerciseContractId, setExerciseContractId] = useState('')
+  const [exerciseChoice, setExerciseChoice] = useState('')
+  const [exerciseJson, setExerciseJson] = useState(EMPTY_JSON)
+  const [filterTemplateId, setFilterTemplateId] = useState('')
+  const [contracts, setContracts] = useState<ActiveContract[]>([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+  const [createdUpdateId, setCreatedUpdateId] = useState<string | undefined>()
+  const [exercisedUpdateId, setExercisedUpdateId] = useState<string | undefined>()
+
+  // Reloads ACS for the active party and preserves any optional template filter.
+  const refreshContracts = async (templateId = filterTemplateId): Promise<void> => {
+    if (account === undefined) {
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    try {
+      setContracts(
+        await api.listActiveContracts({
+          partyId: account.partyId,
+          ...(templateId.trim() === '' ? {} : { templateId: templateId.trim() }),
+        }),
+      )
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Submits one generic CreateCommand and refreshes ACS so created CIDs are visible.
+  const onCreate = async (): Promise<void> => {
+    if (account === undefined) {
+      return
+    }
+    const templateId = createTemplateId.trim()
+    if (templateId === '') {
+      setError('Template ID is required')
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    setCreatedUpdateId(undefined)
+    try {
+      const createArguments = parseJsonObject(createJson, 'Create arguments')
+      setCreateJson(prettyJson(createArguments))
+      const result = await api.createContract({
+        account,
+        templateId,
+        createArguments,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setCreatedUpdateId(result.updateId)
+      toast.success('Contract created')
+      await refreshContracts(templateId)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Submits one generic ExerciseCommand and refreshes ACS because the choice may archive/create.
+  const onExercise = async (): Promise<void> => {
+    if (account === undefined) {
+      return
+    }
+    const templateId = exerciseTemplateId.trim()
+    const contractId = exerciseContractId.trim()
+    const choice = exerciseChoice.trim()
+    if (templateId === '') {
+      setError('Exercise template ID is required')
+      return
+    }
+    if (contractId === '') {
+      setError('Contract ID is required')
+      return
+    }
+    if (choice === '') {
+      setError('Choice is required')
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    setExercisedUpdateId(undefined)
+    try {
+      const choiceArgument = parseJsonObject(exerciseJson, 'Choice argument')
+      setExerciseJson(prettyJson(choiceArgument))
+      const result = await api.exerciseContract({
+        account,
+        templateId,
+        contractId,
+        choice,
+        choiceArgument,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setExercisedUpdateId(result.updateId)
+      toast.success('Choice exercised')
+      await refreshContracts()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (account === undefined) {
+    return (
+      <section className="px-1 py-2">
+        <Alert variant="warning">Create an account before using ledger tools.</Alert>
+      </section>
+    )
+  }
+
+  return (
+    <Tabs
+      defaultValue="create"
+      className="flex min-h-0 flex-1 flex-col"
+    >
+      <TabsList className="gap-4">
+        <TabTrigger value="create">Create</TabTrigger>
+        <TabTrigger value="exercise">Exercise</TabTrigger>
+        <TabTrigger value="contracts">Contracts</TabTrigger>
+        <TabTrigger value="dar">DAR</TabTrigger>
+      </TabsList>
+      <TabContent
+        value="create"
+        className="min-h-0 overflow-y-auto px-1 py-3"
+      >
+        <form
+          className="flex flex-col gap-4"
+          onSubmit={(event) => {
+            event.preventDefault()
+            void onCreate()
+          }}
+        >
+          <label
+            htmlFor="ledger-create-template-id"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Template ID
+            <TextInput
+              id="ledger-create-template-id"
+              value={createTemplateId}
+              onChange={(event) => setCreateTemplateId(event.currentTarget.value)}
+              placeholder="package:Module:Template"
+              className="font-mono text-[0.9rem] normal-case"
+            />
+          </label>
+          <label
+            htmlFor="ledger-create-arguments-json"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Create arguments JSON
+            <textarea
+              id="ledger-create-arguments-json"
+              value={createJson}
+              onChange={(event) => setCreateJson(event.currentTarget.value)}
+              onBlur={() => formatJsonTextarea(createJson, setCreateJson, 'Create arguments')}
+              spellCheck={false}
+              className={cn(INPUT_CLASS, 'min-h-44 resize-y font-mono text-[0.85rem] normal-case')}
+            />
+          </label>
+          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+          {createdUpdateId === undefined ? null : (
+            <Alert variant="success">Created update {createdUpdateId}</Alert>
+          )}
+          <PrimaryButton
+            type="submit"
+            className="w-full"
+            disabled={busy}
+          >
+            {busy ? 'Creating...' : 'Create contract'}
+          </PrimaryButton>
+        </form>
+      </TabContent>
+      <TabContent
+        value="exercise"
+        className="min-h-0 overflow-y-auto px-1 py-3"
+      >
+        <form
+          className="flex flex-col gap-4"
+          onSubmit={(event) => {
+            event.preventDefault()
+            void onExercise()
+          }}
+        >
+          <label
+            htmlFor="ledger-exercise-template-id"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Exercise template ID
+            <TextInput
+              id="ledger-exercise-template-id"
+              value={exerciseTemplateId}
+              onChange={(event) => setExerciseTemplateId(event.currentTarget.value)}
+              placeholder="package:Module:TemplateOrInterface"
+              className="font-mono text-[0.9rem] normal-case"
+            />
+          </label>
+          <label
+            htmlFor="ledger-exercise-contract-id"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Contract ID
+            <TextInput
+              id="ledger-exercise-contract-id"
+              value={exerciseContractId}
+              onChange={(event) => setExerciseContractId(event.currentTarget.value)}
+              placeholder="active contract id"
+              className="font-mono text-[0.9rem] normal-case"
+            />
+          </label>
+          <label
+            htmlFor="ledger-exercise-choice"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Choice
+            <TextInput
+              id="ledger-exercise-choice"
+              value={exerciseChoice}
+              onChange={(event) => setExerciseChoice(event.currentTarget.value)}
+              placeholder="Template_Choice"
+              className="font-mono text-[0.9rem] normal-case"
+            />
+          </label>
+          <label
+            htmlFor="ledger-exercise-choice-json"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Choice argument JSON
+            <textarea
+              id="ledger-exercise-choice-json"
+              value={exerciseJson}
+              onChange={(event) => setExerciseJson(event.currentTarget.value)}
+              onBlur={() => formatJsonTextarea(exerciseJson, setExerciseJson, 'Choice argument')}
+              spellCheck={false}
+              className={cn(INPUT_CLASS, 'min-h-44 resize-y font-mono text-[0.85rem] normal-case')}
+            />
+          </label>
+          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+          {exercisedUpdateId === undefined ? null : (
+            <Alert variant="success">Exercised update {exercisedUpdateId}</Alert>
+          )}
+          <PrimaryButton
+            type="submit"
+            className="w-full"
+            disabled={busy}
+          >
+            {busy ? 'Exercising...' : 'Exercise choice'}
+          </PrimaryButton>
+        </form>
+      </TabContent>
+      <TabContent
+        value="contracts"
+        className="min-h-0 overflow-y-auto px-1 py-3"
+      >
+        <section className="flex flex-col gap-4">
+          <label
+            htmlFor="ledger-filter-template-id"
+            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
+          >
+            Filter template ID
+            <TextInput
+              id="ledger-filter-template-id"
+              value={filterTemplateId}
+              onChange={(event) => setFilterTemplateId(event.currentTarget.value)}
+              placeholder="optional"
+              className="font-mono text-[0.9rem] normal-case"
+            />
+          </label>
+          <SecondaryButton
+            className="w-full"
+            disabled={busy}
+            onClick={() => {
+              void refreshContracts()
+            }}
+          >
+            {busy ? 'Refreshing...' : 'Refresh contracts'}
+          </SecondaryButton>
+          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+          {contracts.length === 0 ? (
+            <p className="rounded-md border border-dashed border-border px-3 py-6 text-center text-[0.9rem] font-medium text-muted-foreground">
+              No active contracts loaded.
+            </p>
+          ) : (
+            <div className="flex flex-col gap-3">
+              {contracts.map((contract) => (
+                <ContractCard
+                  key={contract.contractId}
+                  contract={contract}
+                />
+              ))}
+            </div>
+          )}
+        </section>
+      </TabContent>
+      <TabContent
+        value="dar"
+        className="min-h-0 overflow-y-auto px-1 py-3"
+      >
+        <DarUploadPanel />
+      </TabContent>
+    </Tabs>
+  )
+}
diff --git a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
index e05354b3..078fbe3e 100644
--- a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
+++ b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@/components/ui/Tooltip'
-import { MIN_PASSWORD_LENGTH, scorePassword } from '@/vault/passwordStrength'
+import { MIN_PASSWORD_SCORE, scorePassword } from '@/vault/passwordStrength'
 
 type Tier = { segmentColor: string; labelColor: string; label: string }
 
@@ -14,6 +14,8 @@ const EXCELLENT: Tier = {
 
 const TIERS: readonly Tier[] = [TOO_WEAK, TOO_WEAK, FAIR, STRONG, EXCELLENT]
 
+const REQUIRED_LABEL = (TIERS[MIN_PASSWORD_SCORE] ?? STRONG).label
+
 type Props = {
   password: string
   id?: string
@@ -47,7 +49,7 @@ export const PasswordStrengthIndicator = ({ password, id }: Props): JSX.Element
       </div>
 
       <p className="flex items-center gap-1 text-[0.8rem] text-soft">
-        {MIN_PASSWORD_LENGTH} characters minimum, <b>"Strong"</b> or better
+        <b>"{REQUIRED_LABEL}"</b> or better
         <Tooltip
           label="Password recommendations"
           content={
diff --git a/carpincho-wallet/src/components/PrivateKeyPanel.tsx b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
new file mode 100644
index 00000000..d3447947
--- /dev/null
+++ b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
@@ -0,0 +1,176 @@
+import { type FormEvent, useState } from 'react'
+import { getWalletServiceNetworkId } from '@/api/walletService'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { COPY_ICON } from '@/components/ui/icons'
+import { PasswordInput } from '@/components/ui/PasswordInput'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import { copyText } from '@/utils/clipboard'
+import { derivePublicKeyBase64 } from '@/vault/keypair'
+import { useVault } from '@/vault/useVault'
+
+interface ImportPrivateKeyFormProps {
+  onImported?: () => void
+}
+
+interface ImportState {
+  partyId: string
+  partyName: string
+  privateKey: string
+}
+
+const EMPTY_IMPORT_STATE: ImportState = {
+  partyId: '',
+  partyName: '',
+  privateKey: '',
+}
+
+// Imports an existing Canton party by storing its supplied secret in the encrypted vault.
+export const ImportPrivateKeyForm = ({ onImported }: ImportPrivateKeyFormProps): JSX.Element => {
+  const v = useVault()
+  const [state, setState] = useState<ImportState>(EMPTY_IMPORT_STATE)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const onChange = (field: keyof ImportState, value: string): void => {
+    setState((current) => ({ ...current, [field]: value }))
+    setError(null)
+  }
+
+  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault()
+    const partyId = state.partyId.trim()
+    const name = state.partyName.trim()
+    const privateKeyHex = state.privateKey.trim().toLowerCase()
+    if (partyId === '' || name === '' || privateKeyHex === '') {
+      setError('All fields are required.')
+      return
+    }
+
+    setBusy(true)
+    try {
+      const publicKeyBase64 = await derivePublicKeyBase64(privateKeyHex)
+      const network = await getWalletServiceNetworkId()
+      await v.addAccount({
+        name,
+        partyId,
+        privateKeyHex,
+        publicKeyBase64,
+        network,
+      })
+      setState(EMPTY_IMPORT_STATE)
+      toast.success('Private key imported.')
+      onImported?.()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Import failed.'
+      setError(message)
+      toast.error(`Import private key failed: ${message}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const hasError = error !== null
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="flex flex-col gap-4"
+    >
+      <div>
+        <label htmlFor="import-party-id">Party ID</label>
+        <TextInput
+          id="import-party-id"
+          type="text"
+          className="font-mono"
+          value={state.partyId}
+          onChange={(event) => onChange('partyId', event.target.value)}
+          placeholder="alice::fingerprint"
+          error={hasError && state.partyId.trim() === ''}
+          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
+        />
+      </div>
+      <div>
+        <label htmlFor="import-party-name">Party name</label>
+        <TextInput
+          id="import-party-name"
+          type="text"
+          value={state.partyName}
+          onChange={(event) => onChange('partyName', event.target.value)}
+          placeholder="alice"
+          error={hasError && state.partyName.trim() === ''}
+          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
+        />
+      </div>
+      <div>
+        <label htmlFor="import-private-key">Private key</label>
+        <PasswordInput
+          id="import-private-key"
+          className="font-mono"
+          value={state.privateKey}
+          onChange={(event) => onChange('privateKey', event.target.value)}
+          placeholder="64-character Ed25519 private key"
+          autoComplete="off"
+          error={hasError && state.privateKey.trim() === ''}
+          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
+        />
+      </div>
+      {hasError && (
+        <p
+          id="import-private-key-error"
+          className="text-[0.85rem] text-danger"
+        >
+          {error}
+        </p>
+      )}
+      <PrimaryButton
+        type="submit"
+        disabled={busy}
+      >
+        {busy ? 'Importing...' : 'Import private key'}
+      </PrimaryButton>
+    </form>
+  )
+}
+
+// Reveals the selected party secret only through the explicit Settings export action.
+export const ExportPrivateKeyView = (): JSX.Element => {
+  const v = useVault()
+  const account = v.primary
+  if (account === null) {
+    return (
+      <p className="rounded-md border border-border bg-muted p-3 text-[0.92rem] text-muted-foreground">
+        No selected account.
+      </p>
+    )
+  }
+
+  let privateKey: string
+  try {
+    privateKey = v.exportPrivateKey(account.id)
+  } catch (err) {
+    const message = err instanceof Error ? err.message : 'Private key unavailable.'
+    return <p className="text-[0.9rem] text-danger">{message}</p>
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-md border border-border bg-muted p-3">
+        <p className="font-semibold text-foreground">{account.name}</p>
+        <p className="mt-1 break-all font-mono text-[0.82rem] text-muted-foreground">
+          {account.partyId}
+        </p>
+      </div>
+      <div>
+        <p className="mb-2 text-[0.85rem] font-semibold text-muted-foreground">Private key</p>
+        <p className="max-h-40 overflow-y-auto break-all rounded-md border border-border-strong bg-surface p-3 font-mono text-[0.82rem] text-foreground">
+          {privateKey}
+        </p>
+      </div>
+      <SecondaryButton onClick={() => copyText(privateKey, 'Private key copied.')}>
+        {COPY_ICON}
+        Copy private key
+      </SecondaryButton>
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/components/menu/MenuSheet.tsx b/carpincho-wallet/src/components/menu/MenuSheet.tsx
index 7d4507a9..3b193c87 100644
--- a/carpincho-wallet/src/components/menu/MenuSheet.tsx
+++ b/carpincho-wallet/src/components/menu/MenuSheet.tsx
@@ -3,6 +3,7 @@ import { MenuList } from '@/components/menu/MenuList'
 import { type Direction, MENU_LISTS, SCREENS, type Screen } from '@/components/menu/screens'
 import { ThemeMenu } from '@/components/menu/ThemeMenu'
 import { WalletConnectMenu } from '@/components/menu/WalletConnectMenu'
+import { ExportPrivateKeyView, ImportPrivateKeyForm } from '@/components/PrivateKeyPanel'
 import { AutoLockList, PasswordForm } from '@/components/SecurityPanel'
 import { Sheet } from '@/components/ui/Sheet'
 import { isExtensionRuntime } from '@/extension/runtimeClient'
@@ -94,6 +95,10 @@ export const MenuSheet = ({ open, onOpenChange }: MenuSheetProps): JSX.Element =
         {screen === 'wallet-connect' && (
           <WalletConnectMenu onPaired={() => handleOpenChange(false)} />
         )}
+        {screen === 'import-private-key' && (
+          <ImportPrivateKeyForm onImported={() => handleOpenChange(false)} />
+        )}
+        {screen === 'export-private-key' && <ExportPrivateKeyView />}
         {screen === 'theme' && <ThemeMenu />}
         {screen === 'password' && <PasswordForm />}
         {screen === 'auto-lock' && <AutoLockList />}
diff --git a/carpincho-wallet/src/components/menu/screens.ts b/carpincho-wallet/src/components/menu/screens.ts
index 6cb0838c..360a0890 100644
--- a/carpincho-wallet/src/components/menu/screens.ts
+++ b/carpincho-wallet/src/components/menu/screens.ts
@@ -5,6 +5,8 @@ export type Screen =
   | 'root'
   | 'wallet-connect'
   | 'settings'
+  | 'import-private-key'
+  | 'export-private-key'
   | 'theme'
   | 'security'
   | 'password'
@@ -30,9 +32,19 @@ export const SCREENS: Record<Screen, ScreenConfig> = {
   },
   settings: {
     title: 'Settings',
-    description: 'Theme and security preferences.',
+    description: 'Theme, security, and account key preferences.',
     parent: 'root',
   },
+  'import-private-key': {
+    title: 'Import private key',
+    description: 'Import an existing Canton party into this vault.',
+    parent: 'settings',
+  },
+  'export-private-key': {
+    title: 'Export private key',
+    description: 'Reveal the selected party private key.',
+    parent: 'settings',
+  },
   theme: {
     title: 'Theme',
     description: 'Choose light, dark, or follow the system setting.',
@@ -72,6 +84,8 @@ export const MENU_LISTS: Partial<Record<Screen, MenuListRow[]>> = {
   settings: [
     { label: 'Theme', to: 'theme' },
     { label: 'Security & Password', to: 'security' },
+    { label: 'Import private key', to: 'import-private-key' },
+    { label: 'Export private key', to: 'export-private-key' },
   ],
   security: [
     { label: 'Password', to: 'password' },
diff --git a/carpincho-wallet/src/config/runtimeConfig.ts b/carpincho-wallet/src/config/runtimeConfig.ts
index 46a44109..0366962f 100644
--- a/carpincho-wallet/src/config/runtimeConfig.ts
+++ b/carpincho-wallet/src/config/runtimeConfig.ts
@@ -2,10 +2,41 @@ export interface RuntimeConfig {
   walletServiceRpcUrl: string
 }
 
-const STORAGE_KEY = 'carpincho.runtime-config.v1'
+const STORAGE_KEY = 'carpincho.runtime-config.v2'
 
 const DEFAULT_RUNTIME_CONFIG: RuntimeConfig = {
-  walletServiceRpcUrl: 'http://localhost:3010/rpc',
+  walletServiceRpcUrl: 'http://157.245.139.105:3010/rpc',
+}
+
+type ChromeLocalStorage = {
+  get: (key: string) => Promise<Record<string, unknown>> | Record<string, unknown>
+  set: (items: Record<string, unknown>) => Promise<void> | void
+}
+
+const chromeLocalStorage = (): ChromeLocalStorage | undefined =>
+  (
+    globalThis as {
+      chrome?: {
+        storage?: {
+          local?: ChromeLocalStorage
+        }
+      }
+    }
+  ).chrome?.storage?.local
+
+const browserLocalStorage = (): Storage | undefined =>
+  typeof localStorage === 'undefined' ? undefined : localStorage
+
+const dispatchRuntimeConfigChange = (config: RuntimeConfig): void => {
+  if (typeof window === 'undefined') {
+    return
+  }
+  window.dispatchEvent(new CustomEvent('carpincho-runtime-config-changed', { detail: config }))
+}
+
+// Mirrors popup-local config into extension storage so the MV3 worker can reach wallet-service.
+const persistChromeRuntimeConfig = (config: RuntimeConfig): void => {
+  void Promise.resolve(chromeLocalStorage()?.set({ [STORAGE_KEY]: config })).catch(() => undefined)
 }
 
 export const defaultRuntimeConfig = (): RuntimeConfig => ({
@@ -21,24 +52,54 @@ const sanitizeRuntimeConfig = (raw: Partial<RuntimeConfig>): RuntimeConfig => {
 
 export const loadRuntimeConfig = (): RuntimeConfig => {
   try {
-    const stored = localStorage.getItem(STORAGE_KEY)
+    const storage = browserLocalStorage()
+    if (storage === undefined) {
+      return defaultRuntimeConfig()
+    }
+    const stored = storage.getItem(STORAGE_KEY)
     if (stored === null) {
       return defaultRuntimeConfig()
     }
-    return sanitizeRuntimeConfig(JSON.parse(stored) as Partial<RuntimeConfig>)
+    const sanitized = sanitizeRuntimeConfig(JSON.parse(stored) as Partial<RuntimeConfig>)
+    persistChromeRuntimeConfig(sanitized)
+    return sanitized
   } catch {
     return defaultRuntimeConfig()
   }
 }
 
+// Reads the endpoint from extension storage when running in an MV3 worker without localStorage.
+export const loadRuntimeConfigAsync = async (): Promise<RuntimeConfig> => {
+  try {
+    const storage = chromeLocalStorage()
+    if (storage !== undefined) {
+      const stored = await storage.get(STORAGE_KEY)
+      const config = stored[STORAGE_KEY]
+      if (typeof config === 'object' && config !== null) {
+        return sanitizeRuntimeConfig(config as Partial<RuntimeConfig>)
+      }
+    }
+  } catch {
+    return loadRuntimeConfig()
+  }
+  return loadRuntimeConfig()
+}
+
 export const saveRuntimeConfig = (config: RuntimeConfig): RuntimeConfig => {
   const sanitized = sanitizeRuntimeConfig(config)
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(sanitized))
-  window.dispatchEvent(new CustomEvent('carpincho-runtime-config-changed', { detail: sanitized }))
+  const storage = browserLocalStorage()
+  if (storage !== undefined) {
+    storage.setItem(STORAGE_KEY, JSON.stringify(sanitized))
+  }
+  persistChromeRuntimeConfig(sanitized)
+  dispatchRuntimeConfigChange(sanitized)
   return sanitized
 }
 
 export const subscribeRuntimeConfig = (listener: (config: RuntimeConfig) => void): (() => void) => {
+  if (typeof window === 'undefined') {
+    return () => undefined
+  }
   const onStorage = (event: StorageEvent): void => {
     if (event.key === STORAGE_KEY) {
       listener(loadRuntimeConfig())
diff --git a/carpincho-wallet/src/ledger/contracts.ts b/carpincho-wallet/src/ledger/contracts.ts
new file mode 100644
index 00000000..196c4ef6
--- /dev/null
+++ b/carpincho-wallet/src/ledger/contracts.ts
@@ -0,0 +1,212 @@
+import { type ExecutePreparedResponse, executePreparedCommands } from '@/api/interactiveSubmission'
+import { walletServiceRequest } from '@/api/walletService'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+export interface ActiveContract {
+  contractId: string
+  templateId: string
+  createArgument: unknown
+  createdOffset?: number
+}
+
+export interface CreateContractParams {
+  account: AccountPublic
+  templateId: string
+  createArguments: Record<string, unknown>
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+export interface ExerciseContractParams {
+  account: AccountPublic
+  templateId: string
+  contractId: string
+  choice: string
+  choiceArgument: Record<string, unknown>
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+export interface ListActiveContractsParams {
+  partyId: string
+  templateId?: string
+}
+
+interface LedgerEndResponse {
+  offset?: number
+}
+
+type JsonActiveContractEntry = {
+  contractEntry?: {
+    JsActiveContract?: {
+      createdEvent?: {
+        contractId?: unknown
+        templateId?: unknown
+        createArgument?: unknown
+        offset?: unknown
+      }
+    }
+  }
+}
+
+const CREATE_COMMAND_KIND = 'CreateCommand'
+const EXERCISE_COMMAND_KIND = 'ExerciseCommand'
+
+// Builds the JSON Ledger API command shape expected by wallet-service prepareTransaction.
+export const createCommand = (
+  templateId: string,
+  createArguments: Record<string, unknown>,
+): unknown[] => [
+  {
+    [CREATE_COMMAND_KIND]: {
+      templateId,
+      createArguments,
+    },
+  },
+]
+
+// Builds a generic choice exercise command while leaving argument validation to Canton.
+export const exerciseCommand = (
+  templateId: string,
+  contractId: string,
+  choice: string,
+  choiceArgument: Record<string, unknown>,
+): unknown[] => [
+  {
+    [EXERCISE_COMMAND_KIND]: {
+      templateId,
+      contractId,
+      choice,
+      choiceArgument,
+    },
+  },
+]
+
+// Returns a readable suffix without assuming a template-id package format.
+const templateLabel = (templateId: string): string => {
+  const parts = templateId.split(':')
+  return parts[parts.length - 1] ?? templateId
+}
+
+// Creates one contract while keeping transaction signing inside the selected vault account.
+export const createContract = async ({
+  account,
+  templateId,
+  createArguments,
+  signMessage,
+  recordTransaction,
+}: CreateContractParams): Promise<ExecutePreparedResponse> =>
+  await executePreparedCommands({
+    account,
+    commands: createCommand(templateId, createArguments),
+    method: 'ledger.contract.create',
+    summary: `Create ${templateLabel(templateId)}`,
+    signMessage,
+    recordTransaction,
+  })
+
+// Exercises one choice while keeping transaction signing inside the selected vault account.
+export const exerciseContract = async ({
+  account,
+  templateId,
+  contractId,
+  choice,
+  choiceArgument,
+  signMessage,
+  recordTransaction,
+}: ExerciseContractParams): Promise<ExecutePreparedResponse> =>
+  await executePreparedCommands({
+    account,
+    commands: exerciseCommand(templateId, contractId, choice, choiceArgument),
+    method: 'ledger.contract.exercise',
+    summary: `Exercise ${choice}`,
+    signMessage,
+    recordTransaction,
+  })
+
+// Calls the participant JSON API through wallet-service so Carpincho never stores ledger tokens.
+const ledgerApi = async <T>(params: {
+  requestMethod: 'get' | 'post'
+  resource: string
+  body?: Record<string, unknown>
+}): Promise<T> => await walletServiceRequest<T>('ledgerApi', params)
+
+// Reads the current ledger end because active-contract queries require an explicit snapshot offset.
+const ledgerEnd = async (): Promise<number> => {
+  const response = await ledgerApi<LedgerEndResponse>({
+    requestMethod: 'get',
+    resource: '/v2/state/ledger-end',
+  })
+  if (typeof response.offset !== 'number') {
+    throw new Error('ledger end response did not include numeric offset')
+  }
+  return response.offset
+}
+
+// Uses wildcard ACS because participant filters expect package names, while commands often use hashes.
+const activeContractFilter = (): Record<string, unknown> => ({
+  WildcardFilter: { value: { includeCreatedEventBlob: false } },
+})
+
+// Normalizes JSON API active-contract entries into the compact UI model.
+const activeContractFromEntry = (entry: JsonActiveContractEntry): ActiveContract | undefined => {
+  const event = entry.contractEntry?.JsActiveContract?.createdEvent
+  if (
+    typeof event?.contractId !== 'string' ||
+    typeof event.templateId !== 'string' ||
+    event.createArgument === undefined
+  ) {
+    return undefined
+  }
+  return {
+    contractId: event.contractId,
+    templateId: event.templateId,
+    createArgument: event.createArgument,
+    ...(typeof event.offset === 'number' ? { createdOffset: event.offset } : {}),
+  }
+}
+
+// Matches exact template ids and package-agnostic module/template suffixes for dev-time lookup.
+const matchesTemplate = (contract: ActiveContract, templateId?: string): boolean => {
+  const trimmed = templateId?.trim()
+  if (trimmed === undefined || trimmed === '') {
+    return true
+  }
+  if (contract.templateId === trimmed) {
+    return true
+  }
+  const suffix = trimmed.includes(':') ? `:${trimmed.split(':').slice(1).join(':')}` : trimmed
+  return contract.templateId.endsWith(suffix)
+}
+
+// Lists active contracts visible to the selected party using JSON Ledger API v2 ACS.
+export const listActiveContracts = async ({
+  partyId,
+  templateId,
+}: ListActiveContractsParams): Promise<ActiveContract[]> => {
+  const activeAtOffset = await ledgerEnd()
+  const entries = await ledgerApi<JsonActiveContractEntry[]>({
+    requestMethod: 'post',
+    resource: '/v2/state/active-contracts',
+    body: {
+      filter: {
+        filtersByParty: {
+          [partyId]: {
+            cumulative: [
+              {
+                identifierFilter: activeContractFilter(),
+              },
+            ],
+          },
+        },
+      },
+      activeAtOffset,
+      verbose: true,
+    },
+  })
+  return entries.flatMap((entry) => {
+    const contract = activeContractFromEntry(entry)
+    return contract === undefined || !matchesTemplate(contract, templateId) ? [] : [contract]
+  })
+}
diff --git a/carpincho-wallet/src/utils/json.ts b/carpincho-wallet/src/utils/json.ts
index d95c4529..e7839aef 100644
--- a/carpincho-wallet/src/utils/json.ts
+++ b/carpincho-wallet/src/utils/json.ts
@@ -1,2 +1,220 @@
 // Formats stored JSON-like payloads for compact audit views without mutating the original data.
 export const prettyJson = (value: unknown): string => JSON.stringify(value, null, 2)
+
+const NUMBER_PATTERN = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/
+
+// Parses strict JSON first, then a small paste-friendly object syntax for ledger forms.
+export const parseLooseJson = (value: string, label: string): unknown => {
+  try {
+    return JSON.parse(value) as unknown
+  } catch {
+    return new LooseJsonParser(value, label).parse()
+  }
+}
+
+// Parses ledger command payloads as JSON objects because DAML arguments are records.
+export const parseJsonObject = (value: string, label: string): Record<string, unknown> => {
+  const parsed = parseLooseJson(value, label)
+  if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+    throw new Error(`${label} must be a JSON object`)
+  }
+  return parsed as Record<string, unknown>
+}
+
+// Canonicalizes pasted ledger JSON so the textarea shows the exact submitted payload.
+export const formatJsonInput = (value: string, label: string): string =>
+  prettyJson(parseJsonObject(value, label))
+
+class LooseJsonParser {
+  private index = 0
+
+  // Keeps parser state local so invalid pasted ledger payloads never use eval.
+  constructor(
+    private readonly source: string,
+    private readonly label: string,
+  ) {}
+
+  // Parses one full value and rejects trailing non-whitespace characters.
+  parse(): unknown {
+    this.skipWhitespace()
+    const value = this.parseValue()
+    this.skipWhitespace()
+    if (this.index < this.source.length) {
+      throw this.error(`unexpected token "${this.source[this.index]}"`)
+    }
+    return value
+  }
+
+  // Parses any supported JSON value or loose bare token.
+  private parseValue(): unknown {
+    this.skipWhitespace()
+    const char = this.source[this.index]
+    if (char === '{') {
+      return this.parseObject()
+    }
+    if (char === '[') {
+      return this.parseArray()
+    }
+    if (char === '"' || char === "'") {
+      return this.parseQuotedString()
+    }
+    return this.parseBareValue()
+  }
+
+  // Parses object fields with optional commas so newline-separated records work.
+  private parseObject(): Record<string, unknown> {
+    this.index += 1
+    const result: Record<string, unknown> = {}
+    while (true) {
+      this.skipSeparators()
+      if (this.source[this.index] === '}') {
+        this.index += 1
+        return result
+      }
+      if (this.index >= this.source.length) {
+        throw this.error('unterminated object')
+      }
+      const key = this.parseKey()
+      this.skipWhitespace()
+      if (this.source[this.index] !== ':') {
+        throw this.error(`expected ":" after key "${key}"`)
+      }
+      this.index += 1
+      result[key] = this.parseValue()
+    }
+  }
+
+  // Parses array values with optional commas for pasted CID lists.
+  private parseArray(): unknown[] {
+    this.index += 1
+    const result: unknown[] = []
+    while (true) {
+      this.skipSeparators()
+      if (this.source[this.index] === ']') {
+        this.index += 1
+        return result
+      }
+      if (this.index >= this.source.length) {
+        throw this.error('unterminated array')
+      }
+      result.push(this.parseValue())
+    }
+  }
+
+  // Reads quoted or unquoted object keys up to the required colon.
+  private parseKey(): string {
+    this.skipWhitespace()
+    const char = this.source[this.index]
+    if (char === '"' || char === "'") {
+      return this.parseQuotedString()
+    }
+    const start = this.index
+    while (this.index < this.source.length && this.source[this.index] !== ':') {
+      this.index += 1
+    }
+    const key = this.source.slice(start, this.index).trim()
+    if (key === '') {
+      throw this.error('empty object key')
+    }
+    return key
+  }
+
+  // Reads strings with common JSON escapes while also accepting single quotes.
+  private parseQuotedString(): string {
+    const quote = this.source[this.index]
+    this.index += 1
+    let result = ''
+    while (this.index < this.source.length) {
+      const char = this.source[this.index]
+      this.index += 1
+      if (char === quote) {
+        return result
+      }
+      if (char === '\\') {
+        result += this.parseEscape()
+      } else {
+        result += char
+      }
+    }
+    throw this.error('unterminated string')
+  }
+
+  // Converts JSON-style escapes in quoted pasted strings.
+  private parseEscape(): string {
+    const char = this.source[this.index]
+    this.index += 1
+    if (char === 'n') {
+      return '\n'
+    }
+    if (char === 'r') {
+      return '\r'
+    }
+    if (char === 't') {
+      return '\t'
+    }
+    if (char === 'b') {
+      return '\b'
+    }
+    if (char === 'f') {
+      return '\f'
+    }
+    if (char === 'u') {
+      const hex = this.source.slice(this.index, this.index + 4)
+      if (!/^[0-9a-fA-F]{4}$/.test(hex)) {
+        throw this.error('invalid unicode escape')
+      }
+      this.index += 4
+      return String.fromCharCode(Number.parseInt(hex, 16))
+    }
+    return char ?? ''
+  }
+
+  // Reads unquoted values until a structural delimiter or line break.
+  private parseBareValue(): unknown {
+    const start = this.index
+    while (this.index < this.source.length && !this.isBareValueDelimiter(this.source[this.index])) {
+      this.index += 1
+    }
+    const token = this.source.slice(start, this.index).trim()
+    if (token === '') {
+      throw this.error('expected value')
+    }
+    if (token === 'true') {
+      return true
+    }
+    if (token === 'false') {
+      return false
+    }
+    if (token === 'null') {
+      return null
+    }
+    return NUMBER_PATTERN.test(token) ? Number(token) : token
+  }
+
+  // Keeps bare strings from swallowing the next field on newline-separated input.
+  private isBareValueDelimiter(char: string | undefined): boolean {
+    return char === undefined || char === ',' || char === '}' || char === ']' || char === '\n'
+  }
+
+  // Skips ordinary whitespace between values without accepting commas at top level.
+  private skipWhitespace(): void {
+    while (this.index < this.source.length && /\s/.test(this.source[this.index] ?? '')) {
+      this.index += 1
+    }
+  }
+
+  // Skips commas and whitespace between fields/items to support quick pasted forms.
+  private skipSeparators(): void {
+    while (
+      this.index < this.source.length &&
+      (this.source[this.index] === ',' || /\s/.test(this.source[this.index] ?? ''))
+    ) {
+      this.index += 1
+    }
+  }
+
+  // Adds field context to syntax errors shown in the ledger tools panel.
+  private error(message: string): Error {
+    return new Error(`${this.label}: ${message}`)
+  }
+}
diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 9162576a..84ff1bf6 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -104,6 +104,7 @@ export interface VaultContextValue {
     publicKeyBase64: string
   }) => Promise<AccountPublic>
   removeAccount: (id: string) => Promise<void>
+  exportPrivateKey: (accountId: string) => string
   signMessage: (accountId: string, messageBase64: string) => Promise<string>
   recordTransaction: (
     args: Omit<TransactionRecord, 'id' | 'createdAt'>,
@@ -345,6 +346,18 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     [],
   )
 
+  // Gives export UI the selected account secret without leaking keys into public account state.
+  const exportPrivateKey = useCallback((accountId: string): string => {
+    if (unlockedPlaintext === null) {
+      throw new Error('vault locked')
+    }
+    const acct = unlockedPlaintext.accounts.find((a) => a.id === accountId)
+    if (acct === undefined) {
+      throw new Error(`unknown account: ${accountId}`)
+    }
+    return acct.privateKeyHex
+  }, [])
+
   const verifyPassword = useCallback(
     (password: string): boolean => cachedPassword !== null && cachedPassword === password,
     [],
@@ -489,6 +502,7 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       setPrimary,
       addAccount,
       removeAccount,
+      exportPrivateKey,
       signMessage,
       recordTransaction,
       changePassword,
@@ -508,6 +522,7 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     setPrimary,
     addAccount,
     removeAccount,
+    exportPrivateKey,
     signMessage,
     recordTransaction,
     changePassword,
diff --git a/carpincho-wallet/src/vault/keypair.ts b/carpincho-wallet/src/vault/keypair.ts
index d5e39d6c..e7aaeeda 100644
--- a/carpincho-wallet/src/vault/keypair.ts
+++ b/carpincho-wallet/src/vault/keypair.ts
@@ -21,7 +21,11 @@ export const fromHex = (hex: string): Uint8Array => {
   }
   const out = new Uint8Array(hex.length / 2)
   for (let i = 0; i < out.length; i++) {
-    out[i] = parseInt(hex.substring(i * 2, i * 2 + 2), 16)
+    const byte = Number.parseInt(hex.substring(i * 2, i * 2 + 2), 16)
+    if (Number.isNaN(byte)) {
+      throw new Error('invalid hex')
+    }
+    out[i] = byte
   }
   return out
 }
@@ -57,6 +61,16 @@ export const generateKeypair = async (): Promise<GeneratedKeypair> => {
   }
 }
 
+// Derives the public account key required by provider payloads from an imported secret key.
+export const derivePublicKeyBase64 = async (privateKeyHex: string): Promise<string> => {
+  try {
+    const publicKey = await ed.getPublicKeyAsync(fromHex(privateKeyHex.trim()))
+    return toBase64(publicKey)
+  } catch {
+    throw new Error('invalid private key')
+  }
+}
+
 export const signMessageBase64 = async (
   privateKeyHex: string,
   messageBase64: string,
diff --git a/carpincho-wallet/src/vault/passwordStrength.ts b/carpincho-wallet/src/vault/passwordStrength.ts
index e540992f..a69138a4 100644
--- a/carpincho-wallet/src/vault/passwordStrength.ts
+++ b/carpincho-wallet/src/vault/passwordStrength.ts
@@ -1,8 +1,16 @@
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
 import { useEffect, useState } from 'react'
 
-export const MIN_PASSWORD_LENGTH = 9
-export const MIN_PASSWORD_SCORE = 3
+const FALLBACK_PASSWORD_SCORE = 1
+
+// zxcvbn scores run 0-4; anything missing, blank, or out of range falls back.
+export const parsePasswordScore = (raw: unknown): number => {
+  if (typeof raw !== 'string' || raw.trim() === '') return FALLBACK_PASSWORD_SCORE
+  const score = Number(raw)
+  return Number.isInteger(score) && score >= 0 && score <= 4 ? score : FALLBACK_PASSWORD_SCORE
+}
+
+export const MIN_PASSWORD_SCORE = parsePasswordScore(import.meta.env?.VITE_MIN_PASSWORD_SCORE)
 
 let ready = false
 let loadPromise: Promise<void> | null = null
@@ -43,7 +51,7 @@ export const scorePassword = (password: string): number => {
 }
 
 export const isPasswordAcceptable = (password: string): boolean =>
-  password.length >= MIN_PASSWORD_LENGTH && scorePassword(password) >= MIN_PASSWORD_SCORE
+  scorePassword(password) >= MIN_PASSWORD_SCORE
 
 export const isConfirmMismatch = (password: string, confirm: string): boolean =>
   confirm.length > 0 && password !== confirm
diff --git a/carpincho-wallet/src/views/ConnectionSettingsView.tsx b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
index 10f44763..97f68f45 100644
--- a/carpincho-wallet/src/views/ConnectionSettingsView.tsx
+++ b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
@@ -72,7 +72,7 @@ export const ConnectionSettingsView = (): JSX.Element => {
           className="font-mono"
           value={draft.walletServiceRpcUrl}
           onChange={(e) => setDraft((prev) => ({ ...prev, walletServiceRpcUrl: e.target.value }))}
-          placeholder="http://localhost:3010/rpc"
+          placeholder="http://157.245.139.105:3010/rpc"
         />
       </div>
 
diff --git a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
index 8926919e..62b8a4c8 100644
--- a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
+++ b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
@@ -1,8 +1,38 @@
+import { useState } from 'react'
+import { ConnectionFooter, type DappFooterStatus } from '@/components/ConnectionFooter'
 import { CreateAccountForm } from '@/components/CreateAccountForm'
 import { Card } from '@/components/ui/Card'
+import { Sheet } from '@/components/ui/Sheet'
+import { useWalletServiceStatus } from '@/hooks/useWalletServiceStatus'
+import { ConnectionSettingsView } from '@/views/ConnectionSettingsView'
 
-export const CreateFirstAccount = (): JSX.Element => (
-  <Card>
-    <CreateAccountForm showIntro />
-  </Card>
-)
+const NO_DAPP: DappFooterStatus = { kind: 'none' }
+
+// Renders first-account creation with the same wallet-service controls available after setup.
+export const CreateFirstAccount = (): JSX.Element => {
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const walletService = useWalletServiceStatus()
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Card>
+        <CreateAccountForm showIntro />
+      </Card>
+
+      <Sheet
+        open={settingsOpen}
+        onOpenChange={setSettingsOpen}
+        title="Connection"
+        description="Configure wallet-service URL and network."
+      >
+        <ConnectionSettingsView />
+      </Sheet>
+
+      <ConnectionFooter
+        walletService={walletService}
+        dapp={NO_DAPP}
+        onOpenSettings={() => setSettingsOpen(true)}
+      />
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/vite-env.d.ts b/carpincho-wallet/src/vite-env.d.ts
index 39a70d19..d320c8d7 100644
--- a/carpincho-wallet/src/vite-env.d.ts
+++ b/carpincho-wallet/src/vite-env.d.ts
@@ -1,5 +1,13 @@
 /// <reference types="vite/client" />
 
+interface ImportMetaEnv {
+  readonly VITE_MIN_PASSWORD_SCORE?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
 declare const __APP_VERSION__: string
 
 declare module '*.svg' {
diff --git a/carpincho-wallet/test/api/walletService.test.ts b/carpincho-wallet/test/api/walletService.test.ts
new file mode 100644
index 00000000..bdc6f5d0
--- /dev/null
+++ b/carpincho-wallet/test/api/walletService.test.ts
@@ -0,0 +1,71 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { uploadDarFile, walletServiceRequest } from '@/api/walletService'
+
+const originalFetch = globalThis.fetch
+const originalChrome = (globalThis as { chrome?: unknown }).chrome
+
+describe('wallet-service admin API', () => {
+  afterEach(() => {
+    // Each scenario installs its own fetch spy so request shape assertions do not leak.
+    globalThis.fetch = originalFetch
+    Object.defineProperty(globalThis, 'chrome', { configurable: true, value: originalChrome })
+    localStorage.clear()
+  })
+
+  it('uploads DAR files to the admin endpoint as octet-stream bytes', async () => {
+    // Scenario: the browser already has the compiled DAR file, so Carpincho must
+    // send the raw file body to wallet-service instead of wrapping it in JSON-RPC.
+    const file = new File([new Uint8Array([1, 2, 3])], 'token.dar')
+    const seen: { url?: string; type?: string; body?: Blob } = {}
+    globalThis.fetch = (async (input, init) => {
+      seen.url = String(input)
+      seen.type = new Headers(init?.headers).get('content-type') ?? undefined
+      seen.body = init?.body as Blob
+      return new Response(JSON.stringify({ ok: true, vetAllPackages: true, response: {} }), {
+        status: 200,
+      })
+    }) as typeof globalThis.fetch
+
+    const result = await uploadDarFile(file, { rpcUrl: 'http://wallet.example/rpc' })
+
+    // The URL is derived from the configured RPC endpoint and keeps binary upload out of JSON-RPC.
+    assert.equal(seen.url, 'http://wallet.example/admin/dars')
+    assert.equal(seen.type, 'application/octet-stream')
+    assert.equal(seen.body, file)
+    assert.deepEqual(result, { ok: true, vetAllPackages: true, response: {} })
+  })
+
+  it('uses extension local storage for JSON-RPC calls made by the background worker', async () => {
+    // Scenario: the MV3 background worker has no window.localStorage, so direct dApp
+    // ledgerApi calls must read the RPC URL persisted by the popup from chrome.storage.local.
+    Object.defineProperty(globalThis, 'chrome', {
+      configurable: true,
+      value: {
+        storage: {
+          local: {
+            get: async (key: string) => ({
+              [key]: { walletServiceRpcUrl: 'http://wallet.example/rpc' },
+            }),
+            set: async () => undefined,
+          },
+        },
+      },
+    })
+    const seen: { url?: string; body?: string } = {}
+    globalThis.fetch = (async (input, init) => {
+      seen.url = String(input)
+      seen.body = String(init?.body ?? '')
+      return new Response(JSON.stringify({ result: { ok: true } }), { status: 200 })
+    }) as typeof globalThis.fetch
+
+    await walletServiceRequest('ledgerApi', {
+      requestMethod: 'get',
+      resource: '/v2/state/ledger-end',
+    })
+
+    // Expected result: the background request uses chrome.storage.local, not the default endpoint.
+    assert.equal(seen.url, 'http://wallet.example/rpc')
+    assert.match(seen.body ?? '', /"method":"ledgerApi"/)
+  })
+})
diff --git a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
index d486a555..d2dd1512 100644
--- a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
+++ b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
@@ -4,6 +4,7 @@ import {
   cancelAmuletPreapproval,
   createAmuletPreapproval,
   getAmuletPreapprovalStatus,
+  tapAmulet,
 } from '@/cip56/amuletPreapproval'
 import type { AccountPublic } from '@/vault/types'
 
@@ -127,6 +128,65 @@ describe('Amulet preapproval helpers', () => {
     )
   })
 
+  it('taps a fixed 100 AMT amount using Carpincho local signing', async () => {
+    // Scenario: the Assets tab faucet button should request one fixed 100 AMT
+    // tap for the selected party, then sign and execute the prepared command.
+    const calls: Array<{ method: string; params: Record<string, unknown> }> = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as {
+        method: string
+        params: Record<string, unknown>
+      }
+      calls.push({ method: body.method, params: body.params })
+      if (body.method === 'amulet.tap') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { ExerciseCommand: { choice: 'AmuletRules_DevNet_Tap' } },
+              disclosedContracts: [{ contractId: 'tap-context-cid' }],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-tap-tx',
+              preparedTransactionHash: 'prepared-tap-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-tap-1' } }), {
+          status: 200,
+        })
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+
+    const result = await tapAmulet({
+      account: ACCOUNT,
+      signMessage: async (accountId, messageBase64) => {
+        assert.equal(accountId, 'account-1')
+        assert.equal(messageBase64, 'prepared-tap-hash')
+        return 'signature-base64'
+      },
+    })
+
+    assert.deepEqual(result, { updateId: 'update-tap-1' })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['amulet.tap', 'prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, { receiver: 'alice::party' })
+    assert.deepEqual(calls[1]?.params.disclosedContracts, [{ contractId: 'tap-context-cid' }])
+  })
+
   it('cancels an Amulet preapproval using Carpincho local signing', async () => {
     // Scenario: disabling auto-accept follows the same self-custodial signing
     // flow as create, but requests the SDK cancel command.
diff --git a/carpincho-wallet/test/components/AccountCard.test.tsx b/carpincho-wallet/test/components/AccountCard.test.tsx
index 3cc6c306..a56d7f8b 100644
--- a/carpincho-wallet/test/components/AccountCard.test.tsx
+++ b/carpincho-wallet/test/components/AccountCard.test.tsx
@@ -49,6 +49,7 @@ const baseVault = (): VaultContextValue =>
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AccountsDialog.test.tsx b/carpincho-wallet/test/components/AccountsDialog.test.tsx
index 74b649b1..ffd6fc55 100644
--- a/carpincho-wallet/test/components/AccountsDialog.test.tsx
+++ b/carpincho-wallet/test/components/AccountsDialog.test.tsx
@@ -49,6 +49,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 01758339..763d5236 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -2,6 +2,7 @@ import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import { toast } from '@/components/ui/toast'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
@@ -36,6 +37,7 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
@@ -45,16 +47,27 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts the panel under vault context so it can resolve the active account.
-const renderAssets = (api: Cip56HoldingsApi): void => {
+const renderAssets = (api: Cip56HoldingsApi, tapApi?: AmuletTapApi): void => {
   render(
     <TestQueryClientProvider>
       <VaultContext.Provider value={baseVault()}>
-        <AssetsPanel api={api} />
+        <AssetsPanel
+          api={api}
+          tapApi={tapApi}
+        />
       </VaultContext.Provider>
     </TestQueryClientProvider>,
   )
 }
 
+// Clicks the token row by its visible label so the faucet button is not selected by accident.
+const clickTokenRow = async (label: string): Promise<void> => {
+  const tokenLabel = await screen.findByText(label)
+  const row = tokenLabel.closest('button')
+  assert.ok(row)
+  await userEvent.click(row)
+}
+
 describe('AssetsPanel', () => {
   const originalClipboard = globalThis.navigator?.clipboard
 
@@ -96,6 +109,46 @@ describe('AssetsPanel', () => {
     assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
   })
 
+  it('taps a fixed 100 AMT amount for the selected party and refreshes balances', async () => {
+    // Scenario: the faucet button belongs in the Assets tab because it changes
+    // balances. A successful tap should request the active account and reload holdings.
+    let listCalls = 0
+    const tappedAccounts: string[] = []
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => {
+        listCalls += 1
+        return []
+      },
+    }
+    const tapApi: AmuletTapApi = {
+      tapAmulet: async ({ account, signMessage, recordTransaction }) => {
+        tappedAccounts.push(account.partyId)
+        assert.equal(await signMessage(account.id, 'tap-hash'), 'signature')
+        await recordTransaction?.({
+          accountId: account.id,
+          accountName: account.name,
+          partyId: account.partyId,
+          network: account.network,
+          method: 'amulet.tap',
+          status: 'executed',
+          preparedTransaction: 'tap-tx',
+          preparedTransactionHash: 'tap-hash',
+          commands: [],
+          summary: 'Tap 100 AMT',
+          commandCount: 1,
+        })
+        return { updateId: 'tap-update-1' }
+      },
+    }
+
+    renderAssets(api, tapApi)
+
+    await userEvent.click(await screen.findByRole('button', { name: 'Tap Amulet' }))
+
+    assert.deepEqual(tappedAccounts, ['alice::party'])
+    assert.ok(listCalls >= 2)
+  })
+
   it('opens the token detail modal and fetches UTXOs on demand', async () => {
     // Scenario: clicking a token row opens the balance-first modal, which lazily
     // loads the raw UTXOs for the holdings list.
@@ -130,7 +183,7 @@ describe('AssetsPanel', () => {
     renderAssets(api)
 
     assert.equal(detailsCalls, 0)
-    await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
+    await clickTokenRow('Amulet')
 
     await screen.findByText('15.75')
     await screen.findByText('12.50')
@@ -173,7 +226,7 @@ describe('AssetsPanel', () => {
 
     renderAssets(api)
 
-    await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
+    await clickTokenRow('Amulet')
 
     // Both the balance and the lone cached holding format to 15.75; two matches with
     // no detail fetch proves the cached UTXO rendered without a round trip.
diff --git a/carpincho-wallet/test/components/CreateAccountForm.test.tsx b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
index 4818c1b0..2efe27c7 100644
--- a/carpincho-wallet/test/components/CreateAccountForm.test.tsx
+++ b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
@@ -32,6 +32,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/DarUploadPanel.test.tsx b/carpincho-wallet/test/components/DarUploadPanel.test.tsx
new file mode 100644
index 00000000..4e0c427f
--- /dev/null
+++ b/carpincho-wallet/test/components/DarUploadPanel.test.tsx
@@ -0,0 +1,39 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DarUploadPanel } from '@/components/DarUploadPanel'
+import { toast } from '@/components/ui/toast'
+
+describe('DarUploadPanel', () => {
+  afterEach(() => {
+    // The panel owns transient upload state; cleanup resets the DOM between scenarios.
+    cleanup()
+    toast.clear()
+  })
+
+  it('uploads the selected DAR through the provided API', async () => {
+    // Scenario: a developer selects one compiled DAR and submits it to the
+    // validator-backed wallet-service admin endpoint.
+    const selectedFile = new File(['dar-bytes'], 'token.dar')
+    let uploaded: File | undefined
+
+    render(
+      <DarUploadPanel
+        api={{
+          uploadDarFile: async (file) => {
+            uploaded = file
+            return { ok: true, vetAllPackages: true, response: {} }
+          },
+        }}
+      />,
+    )
+
+    await userEvent.upload(screen.getByLabelText('DAR file'), selectedFile)
+    await userEvent.click(screen.getByRole('button', { name: 'Upload DAR' }))
+
+    // The exact selected file object is passed through, preserving binary contents and filename.
+    assert.equal(uploaded, selectedFile)
+    await screen.findByText('token.dar uploaded')
+  })
+})
diff --git a/carpincho-wallet/test/components/Header.test.tsx b/carpincho-wallet/test/components/Header.test.tsx
index 132d25a3..acadc88e 100644
--- a/carpincho-wallet/test/components/Header.test.tsx
+++ b/carpincho-wallet/test/components/Header.test.tsx
@@ -29,6 +29,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
+  exportPrivateKey: () => '',
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index a3563adf..14800809 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -64,6 +64,7 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
@@ -89,7 +90,7 @@ describe('HomeTabs navigation', () => {
     cleanup()
   })
 
-  it('renders Assets, Transfers, and Activity tabs', () => {
+  it('renders Assets, Transfers, Activity, and Utils tabs', () => {
     // Scenario: token balances, incoming transfers, and history each own a top-level
     // tab. Sending now lives inside the token detail modal, so there is no Send tab.
     renderHome(
@@ -103,6 +104,7 @@ describe('HomeTabs navigation', () => {
     assert.equal(screen.getByRole('tab', { name: 'Assets' }).getAttribute('data-state'), 'active')
     assert.ok(screen.getByRole('tab', { name: 'Transfers' }))
     assert.ok(screen.getByRole('tab', { name: 'Activity' }))
+    assert.ok(screen.getByRole('tab', { name: 'Utils' }))
     assert.equal(screen.queryByRole('tab', { name: 'Send' }), null)
   })
 
diff --git a/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx b/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
new file mode 100644
index 00000000..5c7100f5
--- /dev/null
+++ b/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
@@ -0,0 +1,271 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { type LedgerToolsApi, LedgerToolsPanel } from '@/components/LedgerToolsPanel'
+import { toast } from '@/components/ui/toast'
+import type { ActiveContract } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  // Active account fixture represents the party whose vault key signs generic create commands.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const CONTRACT: ActiveContract = {
+  // ACS fixture is the contract row the Contracts tab should render after a refresh.
+  contractId: 'cid-1',
+  templateId: 'pkg:Module:Template',
+  createArgument: { admin: 'alice::party' },
+  createdOffset: 42,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderPanel = (api: LedgerToolsApi, vault = baseVault()): void => {
+  render(
+    <VaultContext.Provider value={vault}>
+      <LedgerToolsPanel
+        account={ACCOUNT}
+        api={api}
+      />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('LedgerToolsPanel', () => {
+  afterEach(() => {
+    // The panel emits toasts and owns form state, so reset the DOM and toast store per scenario.
+    cleanup()
+    toast.clear()
+  })
+
+  it('creates a contract from raw JSON and refreshes active contracts afterward', async () => {
+    // Scenario: a developer pastes a DAML template id and create arguments.
+    // Submitting should call the generic create helper with the active account and then refresh ACS
+    // so the newly visible contract id appears in the Contracts tab.
+    const createCalls: Parameters<LedgerToolsApi['createContract']>[0][] = []
+    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
+    const api: LedgerToolsApi = {
+      createContract: async (params) => {
+        createCalls.push(params)
+        return { updateId: 'update-1', completionOffset: 42 }
+      },
+      exerciseContract: async () => ({ updateId: 'unused' }),
+      listActiveContracts: async (params) => {
+        listCalls.push(params)
+        return [CONTRACT]
+      },
+    }
+    renderPanel(api)
+
+    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
+    fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
+      target: { value: JSON.stringify({ admin: 'alice::party' }) },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+
+    await waitFor(() => assert.equal(createCalls.length, 1))
+    assert.equal(createCalls[0]?.account.partyId, 'alice::party')
+    assert.equal(createCalls[0]?.templateId, 'pkg:Module:Template')
+    assert.deepEqual(createCalls[0]?.createArguments, { admin: 'alice::party' })
+    assert.equal(listCalls[0]?.partyId, 'alice::party')
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Contracts' }))
+
+    assert.equal(screen.getByText('cid-1').textContent, 'cid-1')
+    assert.ok(screen.getByText(/"admin": "alice::party"/))
+  })
+
+  it('formats loose create arguments before submitting the command', async () => {
+    // Scenario: create payloads are often copied from DAML-like notes, not strict JSON.
+    // The textarea should accept unquoted keys and newline-separated fields, normalize the
+    // text to strict formatted JSON, and submit the parsed object to the ledger helper.
+    const createCalls: Parameters<LedgerToolsApi['createContract']>[0][] = []
+    const api: LedgerToolsApi = {
+      createContract: async (params) => {
+        createCalls.push(params)
+        return { updateId: 'update-1', completionOffset: 42 }
+      },
+      exerciseContract: async () => ({ updateId: 'unused' }),
+      listActiveContracts: async () => [],
+    }
+    renderPanel(api)
+
+    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
+    const textarea = screen.getByLabelText('Create arguments JSON') as HTMLTextAreaElement
+    fireEvent.change(textarea, {
+      target: {
+        value: `{
+          owner: alice::party
+          instrumentId: {
+            admin: admin::party
+            id: BNT
+          }
+        }`,
+      },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+
+    await waitFor(() => assert.equal(createCalls.length, 1))
+    assert.deepEqual(createCalls[0]?.createArguments, {
+      owner: 'alice::party',
+      instrumentId: { admin: 'admin::party', id: 'BNT' },
+    })
+    assert.equal(
+      textarea.value,
+      JSON.stringify(
+        {
+          owner: 'alice::party',
+          instrumentId: { admin: 'admin::party', id: 'BNT' },
+        },
+        null,
+        2,
+      ),
+    )
+  })
+
+  it('refreshes active contracts with an optional template filter', async () => {
+    // Scenario: the active party can own many contracts, so the Contracts tab has an optional
+    // template-id filter. Refresh should pass that filter to the generic ACS helper.
+    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
+    const api: LedgerToolsApi = {
+      createContract: async () => ({ updateId: 'unused' }),
+      exerciseContract: async () => ({ updateId: 'unused' }),
+      listActiveContracts: async (params) => {
+        listCalls.push(params)
+        return [CONTRACT]
+      },
+    }
+    renderPanel(api)
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Contracts' }))
+    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
+    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+
+    await waitFor(() =>
+      assert.deepEqual(listCalls.at(-1), {
+        partyId: 'alice::party',
+        templateId: 'pkg:Module:Template',
+      }),
+    )
+    assert.equal(screen.getByText('cid-1').textContent, 'cid-1')
+  })
+
+  it('exercises a choice from raw JSON and refreshes active contracts afterward', async () => {
+    // Scenario: a developer wants to call any known DAML choice by hand.
+    // Submitting should forward template id, contract id, choice name, and parsed JSON body
+    // to the generic exercise helper using the active account.
+    const exerciseCalls: Parameters<LedgerToolsApi['exerciseContract']>[0][] = []
+    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
+    const api: LedgerToolsApi = {
+      createContract: async () => ({ updateId: 'unused' }),
+      exerciseContract: async (params) => {
+        exerciseCalls.push(params)
+        return { updateId: 'exercise-update-1', completionOffset: 43 }
+      },
+      listActiveContracts: async (params) => {
+        listCalls.push(params)
+        return [CONTRACT]
+      },
+    }
+    renderPanel(api)
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Exercise' }))
+    await userEvent.type(screen.getByLabelText('Exercise template ID'), 'pkg:Module:Template')
+    await userEvent.type(screen.getByLabelText('Contract ID'), 'cid-1')
+    await userEvent.type(screen.getByLabelText('Choice'), 'Template_DoThing')
+    fireEvent.change(screen.getByLabelText('Choice argument JSON'), {
+      target: { value: JSON.stringify({ receiver: 'bob::party', amount: '5.0' }) },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
+
+    await waitFor(() => assert.equal(exerciseCalls.length, 1))
+    assert.equal(exerciseCalls[0]?.account.partyId, 'alice::party')
+    assert.equal(exerciseCalls[0]?.templateId, 'pkg:Module:Template')
+    assert.equal(exerciseCalls[0]?.contractId, 'cid-1')
+    assert.equal(exerciseCalls[0]?.choice, 'Template_DoThing')
+    assert.deepEqual(exerciseCalls[0]?.choiceArgument, { receiver: 'bob::party', amount: '5.0' })
+    assert.equal(listCalls.at(-1)?.partyId, 'alice::party')
+  })
+
+  it('formats loose choice arguments before exercising the choice', async () => {
+    // Scenario: choice payloads have the same raw-entry workflow as create payloads.
+    // The Exercise tab should normalize shorthand JSON before calling the generic choice
+    // helper so the ledger sees a real object, not pasted source text.
+    const exerciseCalls: Parameters<LedgerToolsApi['exerciseContract']>[0][] = []
+    const api: LedgerToolsApi = {
+      createContract: async () => ({ updateId: 'unused' }),
+      exerciseContract: async (params) => {
+        exerciseCalls.push(params)
+        return { updateId: 'exercise-update-1', completionOffset: 43 }
+      },
+      listActiveContracts: async () => [],
+    }
+    renderPanel(api)
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Exercise' }))
+    await userEvent.type(screen.getByLabelText('Exercise template ID'), 'pkg:Module:Template')
+    await userEvent.type(screen.getByLabelText('Contract ID'), 'cid-1')
+    await userEvent.type(screen.getByLabelText('Choice'), 'Template_DoThing')
+    const textarea = screen.getByLabelText('Choice argument JSON') as HTMLTextAreaElement
+    fireEvent.change(textarea, {
+      target: {
+        value: `{
+          receiver: bob::party
+          transfer: {
+            instrument: BNT
+            amount: 5.5
+          }
+        }`,
+      },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
+
+    await waitFor(() => assert.equal(exerciseCalls.length, 1))
+    assert.deepEqual(exerciseCalls[0]?.choiceArgument, {
+      receiver: 'bob::party',
+      transfer: { instrument: 'BNT', amount: 5.5 },
+    })
+    assert.equal(
+      textarea.value,
+      JSON.stringify(
+        {
+          receiver: 'bob::party',
+          transfer: { instrument: 'BNT', amount: 5.5 },
+        },
+        null,
+        2,
+      ),
+    )
+  })
+})
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index b82f48c0..83722bc6 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -29,6 +29,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
+  exportPrivateKey: () => '',
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
@@ -94,6 +95,27 @@ describe('MenuSheet', () => {
     assert.ok(screen.getByRole('button', { name: /log out/i }))
   })
 
+  it('shows private-key import and export entries inside Settings', async () => {
+    // Scenario: key import/export are Settings-level actions, not account-switcher actions.
+    const user = userEvent.setup()
+    render(
+      wrap(
+        baseVault(),
+        <MenuSheet
+          open={true}
+          onOpenChange={() => undefined}
+        />,
+      ),
+    )
+
+    // Action: open the Settings screen from the root drawer.
+    await user.click(screen.getByRole('button', { name: /^settings$/i }))
+
+    // Expected result: both private-key actions are available from Settings.
+    assert.ok(screen.getByRole('button', { name: /^import private key$/i }))
+    assert.ok(screen.getByRole('button', { name: /^export private key$/i }))
+  })
+
   it('navigates settings to security and back', async () => {
     const user = userEvent.setup()
     render(
diff --git a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
new file mode 100644
index 00000000..573f3924
--- /dev/null
+++ b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
@@ -0,0 +1,205 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ExportPrivateKeyView, ImportPrivateKeyForm } from '@/components/PrivateKeyPanel'
+import { getToastEntries, toast } from '@/components/ui/toast'
+import { derivePublicKeyBase64, generateKeypair } from '@/vault/keypair'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const originalFetch = globalThis.fetch
+const originalClipboard = navigator.clipboard
+
+const PRIMARY_ACCOUNT: AccountPublic = {
+  // Active account fixture represents the selected party whose secret is exported.
+  id: 'alice-account',
+  name: 'alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'alice-public',
+  network: 'localnet',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+// Builds a complete vault context so each component test overrides only the behavior it asserts.
+const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue => ({
+  isLocked: false,
+  isLoading: false,
+  hasVault: true,
+  setup: async () => undefined,
+  unlock: async () => undefined,
+  lock: () => undefined,
+  destroyVault: () => undefined,
+  accounts: [PRIMARY_ACCOUNT],
+  primary: PRIMARY_ACCOUNT,
+  transactions: [],
+  setPrimary: async () => undefined,
+  addAccount: async () => PRIMARY_ACCOUNT,
+  removeAccount: async () => undefined,
+  exportPrivateKey: () => '',
+  signMessage: async () => '',
+  recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
+  changePassword: async () => undefined,
+  verifyPassword: () => false,
+  autoLockOption: 'never',
+  setAutoLockOption: () => undefined,
+  ...overrides,
+})
+
+// Renders private-key screens with a vault provider because both screens use the real vault hook.
+const renderWithVault = (overrides: Partial<VaultContextValue>, ui: JSX.Element): void => {
+  render(<VaultContext.Provider value={baseVault(overrides)}>{ui}</VaultContext.Provider>)
+}
+
+// Private-key import form tests cover validation and vault persistence inputs.
+describe('ImportPrivateKeyForm', () => {
+  afterEach(() => {
+    // Cleanup: reset globals and transient toast state between form scenarios.
+    cleanup()
+    toast.clear()
+    globalThis.fetch = originalFetch
+  })
+
+  it('requires party id, party name, and private key before importing', async () => {
+    // Scenario: empty import fields should not mutate the vault.
+    const user = userEvent.setup()
+    const added: unknown[] = []
+    renderWithVault(
+      {
+        addAccount: async (args) => {
+          added.push(args)
+          return PRIMARY_ACCOUNT
+        },
+      },
+      <ImportPrivateKeyForm />,
+    )
+
+    // Action: submit the untouched form.
+    await user.click(screen.getByRole('button', { name: /^import private key$/i }))
+
+    // Expected result: a field-level error is shown and addAccount is not called.
+    assert.ok(screen.getByText(/all fields are required/i))
+    assert.equal(added.length, 0)
+  })
+
+  it('imports a private key as a vault account with a derived public key', async () => {
+    // Scenario: existing Canton parties are imported with a party id, display name, and secret key.
+    const user = userEvent.setup()
+    const keypair = await generateKeypair()
+    const expectedPublicKey = await derivePublicKeyBase64(keypair.privateKeyHex)
+    const added: Array<{
+      name: string
+      partyId: string
+      privateKeyHex: string
+      publicKeyBase64: string
+      network: string
+    }> = []
+    globalThis.fetch = (async (input, init) => {
+      const url = String(input)
+      if (url.endsWith('/rpc') && String(init?.body ?? '').includes('"method":"status"')) {
+        // Setup: imported accounts use the same wallet-service network source as created accounts.
+        return new Response(
+          JSON.stringify({
+            result: {
+              network: { networkId: 'canton:from-status' },
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected request: ${url}`)
+    }) as typeof globalThis.fetch
+    renderWithVault(
+      {
+        addAccount: async (args) => {
+          // Assertion fixture: capture the exact account data that would be encrypted in the vault.
+          added.push(args)
+          return {
+            id: 'imported-account',
+            name: args.name,
+            partyId: args.partyId,
+            publicKeyBase64: args.publicKeyBase64,
+            network: args.network,
+            isPrimary: false,
+            createdAt: 2,
+          }
+        },
+      },
+      <ImportPrivateKeyForm />,
+    )
+
+    // Action: fill the three requested import fields and submit.
+    await user.type(screen.getByLabelText(/^party id$/i), 'alice::fingerprint')
+    await user.type(screen.getByLabelText(/^party name$/i), 'alice')
+    await user.type(screen.getByLabelText(/^private key$/i), keypair.privateKeyHex)
+    await user.click(screen.getByRole('button', { name: /^import private key$/i }))
+
+    // Expected result: addAccount receives the trimmed values, current network, and derived public key.
+    await waitFor(() => assert.equal(added.length, 1))
+    assert.deepEqual(added[0], {
+      name: 'alice',
+      partyId: 'alice::fingerprint',
+      privateKeyHex: keypair.privateKeyHex,
+      publicKeyBase64: expectedPublicKey,
+      network: 'canton:from-status',
+    })
+    assert.equal(getToastEntries()[0]?.message, 'Private key imported.')
+  })
+})
+
+// Private-key export tests cover direct reveal for the selected account.
+describe('ExportPrivateKeyView', () => {
+  afterEach(() => {
+    // Cleanup: reset DOM, toast state, and the clipboard shim after export scenarios.
+    cleanup()
+    toast.clear()
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: originalClipboard,
+    })
+  })
+
+  it('shows and copies the selected account private key', async () => {
+    // Scenario: the user exports the currently selected party without a password re-check.
+    const user = userEvent.setup()
+    const copied: string[] = []
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: {
+        writeText: async (value: string) => {
+          copied.push(value)
+        },
+      },
+    })
+    const privateKey = 'aa'.repeat(32)
+    renderWithVault(
+      {
+        exportPrivateKey: (accountId) => {
+          assert.equal(accountId, PRIMARY_ACCOUNT.id)
+          return privateKey
+        },
+      },
+      <ExportPrivateKeyView />,
+    )
+
+    // Expected setup state: account context and secret key are visible in the export screen.
+    assert.ok(screen.getByText(PRIMARY_ACCOUNT.name))
+    assert.ok(screen.getByText(PRIMARY_ACCOUNT.partyId))
+    assert.ok(screen.getByText(privateKey))
+
+    // Action: copy the visible private key through the explicit copy control.
+    await user.click(screen.getByRole('button', { name: /^copy private key$/i }))
+
+    // Expected result: the copied value is exactly the selected party private key.
+    await waitFor(() => assert.deepEqual(copied, [privateKey]))
+  })
+
+  it('shows an empty state when no account is selected', () => {
+    // Scenario: export is unavailable until the wallet has a selected account.
+    renderWithVault({ accounts: [], primary: null }, <ExportPrivateKeyView />)
+
+    // Expected result: no secret is requested or shown.
+    assert.ok(screen.getByText(/no selected account/i))
+  })
+})
diff --git a/carpincho-wallet/test/components/SecurityPanel.test.tsx b/carpincho-wallet/test/components/SecurityPanel.test.tsx
index 7472742f..078f228c 100644
--- a/carpincho-wallet/test/components/SecurityPanel.test.tsx
+++ b/carpincho-wallet/test/components/SecurityPanel.test.tsx
@@ -30,6 +30,7 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
+  exportPrivateKey: () => '',
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
index a71eb9bc..e8164dfb 100644
--- a/carpincho-wallet/test/components/SendConfirm.test.tsx
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -42,6 +42,7 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index bb10681d..b2106e1c 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -66,6 +66,7 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 045078a1..1d068974 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -37,6 +37,7 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/config/runtimeConfig.test.ts b/carpincho-wallet/test/config/runtimeConfig.test.ts
new file mode 100644
index 00000000..73345853
--- /dev/null
+++ b/carpincho-wallet/test/config/runtimeConfig.test.ts
@@ -0,0 +1,77 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { loadRuntimeConfig, saveRuntimeConfig } from '@/config/runtimeConfig'
+
+const originalChrome = (globalThis as { chrome?: unknown }).chrome
+
+// Runtime config tests cover the popup-to-background storage boundary.
+describe('runtime config storage', () => {
+  afterEach(() => {
+    // Cleanup: each scenario owns localStorage and a chrome storage shim.
+    localStorage.clear()
+    Object.defineProperty(globalThis, 'chrome', { configurable: true, value: originalChrome })
+  })
+
+  it('persists saved RPC config to chrome local storage for background requests', () => {
+    // Scenario: the popup saves a custom wallet-service endpoint that the MV3 worker must read.
+    const writes: Array<Record<string, unknown>> = []
+    Object.defineProperty(globalThis, 'chrome', {
+      configurable: true,
+      value: {
+        storage: {
+          local: {
+            set: (items: Record<string, unknown>) => {
+              writes.push(items)
+            },
+          },
+        },
+      },
+    })
+
+    // Action: save the same runtime config from the Settings screen path.
+    saveRuntimeConfig({ walletServiceRpcUrl: 'http://wallet.example/rpc' })
+
+    // Expected result: chrome.storage.local receives the sanitized config under its stable key.
+    assert.deepEqual(writes, [
+      {
+        'carpincho.runtime-config.v2': {
+          walletServiceRpcUrl: 'http://wallet.example/rpc',
+        },
+      },
+    ])
+  })
+
+  it('mirrors existing localStorage config into chrome local storage when loaded', () => {
+    // Scenario: users may already have a custom endpoint in popup localStorage from older builds.
+    localStorage.setItem(
+      'carpincho.runtime-config.v2',
+      JSON.stringify({ walletServiceRpcUrl: 'http://existing.example/rpc' }),
+    )
+    const writes: Array<Record<string, unknown>> = []
+    Object.defineProperty(globalThis, 'chrome', {
+      configurable: true,
+      value: {
+        storage: {
+          local: {
+            set: (items: Record<string, unknown>) => {
+              writes.push(items)
+            },
+          },
+        },
+      },
+    })
+
+    // Action: load the runtime config through the same hook initializer used by the popup UI.
+    const loaded = loadRuntimeConfig()
+
+    // Expected result: the popup value is mirrored for future service-worker requests.
+    assert.equal(loaded.walletServiceRpcUrl, 'http://existing.example/rpc')
+    assert.deepEqual(writes, [
+      {
+        'carpincho.runtime-config.v2': {
+          walletServiceRpcUrl: 'http://existing.example/rpc',
+        },
+      },
+    ])
+  })
+})
diff --git a/carpincho-wallet/test/extensionBridge.test.ts b/carpincho-wallet/test/extensionBridge.test.ts
index cde31c16..2fb21494 100644
--- a/carpincho-wallet/test/extensionBridge.test.ts
+++ b/carpincho-wallet/test/extensionBridge.test.ts
@@ -16,6 +16,9 @@ const readText = (path: string): string => readFileSync(path, 'utf8')
 
 describe('extension postMessage bridge', () => {
   it('declares content script and background worker entrypoints', () => {
+    // Scenario: the extension must inject its provider bridge on every dApp page, while the
+    // background worker owns popup request coordination. The manifest should therefore expose the
+    // content script bundle at document start for all URLs and the module background worker.
     const manifest = readJson<{
       background?: { service_worker?: string; type?: string }
       content_scripts?: Array<{ matches?: string[]; js?: string[]; run_at?: string }>
@@ -25,7 +28,7 @@ describe('extension postMessage bridge', () => {
     assert.deepEqual(manifest.background, { service_worker: 'background.js', type: 'module' })
     assert.deepEqual(manifest.content_scripts?.[0]?.js, ['contentScript.js'])
     assert.equal(manifest.content_scripts?.[0]?.run_at, 'document_start')
-    assert.ok(manifest.content_scripts?.[0]?.matches?.includes('http://localhost/*'))
+    assert.ok(manifest.content_scripts?.[0]?.matches?.includes('<all_urls>'))
     assert.match(
       viteConfig,
       /contentScript: resolve\(__dirname, 'src\/extension\/contentScript\.ts'\)/,
diff --git a/carpincho-wallet/test/extensionManifest.test.ts b/carpincho-wallet/test/extensionManifest.test.ts
index 723f8b76..47326b96 100644
--- a/carpincho-wallet/test/extensionManifest.test.ts
+++ b/carpincho-wallet/test/extensionManifest.test.ts
@@ -7,6 +7,9 @@ const readText = (path: string): string => readFileSync(path, 'utf8')
 
 describe('extension packaging', () => {
   it('defines a local Manifest V3 extension popup', () => {
+    // Scenario: the browser extension package should be a Manifest V3 popup wallet that can
+    // observe any dApp origin. The content script match pattern and host permissions must stay
+    // broad enough for local and deployed dApps while the popup assets remain local extension files.
     const manifest = readJson<{
       manifest_version?: number
       name?: string
@@ -24,8 +27,7 @@ describe('extension packaging', () => {
     assert.equal(manifest.icons?.['128'], 'icons/carpincho-128.png')
     assert.ok(manifest.permissions?.includes('storage'))
     assert.ok(manifest.permissions?.includes('activeTab'))
-    assert.ok(manifest.host_permissions?.includes('http://localhost/*'))
-    assert.ok(manifest.host_permissions?.includes('http://127.0.0.1/*'))
+    assert.ok(manifest.host_permissions?.includes('<all_urls>'))
   })
 
   it('sources the built manifest version from the monorepo root package.json', () => {
diff --git a/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx b/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
index 7ba53f1a..d69de76f 100644
--- a/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
+++ b/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
@@ -17,7 +17,7 @@ const StatusProbe = (): JSX.Element => {
 const installStatusResponse = (connected: boolean, networkId = 'canton:local'): void => {
   globalThis.fetch = async (input) => {
     // The hook should probe the configured JSON-RPC endpoint with the status method.
-    assert.equal(String(input), 'http://localhost:3010/rpc')
+    assert.equal(String(input), 'http://157.245.139.105:3010/rpc')
     return new Response(
       JSON.stringify({
         result: {
diff --git a/carpincho-wallet/test/ledger/contracts.test.ts b/carpincho-wallet/test/ledger/contracts.test.ts
new file mode 100644
index 00000000..88a23ce2
--- /dev/null
+++ b/carpincho-wallet/test/ledger/contracts.test.ts
@@ -0,0 +1,265 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import {
+  type ActiveContract,
+  createContract,
+  exerciseContract,
+  listActiveContracts,
+} from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+
+const originalFetch = globalThis.fetch
+
+const ACCOUNT: AccountPublic = {
+  // Contract utility actions are signed by the active vault account's Canton party.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+describe('ledger contract helpers', () => {
+  afterEach(() => {
+    // Each scenario owns the JSON-RPC fake so call ordering stays explicit.
+    globalThis.fetch = originalFetch
+    localStorage.clear()
+  })
+
+  it('creates a contract by preparing a CreateCommand and signing with the active account', async () => {
+    // Scenario: a developer pastes a template id and JSON payload into Carpincho.
+    // The helper must build the ledger CreateCommand, ask wallet-service to prepare it,
+    // sign only the prepared hash locally, submit the signature, and record the raw command.
+    const calls: Array<{ method: string; params: Record<string, unknown> }> = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as {
+        method: string
+        params: Record<string, unknown>
+      }
+      calls.push({ method: body.method, params: body.params })
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-create',
+              preparedTransactionHash: 'prepared-create-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(
+          JSON.stringify({ result: { updateId: 'update-1', completionOffset: 42 } }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+    const recorded: unknown[] = []
+
+    const result = await createContract({
+      account: ACCOUNT,
+      templateId: 'pkg:Module:Template',
+      createArguments: { admin: 'alice::party' },
+      signMessage: async (accountId, messageBase64) => {
+        assert.equal(accountId, 'account-1')
+        assert.equal(messageBase64, 'prepared-create-hash')
+        return 'signature-base64'
+      },
+      recordTransaction: async (tx) => {
+        recorded.push(tx)
+        return { ...tx, id: 'tx-1', createdAt: 2 }
+      },
+    })
+
+    assert.deepEqual(result, { updateId: 'update-1', completionOffset: 42 })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, {
+      partyId: 'alice::party',
+      actAs: ['alice::party'],
+      commands: [
+        {
+          CreateCommand: {
+            templateId: 'pkg:Module:Template',
+            createArguments: { admin: 'alice::party' },
+          },
+        },
+      ],
+    })
+    assert.equal((recorded[0] as { method?: string } | undefined)?.method, 'ledger.contract.create')
+  })
+
+  it('exercises a choice by preparing an ExerciseCommand and signing with the active account', async () => {
+    // Scenario: a developer has a contract id and a raw DAML choice argument.
+    // The helper should build exactly one ExerciseCommand, keep signing local, submit it,
+    // and preserve the original command in activity history for audit.
+    const calls: Array<{ method: string; params: Record<string, unknown> }> = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as {
+        method: string
+        params: Record<string, unknown>
+      }
+      calls.push({ method: body.method, params: body.params })
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-exercise',
+              preparedTransactionHash: 'prepared-exercise-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(
+          JSON.stringify({ result: { updateId: 'exercise-update-1', completionOffset: 43 } }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+    const recorded: unknown[] = []
+
+    const result = await exerciseContract({
+      account: ACCOUNT,
+      templateId: 'pkg:Module:Template',
+      contractId: 'cid-1',
+      choice: 'Template_DoThing',
+      choiceArgument: { receiver: 'bob::party', amount: '5.0' },
+      signMessage: async (accountId, messageBase64) => {
+        assert.equal(accountId, 'account-1')
+        assert.equal(messageBase64, 'prepared-exercise-hash')
+        return 'signature-base64'
+      },
+      recordTransaction: async (tx) => {
+        recorded.push(tx)
+        return { ...tx, id: 'tx-2', createdAt: 3 }
+      },
+    })
+
+    assert.deepEqual(result, { updateId: 'exercise-update-1', completionOffset: 43 })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, {
+      partyId: 'alice::party',
+      actAs: ['alice::party'],
+      commands: [
+        {
+          ExerciseCommand: {
+            templateId: 'pkg:Module:Template',
+            contractId: 'cid-1',
+            choice: 'Template_DoThing',
+            choiceArgument: { receiver: 'bob::party', amount: '5.0' },
+          },
+        },
+      ],
+    })
+    assert.equal(
+      (recorded[0] as { method?: string } | undefined)?.method,
+      'ledger.contract.exercise',
+    )
+  })
+
+  it('lists active contracts for a party through the wallet-service ledgerApi proxy', async () => {
+    // Scenario: the Contracts tab shows the active ledger state for the selected party.
+    // The helper should request ACS from JSON API v2 and preserve contract ids, template ids,
+    // create arguments, and offsets so the UI can inspect the exact ledger payload.
+    const contracts: ActiveContract[] = [
+      {
+        contractId: 'cid-1',
+        templateId: 'pkg:Module:Template',
+        createArgument: { admin: 'alice::party' },
+        createdOffset: 41,
+      },
+      {
+        contractId: 'cid-other',
+        templateId: 'pkg:Module:Other',
+        createArgument: { admin: 'alice::party' },
+        createdOffset: 42,
+      },
+    ]
+    const calls: Array<{ method: string; params: Record<string, unknown> }> = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as {
+        method: string
+        params: Record<string, unknown>
+      }
+      calls.push({ method: body.method, params: body.params })
+      if (calls.length === 1) {
+        return new Response(JSON.stringify({ result: { offset: 99 } }), { status: 200 })
+      }
+      return new Response(
+        JSON.stringify({
+          result: contracts.map((contract) => ({
+            contractEntry: {
+              JsActiveContract: {
+                createdEvent: {
+                  contractId: contract.contractId,
+                  templateId: contract.templateId,
+                  createArgument: contract.createArgument,
+                  offset: contract.createdOffset,
+                },
+              },
+            },
+          })),
+        }),
+        { status: 200 },
+      )
+    }) as typeof globalThis.fetch
+
+    const result = await listActiveContracts({
+      partyId: 'alice::party',
+      templateId: 'pkg:Module:Template',
+    })
+
+    assert.deepEqual(result, [contracts[0]])
+    assert.deepEqual(calls, [
+      {
+        method: 'ledgerApi',
+        params: {
+          requestMethod: 'get',
+          resource: '/v2/state/ledger-end',
+        },
+      },
+      {
+        method: 'ledgerApi',
+        params: {
+          requestMethod: 'post',
+          resource: '/v2/state/active-contracts',
+          body: {
+            filter: {
+              filtersByParty: {
+                'alice::party': {
+                  cumulative: [
+                    {
+                      identifierFilter: {
+                        WildcardFilter: {
+                          value: {
+                            includeCreatedEventBlob: false,
+                          },
+                        },
+                      },
+                    },
+                  ],
+                },
+              },
+            },
+            activeAtOffset: 99,
+            verbose: true,
+          },
+        },
+      },
+    ])
+  })
+})
diff --git a/carpincho-wallet/test/utils/json.test.ts b/carpincho-wallet/test/utils/json.test.ts
new file mode 100644
index 00000000..3b997dba
--- /dev/null
+++ b/carpincho-wallet/test/utils/json.test.ts
@@ -0,0 +1,33 @@
+import { strict as assert } from 'node:assert'
+import { describe, it } from 'node:test'
+import { formatJsonInput, parseJsonObject } from '@/utils/json'
+
+describe('ledger JSON input helpers', () => {
+  it('parses and formats loose DAML record arguments', () => {
+    // Scenario: a developer pastes a quick DAML-style record instead of strict JSON.
+    // The parser accepts unquoted keys, unquoted string values, nested records, and
+    // newline separators, then returns the canonical object the ledger command needs.
+    const input = `{
+      owner: alice::party
+      instrumentId: {
+        admin: admin::party
+        id: BNT
+      }
+      amount: 10.5
+      locked: false
+    }`
+
+    const result = parseJsonObject(input, 'Arguments')
+
+    assert.deepEqual(result, {
+      owner: 'alice::party',
+      instrumentId: {
+        admin: 'admin::party',
+        id: 'BNT',
+      },
+      amount: 10.5,
+      locked: false,
+    })
+    assert.equal(formatJsonInput(input, 'Arguments'), JSON.stringify(result, null, 2))
+  })
+})
diff --git a/carpincho-wallet/test/vault/exportPrivateKey.test.tsx b/carpincho-wallet/test/vault/exportPrivateKey.test.tsx
new file mode 100644
index 00000000..83339d85
--- /dev/null
+++ b/carpincho-wallet/test/vault/exportPrivateKey.test.tsx
@@ -0,0 +1,71 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, beforeEach, describe, it } from 'node:test'
+import { act, cleanup, render } from '@testing-library/react'
+import { useVault } from '@/vault/useVault'
+import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
+
+// Captures the live vault context so tests can exercise real encrypted-vault mutations.
+const captureVault = (): { ref: { current: VaultContextValue | null } } => {
+  const ref: { current: VaultContextValue | null } = { current: null }
+  const Probe = (): null => {
+    ref.current = useVault()
+    return null
+  }
+  render(
+    <VaultProvider>
+      <Probe />
+    </VaultProvider>,
+  )
+  return { ref }
+}
+
+// Export tests cover the only intentional path from vault secrets to UI.
+describe('VaultContext.exportPrivateKey', () => {
+  beforeEach(() => {
+    // Setup: each scenario starts with an empty browser vault store.
+    localStorage.clear()
+  })
+
+  afterEach(() => {
+    // Cleanup: remove mounted providers and encrypted vault blobs between scenarios.
+    cleanup()
+    localStorage.clear()
+  })
+
+  it('returns the private key for the requested unlocked account only', async () => {
+    // Scenario: export uses an explicit secret accessor so public account lists stay secret-free.
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.addAccount({
+        name: 'alice',
+        partyId: 'alice::party',
+        network: 'localnet',
+        privateKeyHex: 'aa'.repeat(32),
+        publicKeyBase64: 'alice-public',
+      })
+      await ref.current?.addAccount({
+        name: 'bob',
+        partyId: 'bob::party',
+        network: 'localnet',
+        privateKeyHex: 'bb'.repeat(32),
+        publicKeyBase64: 'bob-public',
+      })
+    })
+    const bob = ref.current?.accounts.find((account) => account.name === 'bob')
+
+    // Expected result: exporting Bob returns Bob's key and never falls back to Alice's key.
+    assert.equal(ref.current?.exportPrivateKey(bob?.id ?? ''), 'bb'.repeat(32))
+  })
+
+  it('rejects unknown accounts', async () => {
+    // Scenario: callers must provide an account id that exists in the unlocked vault.
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+    })
+
+    // Expected result: invalid ids fail instead of returning an arbitrary secret.
+    assert.throws(() => ref.current?.exportPrivateKey('missing'), /unknown account/i)
+  })
+})
diff --git a/carpincho-wallet/test/vault/keypair.test.ts b/carpincho-wallet/test/vault/keypair.test.ts
new file mode 100644
index 00000000..1132345c
--- /dev/null
+++ b/carpincho-wallet/test/vault/keypair.test.ts
@@ -0,0 +1,26 @@
+import { strict as assert } from 'node:assert'
+import { describe, it } from 'node:test'
+import { derivePublicKeyBase64, generateKeypair } from '@/vault/keypair'
+
+// Keypair import covers the cryptographic boundary used by private-key account import.
+describe('derivePublicKeyBase64', () => {
+  it('derives the public key for an imported private key', async () => {
+    // Scenario: an imported party only provides the private key, so the wallet must derive the
+    // public key used by provider payloads from that same secret.
+    const keypair = await generateKeypair()
+
+    // Action: derive the public key from the imported private key hex.
+    const derived = await derivePublicKeyBase64(keypair.privateKeyHex)
+
+    // Expected result: the derived public key matches the keypair generated by the wallet.
+    assert.equal(derived, keypair.publicKeyBase64)
+  })
+
+  it('rejects malformed imported private keys before vault mutation', async () => {
+    // Scenario: import should fail before addAccount when the private key is not valid hex.
+    const invalidPrivateKey = 'not-hex'
+
+    // Expected result: malformed input is reported as an invalid private key.
+    await assert.rejects(() => derivePublicKeyBase64(invalidPrivateKey), /invalid private key/i)
+  })
+})
diff --git a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
new file mode 100644
index 00000000..7f1b6a0e
--- /dev/null
+++ b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
@@ -0,0 +1,19 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, test } from 'node:test'
+import { cleanup, render, waitFor } from '@testing-library/react'
+import { isPasswordAcceptable, usePasswordStrengthReady } from '@/vault/passwordStrength'
+
+const Probe = (): JSX.Element => (
+  <span data-testid="ready">{usePasswordStrengthReady() ? 'ready' : 'loading'}</span>
+)
+
+afterEach(() => {
+  cleanup()
+})
+
+test('accepts a short password once it meets the strength score', async () => {
+  const { getByTestId } = render(<Probe />)
+  await waitFor(() => assert.equal(getByTestId('ready').textContent, 'ready'))
+  // 8 chars (under the former 9-char floor) but scores 1, the default minimum.
+  assert.equal(isPasswordAcceptable('monkey99'), true)
+})
diff --git a/carpincho-wallet/test/vault/passwordStrength.test.ts b/carpincho-wallet/test/vault/passwordStrength.test.ts
new file mode 100644
index 00000000..e6f3733f
--- /dev/null
+++ b/carpincho-wallet/test/vault/passwordStrength.test.ts
@@ -0,0 +1,23 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { MIN_PASSWORD_SCORE, parsePasswordScore } from '@/vault/passwordStrength'
+
+test('parsePasswordScore accepts in-range integer scores', () => {
+  assert.equal(parsePasswordScore('0'), 0)
+  assert.equal(parsePasswordScore('3'), 3)
+  assert.equal(parsePasswordScore('4'), 4)
+})
+
+test('parsePasswordScore falls back to 1 for missing, empty, or invalid values', () => {
+  assert.equal(parsePasswordScore(undefined), 1)
+  assert.equal(parsePasswordScore(''), 1)
+  assert.equal(parsePasswordScore('   '), 1)
+  assert.equal(parsePasswordScore('abc'), 1)
+  assert.equal(parsePasswordScore('-1'), 1)
+  assert.equal(parsePasswordScore('5'), 1)
+  assert.equal(parsePasswordScore('2.5'), 1)
+})
+
+test('MIN_PASSWORD_SCORE defaults to 1 when VITE_MIN_PASSWORD_SCORE is unset', () => {
+  assert.equal(MIN_PASSWORD_SCORE, 1)
+})
diff --git a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
index 970fb02e..77b0cfa6 100644
--- a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
+++ b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
@@ -32,7 +32,7 @@ describe('ConnectionSettingsView', () => {
     render(<ConnectionSettingsView />)
     assert.equal(
       (screen.getByLabelText('Wallet-service RPC URL') as HTMLInputElement).value,
-      'http://localhost:3010/rpc',
+      'http://157.245.139.105:3010/rpc',
     )
     assert.equal(screen.queryByLabelText('Canton network'), null)
   })
diff --git a/carpincho-wallet/test/views/CreateVault.test.tsx b/carpincho-wallet/test/views/CreateVault.test.tsx
index ec3b6c55..ec8a49da 100644
--- a/carpincho-wallet/test/views/CreateVault.test.tsx
+++ b/carpincho-wallet/test/views/CreateVault.test.tsx
@@ -28,6 +28,7 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
+  exportPrivateKey: () => '',
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index 53e9e1fd..da712545 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -1,10 +1,13 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 import { OnboardingFlow } from '@/views/onboarding/OnboardingFlow'
 
+const originalFetch = globalThis.fetch
+
 const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue =>
   ({
     isLocked: false,
@@ -28,6 +31,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
@@ -47,9 +51,25 @@ const renderFlow = (overrides: Partial<VaultContextValue> = {}): void => {
   )
 }
 
+// Installs a healthy wallet-service status response so onboarding can render the real footer state.
+const installWalletServiceStatus = (): void => {
+  globalThis.fetch = async () =>
+    new Response(
+      JSON.stringify({
+        result: {
+          connection: { isNetworkConnected: true },
+          network: { networkId: 'canton:local' },
+        },
+      }),
+      { status: 200 },
+    )
+}
+
 describe('OnboardingFlow', () => {
   afterEach(() => {
     cleanup()
+    localStorage.clear()
+    globalThis.fetch = originalFetch
   })
 
   it('shows step 1 (create vault) active when there is no vault', () => {
@@ -60,6 +80,9 @@ describe('OnboardingFlow', () => {
   })
 
   it('shows step 2 (create account) active with step 1 complete when the vault has no accounts', () => {
+    // Step 2 owns the live footer, so status polling is isolated from the test environment.
+    installWalletServiceStatus()
+
     renderFlow({ hasVault: true, accounts: [] })
     assert.ok(screen.getByTestId('add-account-hint-input'))
     assert.equal(screen.getByTestId('step-1').getAttribute('data-state'), 'complete')
@@ -67,7 +90,27 @@ describe('OnboardingFlow', () => {
   })
 
   it('does not render a Cancel control on the account step', () => {
+    // The connection footer is present, but the account form should remain a one-action setup flow.
+    installWalletServiceStatus()
+
     renderFlow({ hasVault: true, accounts: [] })
     assert.equal(screen.queryByTestId('add-account-cancel'), null)
   })
+
+  it('opens wallet-service settings from the account step footer', async () => {
+    // Scenario: after the password step creates the vault, the user may still need to point
+    // Carpincho at a different wallet-service before creating the first Canton party.
+    installWalletServiceStatus()
+
+    // Render onboarding directly at step 2: the vault exists, but no account has been created yet.
+    const user = userEvent.setup()
+    renderFlow({ hasVault: true, accounts: [] })
+
+    // The existing footer should report the configured wallet-service status on this step.
+    await waitFor(() => assert.ok(screen.getByText('network:local')))
+
+    // Opening the footer settings should show the same wallet-service URL field used after setup.
+    await user.click(screen.getByRole('button', { name: 'Connection settings' }))
+    assert.ok(screen.getByLabelText('Wallet-service RPC URL'))
+  })
 })

From 42ba779153c0922ec4473bae32371f38275e0cf4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:37:31 -0300
Subject: [PATCH 002/121] chore(carpincho-wallet): default wallet-service RPC
 to localhost

The darkpool default targeted the FiveNorth devnet validator. On the
canton-barebones-splice line the wallet-service runs locally, so default the
RPC endpoint to http://localhost:3010/rpc (still overridable via runtime config).
---
 carpincho-wallet/src/config/runtimeConfig.ts                | 2 +-
 carpincho-wallet/src/views/ConnectionSettingsView.tsx       | 2 +-
 carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx | 2 +-
 carpincho-wallet/test/views/ConnectionSettingsView.test.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/carpincho-wallet/src/config/runtimeConfig.ts b/carpincho-wallet/src/config/runtimeConfig.ts
index 0366962f..01067610 100644
--- a/carpincho-wallet/src/config/runtimeConfig.ts
+++ b/carpincho-wallet/src/config/runtimeConfig.ts
@@ -5,7 +5,7 @@ export interface RuntimeConfig {
 const STORAGE_KEY = 'carpincho.runtime-config.v2'
 
 const DEFAULT_RUNTIME_CONFIG: RuntimeConfig = {
-  walletServiceRpcUrl: 'http://157.245.139.105:3010/rpc',
+  walletServiceRpcUrl: 'http://localhost:3010/rpc',
 }
 
 type ChromeLocalStorage = {
diff --git a/carpincho-wallet/src/views/ConnectionSettingsView.tsx b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
index 97f68f45..10f44763 100644
--- a/carpincho-wallet/src/views/ConnectionSettingsView.tsx
+++ b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
@@ -72,7 +72,7 @@ export const ConnectionSettingsView = (): JSX.Element => {
           className="font-mono"
           value={draft.walletServiceRpcUrl}
           onChange={(e) => setDraft((prev) => ({ ...prev, walletServiceRpcUrl: e.target.value }))}
-          placeholder="http://157.245.139.105:3010/rpc"
+          placeholder="http://localhost:3010/rpc"
         />
       </div>
 
diff --git a/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx b/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
index d69de76f..7ba53f1a 100644
--- a/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
+++ b/carpincho-wallet/test/hooks/useWalletServiceStatus.test.tsx
@@ -17,7 +17,7 @@ const StatusProbe = (): JSX.Element => {
 const installStatusResponse = (connected: boolean, networkId = 'canton:local'): void => {
   globalThis.fetch = async (input) => {
     // The hook should probe the configured JSON-RPC endpoint with the status method.
-    assert.equal(String(input), 'http://157.245.139.105:3010/rpc')
+    assert.equal(String(input), 'http://localhost:3010/rpc')
     return new Response(
       JSON.stringify({
         result: {
diff --git a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
index 77b0cfa6..970fb02e 100644
--- a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
+++ b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
@@ -32,7 +32,7 @@ describe('ConnectionSettingsView', () => {
     render(<ConnectionSettingsView />)
     assert.equal(
       (screen.getByLabelText('Wallet-service RPC URL') as HTMLInputElement).value,
-      'http://157.245.139.105:3010/rpc',
+      'http://localhost:3010/rpc',
     )
     assert.equal(screen.queryByLabelText('Canton network'), null)
   })

From f4b7768272111f89d9ff76a462e659443b3dd81f Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:38:02 -0300
Subject: [PATCH 003/121] feat(wallet-service): add amulet faucet tap

Add the amulet.tap JSON-RPC method that prepares the fixed 100 AMT DevNet tap
command for the receiver party, so Carpincho can sign it locally. Wires the real
SDK path (via getTokenSdk), the mock handler, and the supportedMethods lists.
---
 canton-barebones/wallet-service/src/mock.ts   |  6 ++++
 canton-barebones/wallet-service/src/rpc.ts    | 19 +++++++++++
 .../wallet-service/test/rpc.test.ts           | 33 +++++++++++++++++++
 3 files changed, 58 insertions(+)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index 4b10e0c8..b746b100 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -159,6 +159,11 @@ export const createMockRpc = (
           return rpcResult(id, { commands: [], disclosedContracts: [] })
         case 'amulet.preapproval.status':
           return rpcResult(id, { active: false, expired: false })
+        case 'amulet.tap':
+          return rpcResult(id, {
+            commands: { ExerciseCommand: { choice: 'AmuletRules_DevNet_Tap' } },
+            disclosedContracts: [],
+          })
         case 'amulet.preapproval.create':
         case 'amulet.preapproval.cancel':
           return rpcResult(id, { commands: [], disclosedContracts: [] })
@@ -218,6 +223,7 @@ export const createMockRpc = (
       'cip56.listHoldings',
       'cip56.createTransfer',
       'amulet.preapproval.status',
+      'amulet.tap',
       'amulet.preapproval.create',
       'amulet.preapproval.acceptProposal',
       'amulet.preapproval.cancel',
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 31c88f63..617ffa6a 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -105,6 +105,7 @@ type ActiveJsContractReader = {
 
 type Cip56TokenSdk = {
   amulet?: {
+    tap?: (receiver: string, amount: string) => Promise<[unknown, unknown[]]>
     preapproval: {
       ctx?: {
         validatorParty?: string
@@ -256,6 +257,7 @@ const TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID =
   '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal'
 const TRANSFER_PREAPPROVAL_PROPOSAL_MAX_ATTEMPTS = 31
 const TRANSFER_PREAPPROVAL_PROPOSAL_RETRY_MS = 1_000
+const AMULET_TAP_AMOUNT = '100'
 
 export const rpcResult = (id: JsonRpcId, result: unknown): JsonRpcSuccess => ({
   jsonrpc: '2.0',
@@ -880,6 +882,20 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     }
   }
 
+  // Prepares the fixed DevNet tap command so Carpincho can sign as the receiver.
+  const amuletTap = async (
+    params: unknown,
+  ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
+    const p = objectParam<Record<string, unknown>>(params, 'amulet.tap')
+    const receiver = requiredStringParam(p, 'receiver')
+    const sdk = await getTokenSdk()
+    if (sdk.amulet?.tap === undefined) {
+      throw new Error('Amulet tap is unavailable')
+    }
+    const [commands, disclosedContracts] = await sdk.amulet.tap(receiver, AMULET_TAP_AMOUNT)
+    return { commands, disclosedContracts }
+  }
+
   // Prepares the receiver-signed proposal that asks the validator provider to enable auto-accept.
   const amuletPreapprovalCreate = async (
     params: unknown,
@@ -1082,6 +1098,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await cip56CreateTransfer(request.params))
         case 'amulet.preapproval.status':
           return rpcResult(id, await amuletPreapprovalStatus(request.params))
+        case 'amulet.tap':
+          return rpcResult(id, await amuletTap(request.params))
         case 'amulet.preapproval.create':
           return rpcResult(id, await amuletPreapprovalCreate(request.params))
         case 'amulet.preapproval.acceptProposal':
@@ -1137,6 +1155,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'cip56.acceptTransfer',
       'cip56.createTransfer',
       'amulet.preapproval.status',
+      'amulet.tap',
       'amulet.preapproval.create',
       'amulet.preapproval.acceptProposal',
       'amulet.preapproval.cancel',
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index b514a4b2..09437d81 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -465,6 +465,39 @@ describe('CIP-56 token helpers', () => {
     })
   })
 
+  it('prepares a fixed DevNet Amulet tap command for the receiver party', async () => {
+    // Scenario: Carpincho needs a test-only faucet button that requests a fixed
+    // 100 AMT for the selected external party while preserving local signing.
+    const disclosedContracts = [{ contractId: 'tap-context-cid', createdEventBlob: 'blob' }]
+    const seen: { receiver?: string; amount?: string } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          tap: async (receiver: string, amount: string) => {
+            seen.receiver = receiver
+            seen.amount = amount
+            return [{ ExerciseCommand: { choice: 'AmuletRules_DevNet_Tap' } }, disclosedContracts]
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.tap',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      commands: { ExerciseCommand: { choice: 'AmuletRules_DevNet_Tap' } },
+      disclosedContracts,
+    })
+    assert.equal(seen.receiver, 'receiver::party')
+    assert.equal(seen.amount, '100')
+  })
+
   it('accepts an Amulet transfer preapproval proposal as the validator provider', async () => {
     // Scenario: after Carpincho creates the receiver-signed proposal, the local
     // validator provider must accept it with a normal participant submit.

From 7296386fc632d89af5d4e594e200071e25298b20 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 16:44:24 -0300
Subject: [PATCH 004/121] fix(wallet-service): pass amulet registry as URL

The Amulet SDK resolves relative registry endpoints (e.g.
/registry/transfer-instruction/v1/transfer-factory) against the configured
registryUrl. Passing it as a raw string made the SDK fail to parse those URLs,
breaking amulet.tap and cip56 transfers; wrap it in new URL() like the sibling
call sites.
---
 canton-barebones/wallet-service/src/rpc.ts       | 2 +-
 canton-barebones/wallet-service/test/rpc.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 617ffa6a..1fe48a24 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -573,7 +573,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       amulet: {
         validatorUrl: config.splice.validatorUrl,
         scanApiUrl: config.splice.scanApiUrl,
-        registryUrl: config.splice.registryApiUrl,
+        registryUrl: new URL(config.splice.registryApiUrl),
         auth,
       },
     })
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 09437d81..a01ba37d 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -246,7 +246,7 @@ describe('CIP-56 token helpers', () => {
     assert.deepEqual(seen.amuletConfig, {
       validatorUrl: 'http://localhost:2000/api/validator',
       scanApiUrl: 'http://scan.localhost:4000/api/scan',
-      registryUrl: 'http://localhost:2000/api/validator/v0/scan-proxy',
+      registryUrl: new URL('http://localhost:2000/api/validator/v0/scan-proxy'),
       auth: { method: 'static', token: 'backend.jwt' },
     })
   })

From f91d6a0e4e295be9ccda48f87511a4e52550cdc7 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:07:46 -0300
Subject: [PATCH 005/121] fix(carpincho-wallet): fail closed on password
 strength and enforce it at the vault boundary

Default the minimum zxcvbn score to 3 when VITE_MIN_PASSWORD_SCORE is unset or
invalid (was 1, fail-open), while still honoring an explicit lower override for
local dev. Enforce isPasswordAcceptable in setup()/changePassword() so the score
gate no longer lives only in the disablable submit button.
---
 carpincho-wallet/.env.example                 |  3 ++-
 carpincho-wallet/src/vault/VaultContext.tsx   |  9 +++++++
 .../src/vault/passwordStrength.ts             |  9 ++++++-
 .../test/vault/passwordAcceptance.test.tsx    |  8 ++++---
 .../test/vault/passwordStrength.test.ts       | 24 +++++++++++--------
 5 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/carpincho-wallet/.env.example b/carpincho-wallet/.env.example
index fff96df2..42ba5295 100644
--- a/carpincho-wallet/.env.example
+++ b/carpincho-wallet/.env.example
@@ -1,4 +1,5 @@
 # Optional. Minimum zxcvbn strength score (0-4) required to set a vault password.
 # 0 too weak, 1 very guessable, 2 fair, 3 strong, 4 excellent.
-# Defaults to 1 when unset. Use 3 for a security-conscious build.
+# Fails closed: defaults to 3 (strong) when unset or invalid. Set a lower value
+# only to relax the bar for local development.
 # VITE_MIN_PASSWORD_SCORE=1
diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 84ff1bf6..7983ce55 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -16,6 +16,7 @@ import { persistWalletSnapshot } from '@/extension/walletSnapshot'
 import { accountToCip103Wallet } from '@/provider/accounts'
 import { assertSecureContext, decryptVault, encryptVault } from '@/vault/crypto'
 import { signMessageBase64 } from '@/vault/keypair'
+import { ensurePasswordStrengthReady, isPasswordAcceptable } from '@/vault/passwordStrength'
 import {
   clearLockAt,
   clearSessionPassword,
@@ -168,6 +169,10 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       if (password.length < 8) {
         throw new Error('password must be at least 8 characters')
       }
+      await ensurePasswordStrengthReady()
+      if (!isPasswordAcceptable(password)) {
+        throw new Error('password is too weak')
+      }
       const plaintext: VaultPlaintext = {
         v: 1,
         primaryAccountId: null,
@@ -379,6 +384,10 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       if (newPassword.length < 8) {
         throw new Error('new password must be at least 8 characters')
       }
+      await ensurePasswordStrengthReady()
+      if (!isPasswordAcceptable(newPassword)) {
+        throw new Error('new password is too weak')
+      }
       const blob = await encryptVault(newPassword, JSON.stringify(unlockedPlaintext))
       rotateVault(blob)
       cachedPassword = newPassword
diff --git a/carpincho-wallet/src/vault/passwordStrength.ts b/carpincho-wallet/src/vault/passwordStrength.ts
index a69138a4..73e045c5 100644
--- a/carpincho-wallet/src/vault/passwordStrength.ts
+++ b/carpincho-wallet/src/vault/passwordStrength.ts
@@ -1,7 +1,10 @@
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
 import { useEffect, useState } from 'react'
 
-const FALLBACK_PASSWORD_SCORE = 1
+// Fail closed: a missing or invalid VITE_MIN_PASSWORD_SCORE requires a strong
+// password (zxcvbn 3, "safely unguessable"). An explicit env value may still
+// lower the bar for local development.
+const FALLBACK_PASSWORD_SCORE = 3
 
 // zxcvbn scores run 0-4; anything missing, blank, or out of range falls back.
 export const parsePasswordScore = (raw: unknown): number => {
@@ -39,6 +42,10 @@ const ensureLoaded = (): Promise<void> => {
   return loadPromise
 }
 
+// Lets non-UI callers (e.g. vault setup) await the zxcvbn language packs before
+// scoring, so strength enforcement at the boundary cannot pass on a stale score.
+export const ensurePasswordStrengthReady = (): Promise<void> => ensureLoaded()
+
 let lastScoredPassword: string | null = null
 let lastScore = 0
 
diff --git a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
index 7f1b6a0e..819d312e 100644
--- a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
+++ b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
@@ -11,9 +11,11 @@ afterEach(() => {
   cleanup()
 })
 
-test('accepts a short password once it meets the strength score', async () => {
+test('rejects weak passwords and accepts strong ones at the default score', async () => {
   const { getByTestId } = render(<Probe />)
   await waitFor(() => assert.equal(getByTestId('ready').textContent, 'ready'))
-  // 8 chars (under the former 9-char floor) but scores 1, the default minimum.
-  assert.equal(isPasswordAcceptable('monkey99'), true)
+  // Default minimum is now zxcvbn 3 (fail closed): a guessable password is rejected.
+  assert.equal(isPasswordAcceptable('monkey99'), false)
+  // A strong passphrase clears the bar regardless of length.
+  assert.equal(isPasswordAcceptable('correct-horse-battery'), true)
 })
diff --git a/carpincho-wallet/test/vault/passwordStrength.test.ts b/carpincho-wallet/test/vault/passwordStrength.test.ts
index e6f3733f..3a07e52e 100644
--- a/carpincho-wallet/test/vault/passwordStrength.test.ts
+++ b/carpincho-wallet/test/vault/passwordStrength.test.ts
@@ -8,16 +8,20 @@ test('parsePasswordScore accepts in-range integer scores', () => {
   assert.equal(parsePasswordScore('4'), 4)
 })
 
-test('parsePasswordScore falls back to 1 for missing, empty, or invalid values', () => {
-  assert.equal(parsePasswordScore(undefined), 1)
-  assert.equal(parsePasswordScore(''), 1)
-  assert.equal(parsePasswordScore('   '), 1)
-  assert.equal(parsePasswordScore('abc'), 1)
-  assert.equal(parsePasswordScore('-1'), 1)
-  assert.equal(parsePasswordScore('5'), 1)
-  assert.equal(parsePasswordScore('2.5'), 1)
+test('parsePasswordScore fails closed to 3 for missing, empty, or invalid values', () => {
+  assert.equal(parsePasswordScore(undefined), 3)
+  assert.equal(parsePasswordScore(''), 3)
+  assert.equal(parsePasswordScore('   '), 3)
+  assert.equal(parsePasswordScore('abc'), 3)
+  assert.equal(parsePasswordScore('-1'), 3)
+  assert.equal(parsePasswordScore('5'), 3)
+  assert.equal(parsePasswordScore('2.5'), 3)
 })
 
-test('MIN_PASSWORD_SCORE defaults to 1 when VITE_MIN_PASSWORD_SCORE is unset', () => {
-  assert.equal(MIN_PASSWORD_SCORE, 1)
+test('parsePasswordScore still honors an explicit in-range override', () => {
+  assert.equal(parsePasswordScore('1'), 1)
+})
+
+test('MIN_PASSWORD_SCORE defaults to 3 when VITE_MIN_PASSWORD_SCORE is unset', () => {
+  assert.equal(MIN_PASSWORD_SCORE, 3)
 })

From 4e082cf8e47d9957f4c4c73a1fd10a205977e2a9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:08:13 -0300
Subject: [PATCH 006/121] fix(carpincho-wallet): re-auth before revealing
 private key and auto-clear clipboard

Gate ExportPrivateKeyView behind a fresh password confirmation (verifyPassword)
so an unattended unlocked popup cannot leak the raw key in two clicks. Copy now
goes through copySecret, which best-effort wipes the clipboard after 60s if it
still holds the key.
---
 .../src/components/PrivateKeyPanel.tsx        | 76 ++++++++++++++++---
 carpincho-wallet/src/utils/clipboard.ts       | 33 ++++++++
 .../test/components/PrivateKeyPanel.test.tsx  | 22 +++++-
 3 files changed, 118 insertions(+), 13 deletions(-)

diff --git a/carpincho-wallet/src/components/PrivateKeyPanel.tsx b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
index d3447947..7f27154c 100644
--- a/carpincho-wallet/src/components/PrivateKeyPanel.tsx
+++ b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
@@ -5,7 +5,7 @@ import { COPY_ICON } from '@/components/ui/icons'
 import { PasswordInput } from '@/components/ui/PasswordInput'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
-import { copyText } from '@/utils/clipboard'
+import { copySecret } from '@/utils/clipboard'
 import { derivePublicKeyBase64 } from '@/vault/keypair'
 import { useVault } from '@/vault/useVault'
 
@@ -133,10 +133,15 @@ export const ImportPrivateKeyForm = ({ onImported }: ImportPrivateKeyFormProps):
   )
 }
 
-// Reveals the selected party secret only through the explicit Settings export action.
+// Reveals the selected party secret only after a fresh password re-check, even though
+// the vault is already unlocked, so an unattended popup cannot leak the raw key.
 export const ExportPrivateKeyView = (): JSX.Element => {
   const v = useVault()
   const account = v.primary
+  const [revealed, setRevealed] = useState(false)
+  const [current, setCurrent] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
   if (account === null) {
     return (
       <p className="rounded-md border border-border bg-muted p-3 text-[0.92rem] text-muted-foreground">
@@ -145,6 +150,62 @@ export const ExportPrivateKeyView = (): JSX.Element => {
     )
   }
 
+  const onVerify = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    if (!v.verifyPassword(current)) {
+      setError('Incorrect password.')
+      return
+    }
+    setError(null)
+    setCurrent('')
+    setRevealed(true)
+  }
+
+  const accountSummary = (
+    <div className="rounded-md border border-border bg-muted p-3">
+      <p className="font-semibold text-foreground">{account.name}</p>
+      <p className="mt-1 break-all font-mono text-[0.82rem] text-muted-foreground">
+        {account.partyId}
+      </p>
+    </div>
+  )
+
+  if (!revealed) {
+    const hasError = error !== null
+    return (
+      <form
+        onSubmit={onVerify}
+        className="flex flex-col gap-4"
+      >
+        {accountSummary}
+        <p className="text-[0.85rem] text-muted-foreground">
+          Confirm your password to reveal this account's private key.
+        </p>
+        <PasswordInput
+          aria-label="Confirm password"
+          aria-errormessage={hasError ? 'export-private-key-error' : undefined}
+          placeholder="Current password"
+          autoComplete="current-password"
+          error={hasError}
+          value={current}
+          onChange={(event) => {
+            setCurrent(event.target.value)
+            setError(null)
+          }}
+        />
+        {hasError && (
+          <p
+            id="export-private-key-error"
+            className="text-[0.85rem] text-danger"
+          >
+            {error}
+          </p>
+        )}
+        <PrimaryButton type="submit">Reveal private key</PrimaryButton>
+      </form>
+    )
+  }
+
   let privateKey: string
   try {
     privateKey = v.exportPrivateKey(account.id)
@@ -155,19 +216,16 @@ export const ExportPrivateKeyView = (): JSX.Element => {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="rounded-md border border-border bg-muted p-3">
-        <p className="font-semibold text-foreground">{account.name}</p>
-        <p className="mt-1 break-all font-mono text-[0.82rem] text-muted-foreground">
-          {account.partyId}
-        </p>
-      </div>
+      {accountSummary}
       <div>
         <p className="mb-2 text-[0.85rem] font-semibold text-muted-foreground">Private key</p>
         <p className="max-h-40 overflow-y-auto break-all rounded-md border border-border-strong bg-surface p-3 font-mono text-[0.82rem] text-foreground">
           {privateKey}
         </p>
       </div>
-      <SecondaryButton onClick={() => copyText(privateKey, 'Private key copied.')}>
+      <SecondaryButton
+        onClick={() => copySecret(privateKey, 'Private key copied. Clipboard clears in 60s.')}
+      >
         {COPY_ICON}
         Copy private key
       </SecondaryButton>
diff --git a/carpincho-wallet/src/utils/clipboard.ts b/carpincho-wallet/src/utils/clipboard.ts
index 3b4ce01a..9cbc9735 100644
--- a/carpincho-wallet/src/utils/clipboard.ts
+++ b/carpincho-wallet/src/utils/clipboard.ts
@@ -1,5 +1,8 @@
 import { toast } from '@/components/ui/toast'
 
+// How long a copied secret may sit on the clipboard before we try to wipe it.
+const SECRET_CLIPBOARD_CLEAR_MS = 60_000
+
 // Copies arbitrary wallet text while keeping success and failure feedback consistent.
 export const copyText = (value: string, successMessage: string): void => {
   void navigator.clipboard
@@ -8,6 +11,36 @@ export const copyText = (value: string, successMessage: string): void => {
     .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
 }
 
+// Best-effort clipboard wipe: only clears if the clipboard still holds the secret,
+// so we never clobber whatever the user copied afterwards. Silently skips when the
+// browser denies clipboard reads (no extra permission is requested).
+const scheduleSecretClear = (secret: string): void => {
+  const handle = setTimeout(() => {
+    void (async () => {
+      try {
+        if ((await navigator.clipboard.readText()) === secret) {
+          await navigator.clipboard.writeText('')
+        }
+      } catch {
+        // readText unavailable or denied: leave the clipboard untouched.
+      }
+    })()
+  }, SECRET_CLIPBOARD_CLEAR_MS)
+  // Don't keep a Node event loop (tests) alive waiting on the wipe; harmless in the browser.
+  ;(handle as unknown as { unref?: () => void }).unref?.()
+}
+
+// Copies a sensitive value (e.g. a private key) and schedules a best-effort clipboard wipe.
+export const copySecret = (value: string, successMessage: string): void => {
+  void navigator.clipboard
+    .writeText(value)
+    .then(() => {
+      toast.success(successMessage)
+      scheduleSecretClear(value)
+    })
+    .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
+}
+
 // Copies a party id from account surfaces with a domain-specific confirmation.
 export const copyPartyId = (partyId: string): void => {
   copyText(partyId, 'Party ID copied')
diff --git a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
index 573f3924..34cc4fbb 100644
--- a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
+++ b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
@@ -160,8 +160,9 @@ describe('ExportPrivateKeyView', () => {
     })
   })
 
-  it('shows and copies the selected account private key', async () => {
-    // Scenario: the user exports the currently selected party without a password re-check.
+  it('reveals and copies the private key only after a password re-check', async () => {
+    // Scenario: the secret is gated behind a fresh password confirmation even though
+    // the vault is already unlocked.
     const user = userEvent.setup()
     const copied: string[] = []
     Object.defineProperty(navigator, 'clipboard', {
@@ -170,11 +171,13 @@ describe('ExportPrivateKeyView', () => {
         writeText: async (value: string) => {
           copied.push(value)
         },
+        readText: async () => '',
       },
     })
     const privateKey = 'aa'.repeat(32)
     renderWithVault(
       {
+        verifyPassword: (password) => password === 'correct-horse-battery',
         exportPrivateKey: (accountId) => {
           assert.equal(accountId, PRIMARY_ACCOUNT.id)
           return privateKey
@@ -183,12 +186,23 @@ describe('ExportPrivateKeyView', () => {
       <ExportPrivateKeyView />,
     )
 
-    // Expected setup state: account context and secret key are visible in the export screen.
+    // Expected setup state: account context is shown, but the secret stays hidden.
     assert.ok(screen.getByText(PRIMARY_ACCOUNT.name))
     assert.ok(screen.getByText(PRIMARY_ACCOUNT.partyId))
+    assert.equal(screen.queryByText(privateKey), null)
+
+    // Action: a wrong password keeps the key hidden.
+    await user.type(screen.getByLabelText(/confirm password/i), 'wrong')
+    await user.click(screen.getByRole('button', { name: /^reveal private key$/i }))
+    assert.ok(screen.getByText(/incorrect password/i))
+    assert.equal(screen.queryByText(privateKey), null)
+
+    // Action: the correct password reveals the secret, then it can be copied.
+    await user.clear(screen.getByLabelText(/confirm password/i))
+    await user.type(screen.getByLabelText(/confirm password/i), 'correct-horse-battery')
+    await user.click(screen.getByRole('button', { name: /^reveal private key$/i }))
     assert.ok(screen.getByText(privateKey))
 
-    // Action: copy the visible private key through the explicit copy control.
     await user.click(screen.getByRole('button', { name: /^copy private key$/i }))
 
     // Expected result: the copied value is exactly the selected party private key.

From 15f56b881548ca0cc1fffdd3827197ed6d34ec90 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:22:38 -0300
Subject: [PATCH 007/121] fix(carpincho-wallet): gate injected-provider account
 access behind per-origin approval

The content script injects on all origins, but the background returned account
identity (party ids, public keys) and queued signing for any site with no
approval. Add an origin permission model: connect from an unapproved origin is
queued for an explicit popup approval, account queries answer from an empty
snapshot until approved, and signing is refused for unapproved origins. Surface
the requesting origin on every approval card, and broadcast wallet events only
to connected dApp tabs.
---
 carpincho-wallet/src/extension/background.ts  | 34 +++++---
 .../src/extension/directProvider.ts           | 83 ++++++++++++++++---
 carpincho-wallet/src/views/HomeView.tsx       | 16 +++-
 .../src/views/home/PendingActionsSection.tsx  | 48 ++++++++++-
 carpincho-wallet/src/views/home/types.ts      |  7 ++
 .../src/views/home/useExtensionRequests.ts    |  2 +-
 .../src/views/home/usePendingActions.ts       | 52 +++++++++++-
 .../views/home/useProviderRequestHandler.ts   | 23 ++++-
 .../test/extensionDirectProvider.test.ts      | 68 +++++++++++++--
 .../test/extensionManifest.test.ts            |  7 +-
 .../test/views/homeHooks.test.tsx             | 28 ++++++-
 11 files changed, 324 insertions(+), 44 deletions(-)

diff --git a/carpincho-wallet/src/extension/background.ts b/carpincho-wallet/src/extension/background.ts
index b39dfed2..ea8decd5 100644
--- a/carpincho-wallet/src/extension/background.ts
+++ b/carpincho-wallet/src/extension/background.ts
@@ -1,4 +1,7 @@
-import { directConnectionUpdateFromProviderResponse } from '@/extension/directConnectionState'
+import {
+  directConnectionUpdateFromProviderResponse,
+  normalizeDirectConnectionOrigin,
+} from '@/extension/directConnectionState'
 import {
   forgetDirectConnectedOrigin,
   readDirectConnectedOrigins,
@@ -70,16 +73,16 @@ const chromeApi = (
   }
 ).chrome
 
-// Keep in sync with public/manifest.json `content_scripts.matches`; drift means missed pages.
-const CONTENT_SCRIPT_MATCHES = [
-  'http://localhost/*',
-  'http://127.0.0.1/*',
-  'https://localhost/*',
-  'https://127.0.0.1/*',
-]
-
+// Wallet → page events go only to dApps the user has connected, never to every
+// injected tab, so unconnected origins cannot observe wallet activity.
 const relayBroadcastToTabs = async (message: RuntimeBroadcastEvent): Promise<void> => {
-  const tabs = await chromeApi?.tabs?.query({ url: CONTENT_SCRIPT_MATCHES }).catch(() => [])
+  const origins = await readDirectConnectedOrigins().catch((): string[] => [])
+  if (origins.length === 0) {
+    return
+  }
+  const tabs = await chromeApi?.tabs
+    ?.query({ url: origins.map((origin) => `${origin}/*`) })
+    .catch(() => [])
   if (tabs === undefined) {
     return
   }
@@ -175,6 +178,16 @@ const queueProviderRequest = async (
   await openWalletPopup().catch(() => undefined)
 }
 
+// Resolves whether the requesting origin has an approved direct connection.
+const isOriginConnected = async (origin: string): Promise<boolean> => {
+  const normalized = normalizeDirectConnectionOrigin(origin)
+  if (normalized === undefined) {
+    return false
+  }
+  const connected = await readDirectConnectedOrigins().catch((): string[] => [])
+  return connected.includes(normalized)
+}
+
 const handleProviderRequest = async (
   message: RuntimeProviderRequest,
   sendResponse: (response?: unknown) => void,
@@ -182,6 +195,7 @@ const handleProviderRequest = async (
   const directResponse = await createDirectProviderResponse(
     message.request,
     await readWalletSnapshot().catch(() => null),
+    { isConnected: await isOriginConnected(message.origin) },
   )
   if (directResponse !== undefined) {
     await applyDirectConnectionUpdate(
diff --git a/carpincho-wallet/src/extension/directProvider.ts b/carpincho-wallet/src/extension/directProvider.ts
index 9cf1bfc9..87f66cea 100644
--- a/carpincho-wallet/src/extension/directProvider.ts
+++ b/carpincho-wallet/src/extension/directProvider.ts
@@ -5,6 +5,16 @@ import {
   jsonRpcResult,
 } from '@/extension/messages'
 import { dispatchProviderRequest } from '@/provider/dispatch'
+import {
+  CANTON_METHOD_CONNECT,
+  CANTON_METHOD_DISCONNECT,
+  CANTON_METHOD_GET_ACTIVE_NETWORK,
+  CANTON_METHOD_GET_PRIMARY_ACCOUNT,
+  CANTON_METHOD_IS_CONNECTED,
+  CANTON_METHOD_LIST_ACCOUNTS,
+  CANTON_METHOD_STATUS,
+  normalizeMethod,
+} from '@/provider/methods'
 import type { AccountPublic } from '@/vault/types'
 
 export interface DirectProviderSnapshot {
@@ -12,21 +22,33 @@ export interface DirectProviderSnapshot {
   primary: AccountPublic | null
 }
 
-export const createDirectProviderResponse = async (
+export interface DirectProviderContext {
+  // Whether the requesting origin has been granted access via an approved connect.
+  isConnected: boolean
+}
+
+// Account-disclosing queries that may run for an unapproved origin only against an
+// empty snapshot, so they report a disconnected state without leaking party data.
+const NON_CONNECTED_QUERY_METHODS = new Set<string>([
+  CANTON_METHOD_LIST_ACCOUNTS,
+  CANTON_METHOD_GET_PRIMARY_ACCOUNT,
+  CANTON_METHOD_STATUS,
+  CANTON_METHOD_IS_CONNECTED,
+])
+
+const EMPTY_SNAPSHOT: DirectProviderSnapshot = { accounts: [], primary: null }
+
+// Runs the shared provider dispatch against a chosen snapshot and materializes a
+// JSON-RPC response. Returns undefined when the method needs popup approval so the
+// caller queues it for the user.
+const runDispatch = async (
   request: JsonRpcRequest,
-  snapshot: DirectProviderSnapshot | null,
+  snapshot: DirectProviderSnapshot,
 ): Promise<JsonRpcResponse | undefined> => {
-  if (snapshot === null) {
-    return undefined
-  }
-
   let response: JsonRpcResponse | undefined
   const result = await dispatchProviderRequest(
     { method: request.method, params: request.params },
-    () => ({
-      accounts: snapshot.accounts,
-      primary: snapshot.primary,
-    }),
+    () => ({ accounts: snapshot.accounts, primary: snapshot.primary }),
     {
       result: async (value) => {
         response = jsonRpcResult(request.id, value)
@@ -43,3 +65,44 @@ export const createDirectProviderResponse = async (
 
   return response ?? jsonRpcError(request.id, -32603, 'Carpincho provider returned no response')
 }
+
+// Answers an injected-provider request, enforcing that only an origin the user has
+// approved (`connect`) can reach account identity or signing. Unapproved origins get
+// a disconnected view; `connect` itself is queued for explicit user approval.
+export const createDirectProviderResponse = async (
+  request: JsonRpcRequest,
+  snapshot: DirectProviderSnapshot | null,
+  context: DirectProviderContext = { isConnected: false },
+): Promise<JsonRpcResponse | undefined> => {
+  if (snapshot === null) {
+    // Wallet locked / no snapshot: queue so the popup can prompt for unlock.
+    return undefined
+  }
+
+  const method = normalizeMethod(request.method)
+
+  // Network discovery and disconnect never disclose account identity.
+  if (method === CANTON_METHOD_GET_ACTIVE_NETWORK || method === CANTON_METHOD_DISCONNECT) {
+    return runDispatch(request, snapshot)
+  }
+
+  if (context.isConnected) {
+    return runDispatch(request, snapshot)
+  }
+
+  // Origin has not been granted access by the user yet.
+  if (method === CANTON_METHOD_CONNECT) {
+    // Queue: the popup prompts the user to approve this origin before any accounts leave the wallet.
+    return undefined
+  }
+  if (NON_CONNECTED_QUERY_METHODS.has(method)) {
+    // Answer from an empty snapshot: reports isConnected:false / empty accounts, leaks nothing.
+    return runDispatch(request, EMPTY_SNAPSHOT)
+  }
+  // signMessage / prepareExecute / ledgerApi / unknown: refuse without prompting.
+  return jsonRpcError(
+    request.id,
+    -32000,
+    'not connected: call connect and approve it in Carpincho first',
+  )
+}
diff --git a/carpincho-wallet/src/views/HomeView.tsx b/carpincho-wallet/src/views/HomeView.tsx
index 319577f9..b969e10c 100644
--- a/carpincho-wallet/src/views/HomeView.tsx
+++ b/carpincho-wallet/src/views/HomeView.tsx
@@ -12,7 +12,11 @@ import { shortMiddle, sortAccounts } from '@/utils/account'
 import { useVault } from '@/vault/useVault'
 import { ConnectionSettingsView } from '@/views/ConnectionSettingsView'
 import { PendingActionsSection } from '@/views/home/PendingActionsSection'
-import type { PendingExecuteRequest, PendingSignRequest } from '@/views/home/types'
+import type {
+  PendingConnectRequest,
+  PendingExecuteRequest,
+  PendingSignRequest,
+} from '@/views/home/types'
 import { useExtensionRequests } from '@/views/home/useExtensionRequests'
 import { usePendingActions } from '@/views/home/usePendingActions'
 import { useProviderRequestHandler } from '@/views/home/useProviderRequestHandler'
@@ -31,6 +35,7 @@ export const HomeView = (): JSX.Element => {
   const [disconnectConfirmOpen, setDisconnectConfirmOpen] = useState(false)
   const [sessions, setSessions] = useState<ConnectedDappSession[]>([])
   const [proposal, setProposal] = useState<ProposalEvent | undefined>(undefined)
+  const [pendingConnect, setPendingConnect] = useState<PendingConnectRequest | undefined>(undefined)
   const [pendingSign, setPendingSign] = useState<PendingSignRequest | undefined>(undefined)
   const [pendingExecute, setPendingExecute] = useState<PendingExecuteRequest | undefined>(undefined)
   const [busy, setBusy] = useState(false)
@@ -67,6 +72,7 @@ export const HomeView = (): JSX.Element => {
 
   const handleProviderRequest = useProviderRequestHandler(
     resolveAccounts,
+    setPendingConnect,
     setPendingSign,
     setPendingExecute,
   )
@@ -78,9 +84,11 @@ export const HomeView = (): JSX.Element => {
     vault: v,
     proposal,
     proposalAccount,
+    pendingConnect,
     pendingSign,
     pendingExecute,
     setProposal,
+    setPendingConnect,
     setPendingSign,
     setPendingExecute,
     setBusy,
@@ -104,7 +112,10 @@ export const HomeView = (): JSX.Element => {
   // HomeView only renders when an account exists, so a primary is always available.
   const primary = v.primary ?? accountsSorted[0]
   const hasPending =
-    proposal !== undefined || pendingSign !== undefined || pendingExecute !== undefined
+    proposal !== undefined ||
+    pendingConnect !== undefined ||
+    pendingSign !== undefined ||
+    pendingExecute !== undefined
   const dapp = useExtensionDappConnection({
     extensionMode,
     sessions,
@@ -167,6 +178,7 @@ export const HomeView = (): JSX.Element => {
       >
         <PendingActionsSection
           proposal={proposal}
+          pendingConnect={pendingConnect}
           pendingSign={pendingSign}
           pendingExecute={pendingExecute}
           proposalAccount={proposalAccount}
diff --git a/carpincho-wallet/src/views/home/PendingActionsSection.tsx b/carpincho-wallet/src/views/home/PendingActionsSection.tsx
index f5e573e1..2c375263 100644
--- a/carpincho-wallet/src/views/home/PendingActionsSection.tsx
+++ b/carpincho-wallet/src/views/home/PendingActionsSection.tsx
@@ -2,12 +2,17 @@ import { Alert } from '@/components/ui/Alert'
 import { PendingActionCard } from '@/components/ui/PendingActionCard'
 import { shortMiddle } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
-import type { PendingExecuteRequest, PendingSignRequest } from '@/views/home/types'
+import type {
+  PendingConnectRequest,
+  PendingExecuteRequest,
+  PendingSignRequest,
+} from '@/views/home/types'
 import type { PendingActions } from '@/views/home/usePendingActions'
 import { CANTON_METHOD_CONNECT, CANTON_METHOD_SIGN_MESSAGE, type ProposalEvent } from '@/wc/client'
 
 interface PendingActionsSectionProps extends PendingActions {
   proposal: ProposalEvent | undefined
+  pendingConnect: PendingConnectRequest | undefined
   pendingSign: PendingSignRequest | undefined
   pendingExecute: PendingExecuteRequest | undefined
   proposalAccount: string | null
@@ -15,9 +20,18 @@ interface PendingActionsSectionProps extends PendingActions {
   busy: boolean
 }
 
-// Renders the single active pending request (connect proposal, message sign, or prepare-execute).
+// Shows the requesting dApp origin so the user knows who they are approving.
+const OriginNote = ({ origin }: { origin: string | undefined }): JSX.Element | null =>
+  origin === undefined || origin === '' ? null : (
+    <div className="min-w-0 break-all font-mono text-[0.84rem] font-medium text-muted-foreground">
+      origin: <span className="text-foreground">{origin}</span>
+    </div>
+  )
+
+// Renders the single active pending request (connect, message sign, or prepare-execute).
 export const PendingActionsSection = ({
   proposal,
+  pendingConnect,
   pendingSign,
   pendingExecute,
   proposalAccount,
@@ -25,6 +39,8 @@ export const PendingActionsSection = ({
   busy,
   onApproveProposal,
   onRejectProposal,
+  onApproveConnect,
+  onRejectConnect,
   onApproveSign,
   onRejectSign,
   onApproveExecute,
@@ -54,6 +70,26 @@ export const PendingActionsSection = ({
             </div>
           )}
         </PendingActionCard>
+      ) : pendingConnect !== undefined ? (
+        <PendingActionCard
+          method={CANTON_METHOD_CONNECT}
+          approveLabel="Connect"
+          approveDisabled={busy || accountsSorted.length === 0}
+          onApprove={onApproveConnect}
+          onReject={onRejectConnect}
+          busy={busy}
+        >
+          {accountsSorted.length === 0 ? (
+            <Alert variant="info">Add an account first before connecting.</Alert>
+          ) : (
+            <div className="flex flex-col gap-2">
+              <OriginNote origin={pendingConnect.origin} />
+              <p className="text-[0.85rem] text-muted-foreground">
+                Allow this site to see your accounts and request signatures.
+              </p>
+            </div>
+          )}
+        </PendingActionCard>
       ) : pendingSign !== undefined ? (
         <PendingActionCard
           method={CANTON_METHOD_SIGN_MESSAGE}
@@ -62,7 +98,9 @@ export const PendingActionsSection = ({
           onReject={onRejectSign}
           busy={busy}
           payload={{ json: pendingSign.messageBase64 }}
-        />
+        >
+          <OriginNote origin={pendingSign.origin} />
+        </PendingActionCard>
       ) : pendingExecute !== undefined ? (
         <PendingActionCard
           method={pendingExecute.rawMethod}
@@ -71,7 +109,9 @@ export const PendingActionsSection = ({
           onReject={onRejectExecute}
           busy={busy}
           payload={{ json: pendingExecute.params }}
-        />
+        >
+          <OriginNote origin={pendingExecute.origin} />
+        </PendingActionCard>
       ) : null}
     </>
   )
diff --git a/carpincho-wallet/src/views/home/types.ts b/carpincho-wallet/src/views/home/types.ts
index de42bc19..dc58022a 100644
--- a/carpincho-wallet/src/views/home/types.ts
+++ b/carpincho-wallet/src/views/home/types.ts
@@ -5,9 +5,15 @@ import type {
 import type { ProviderResponder } from '@/provider/types'
 import type { AccountPublic } from '@/vault/types'
 
+export interface PendingConnectRequest {
+  origin?: string
+  responder: ProviderResponder
+}
+
 export interface PendingSignRequest {
   account: AccountPublic
   messageBase64: string
+  origin?: string
   responder: ProviderResponder
 }
 
@@ -16,5 +22,6 @@ export interface PendingExecuteRequest {
   method: typeof CANTON_METHOD_PREPARE_EXECUTE | typeof CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT
   params: Record<string, unknown>
   rawMethod: string
+  origin?: string
   responder: ProviderResponder
 }
diff --git a/carpincho-wallet/src/views/home/useExtensionRequests.ts b/carpincho-wallet/src/views/home/useExtensionRequests.ts
index 444d9968..63b3db57 100644
--- a/carpincho-wallet/src/views/home/useExtensionRequests.ts
+++ b/carpincho-wallet/src/views/home/useExtensionRequests.ts
@@ -34,7 +34,7 @@ export const useExtensionRequests = ({
             params: pending.request.params,
           },
           createRuntimeResponder(pending),
-          {},
+          { origin: pending.origin },
         )
       } catch (error) {
         console.error('[carpincho:extension] request handler failed', { pending, error })
diff --git a/carpincho-wallet/src/views/home/usePendingActions.ts b/carpincho-wallet/src/views/home/usePendingActions.ts
index 3fce0f06..8ac630e7 100644
--- a/carpincho-wallet/src/views/home/usePendingActions.ts
+++ b/carpincho-wallet/src/views/home/usePendingActions.ts
@@ -2,7 +2,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import { walletServiceRequest } from '@/api/walletService'
 import { toast } from '@/components/ui/toast'
 import { broadcastWalletEvent } from '@/extension/eventBroadcast'
-import { CANTON_METHOD_PREPARE_EXECUTE } from '@/provider/methods'
+import { dispatchProviderRequest } from '@/provider/dispatch'
+import { CANTON_METHOD_CONNECT, CANTON_METHOD_PREPARE_EXECUTE } from '@/provider/methods'
 import type { VaultContextValue } from '@/vault/VaultContext'
 import {
   commandCount,
@@ -10,7 +11,11 @@ import {
   optionalString,
   transactionCommands,
 } from '@/views/home/transactionSummary'
-import type { PendingExecuteRequest, PendingSignRequest } from '@/views/home/types'
+import type {
+  PendingConnectRequest,
+  PendingExecuteRequest,
+  PendingSignRequest,
+} from '@/views/home/types'
 import { approveProposal, type ProposalEvent, rejectProposal } from '@/wc/client'
 
 interface PreparedTransactionResponse {
@@ -33,9 +38,11 @@ interface PendingActionsArgs {
   vault: VaultContextValue
   proposal: ProposalEvent | undefined
   proposalAccount: string | null
+  pendingConnect: PendingConnectRequest | undefined
   pendingSign: PendingSignRequest | undefined
   pendingExecute: PendingExecuteRequest | undefined
   setProposal: Dispatch<SetStateAction<ProposalEvent | undefined>>
+  setPendingConnect: Dispatch<SetStateAction<PendingConnectRequest | undefined>>
   setPendingSign: Dispatch<SetStateAction<PendingSignRequest | undefined>>
   setPendingExecute: Dispatch<SetStateAction<PendingExecuteRequest | undefined>>
   setBusy: Dispatch<SetStateAction<boolean>>
@@ -46,6 +53,8 @@ interface PendingActionsArgs {
 export interface PendingActions {
   onApproveProposal: () => Promise<void>
   onRejectProposal: () => Promise<void>
+  onApproveConnect: () => Promise<void>
+  onRejectConnect: () => Promise<void>
   onApproveSign: () => Promise<void>
   onRejectSign: () => Promise<void>
   onApproveExecute: () => Promise<void>
@@ -58,15 +67,52 @@ export const usePendingActions = ({
   vault,
   proposal,
   proposalAccount,
+  pendingConnect,
   pendingSign,
   pendingExecute,
   setProposal,
+  setPendingConnect,
   setPendingSign,
   setPendingExecute,
   setBusy,
   refreshSessions,
   closeExtensionPopup,
 }: PendingActionsArgs): PendingActions => {
+  // Approve a direct injected-provider connection: only now do accounts leave the wallet,
+  // and the background remembers the origin off the resulting isConnected:true response.
+  const onApproveConnect = async (): Promise<void> => {
+    if (pendingConnect === undefined) {
+      return
+    }
+    setBusy(true)
+    try {
+      await dispatchProviderRequest(
+        { method: CANTON_METHOD_CONNECT },
+        () => ({ accounts: vault.accounts, primary: vault.primary }),
+        pendingConnect.responder,
+      )
+      toast.success('Connected.')
+      setPendingConnect(undefined)
+    } catch (err) {
+      const msg = (err as Error).message
+      await pendingConnect.responder.error(-32000, msg).catch(() => undefined)
+      toast.error(`Connect failed: ${msg}`)
+      setPendingConnect(undefined)
+    } finally {
+      setBusy(false)
+      closeExtensionPopup()
+    }
+  }
+
+  const onRejectConnect = async (): Promise<void> => {
+    if (pendingConnect === undefined) {
+      return
+    }
+    await pendingConnect.responder.error(4001, 'user rejected').catch(() => undefined)
+    setPendingConnect(undefined)
+    closeExtensionPopup()
+  }
+
   const onApproveProposal = async (): Promise<void> => {
     if (proposal === undefined || proposalAccount === null) {
       return
@@ -230,6 +276,8 @@ export const usePendingActions = ({
   return {
     onApproveProposal,
     onRejectProposal,
+    onApproveConnect,
+    onRejectConnect,
     onApproveSign,
     onRejectSign,
     onApproveExecute,
diff --git a/carpincho-wallet/src/views/home/useProviderRequestHandler.ts b/carpincho-wallet/src/views/home/useProviderRequestHandler.ts
index 4ff89c60..91a3ed94 100644
--- a/carpincho-wallet/src/views/home/useProviderRequestHandler.ts
+++ b/carpincho-wallet/src/views/home/useProviderRequestHandler.ts
@@ -5,17 +5,24 @@ import {
   type ProviderResponder,
 } from '@/provider/dispatch'
 import {
+  CANTON_METHOD_CONNECT,
   CANTON_METHOD_PREPARE_EXECUTE,
   CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT,
   CANTON_METHOD_SIGN_MESSAGE,
+  normalizeMethod,
 } from '@/provider/methods'
 import type { AccountResolver } from '@/provider/types'
 import { executeParams } from '@/views/home/transactionSummary'
-import type { PendingExecuteRequest, PendingSignRequest } from '@/views/home/types'
+import type {
+  PendingConnectRequest,
+  PendingExecuteRequest,
+  PendingSignRequest,
+} from '@/views/home/types'
 import { selectedAccount } from '@/wc/accounts'
 
 export interface ProviderRequestContext {
   rawMethod?: string
+  origin?: string
 }
 
 export type ProviderRequestHandler = (
@@ -24,15 +31,22 @@ export type ProviderRequestHandler = (
   context: ProviderRequestContext,
 ) => Promise<void>
 
-// Bridges dispatch results needing approval into pending-sign / pending-execute state.
+// Bridges dispatch results needing approval into pending-connect / -sign / -execute state.
 // Shared by the WalletConnect and extension request paths.
 export const useProviderRequestHandler = (
   resolveAccounts: AccountResolver,
+  setPendingConnect: Dispatch<SetStateAction<PendingConnectRequest | undefined>>,
   setPendingSign: Dispatch<SetStateAction<PendingSignRequest | undefined>>,
   setPendingExecute: Dispatch<SetStateAction<PendingExecuteRequest | undefined>>,
 ): ProviderRequestHandler =>
   useCallback(
     async (request, responder, context) => {
+      // connect reaches this handler only after the gatekeeper queued it for an unapproved
+      // origin, so it must require explicit user approval rather than auto-resolving.
+      if (normalizeMethod(request.method) === CANTON_METHOD_CONNECT) {
+        setPendingConnect({ origin: context.origin, responder })
+        return
+      }
       const result = await dispatchProviderRequest(request, resolveAccounts, responder)
       if (
         result.status === 'pending-approval' &&
@@ -48,7 +62,7 @@ export const useProviderRequestHandler = (
           await responder.error(-32000, 'no account available')
           return
         }
-        setPendingSign({ account, messageBase64, responder })
+        setPendingSign({ account, messageBase64, origin: context.origin, responder })
         return
       }
       if (
@@ -66,9 +80,10 @@ export const useProviderRequestHandler = (
           method: result.pendingMethod,
           params: executeParams(request.params, account.partyId),
           rawMethod: context.rawMethod ?? request.method,
+          origin: context.origin,
           responder,
         })
       }
     },
-    [resolveAccounts, setPendingSign, setPendingExecute],
+    [resolveAccounts, setPendingConnect, setPendingSign, setPendingExecute],
   )
diff --git a/carpincho-wallet/test/extensionDirectProvider.test.ts b/carpincho-wallet/test/extensionDirectProvider.test.ts
index 38416993..764b2bc8 100644
--- a/carpincho-wallet/test/extensionDirectProvider.test.ts
+++ b/carpincho-wallet/test/extensionDirectProvider.test.ts
@@ -1,9 +1,11 @@
 import assert from 'node:assert/strict'
-import { describe, it } from 'node:test'
+import { afterEach, describe, it } from 'node:test'
 
 import { createDirectProviderResponse } from '@/extension/directProvider'
 import type { AccountPublic } from '@/vault/types'
 
+const originalFetch = globalThis.fetch
+
 const account: AccountPublic = {
   id: 'account-1',
   name: 'Primary',
@@ -14,11 +16,29 @@ const account: AccountPublic = {
   createdAt: 1,
 }
 
+const snapshot = { accounts: [account], primary: account }
+
 describe('extension direct provider handling', () => {
-  it('responds to connect without queuing when the wallet is unlocked', async () => {
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+  })
+
+  // An unapproved origin must never receive accounts and must not auto-connect.
+  it('queues connect for an unapproved origin so the user must approve it', async () => {
+    const response = await createDirectProviderResponse(
+      { jsonrpc: '2.0', id: 'connect-1', method: 'connect' },
+      snapshot,
+      { isConnected: false },
+    )
+
+    assert.equal(response, undefined)
+  })
+
+  it('answers connect with accounts once the origin is connected', async () => {
     const response = await createDirectProviderResponse(
       { jsonrpc: '2.0', id: 'connect-1', method: 'connect' },
-      { accounts: [account], primary: account },
+      snapshot,
+      { isConnected: true },
     )
 
     assert.equal(response?.id, 'connect-1')
@@ -30,12 +50,49 @@ describe('extension direct provider handling', () => {
     const response = await createDirectProviderResponse(
       { jsonrpc: '2.0', id: 'connect-1', method: 'connect' },
       null,
+      { isConnected: false },
     )
 
     assert.equal(response, undefined)
   })
 
-  it('leaves signing requests queued for user approval', async () => {
+  it('does not disclose accounts to an unapproved origin via listAccounts', async () => {
+    const response = await createDirectProviderResponse(
+      { jsonrpc: '2.0', id: 'list-1', method: 'listAccounts' },
+      snapshot,
+      { isConnected: false },
+    )
+
+    assert.deepEqual(response?.result, [])
+  })
+
+  it('returns accounts via listAccounts for a connected origin', async () => {
+    const response = await createDirectProviderResponse(
+      { jsonrpc: '2.0', id: 'list-1', method: 'listAccounts' },
+      snapshot,
+      { isConnected: true },
+    )
+
+    assert.equal((response?.result as unknown[]).length, 1)
+  })
+
+  it('refuses signing from an unapproved origin instead of queuing a prompt', async () => {
+    const response = await createDirectProviderResponse(
+      {
+        jsonrpc: '2.0',
+        id: 'tx-1',
+        method: 'prepareExecuteAndWait',
+        params: { commands: [] },
+      },
+      snapshot,
+      { isConnected: false },
+    )
+
+    assert.equal(response?.error?.code, -32000)
+    assert.match(response?.error?.message ?? '', /not connected/i)
+  })
+
+  it('queues signing for user approval once the origin is connected', async () => {
     const response = await createDirectProviderResponse(
       {
         jsonrpc: '2.0',
@@ -43,7 +100,8 @@ describe('extension direct provider handling', () => {
         method: 'prepareExecuteAndWait',
         params: { commands: [] },
       },
-      { accounts: [account], primary: account },
+      snapshot,
+      { isConnected: true },
     )
 
     assert.equal(response, undefined)
diff --git a/carpincho-wallet/test/extensionManifest.test.ts b/carpincho-wallet/test/extensionManifest.test.ts
index 47326b96..c50aa527 100644
--- a/carpincho-wallet/test/extensionManifest.test.ts
+++ b/carpincho-wallet/test/extensionManifest.test.ts
@@ -7,9 +7,10 @@ const readText = (path: string): string => readFileSync(path, 'utf8')
 
 describe('extension packaging', () => {
   it('defines a local Manifest V3 extension popup', () => {
-    // Scenario: the browser extension package should be a Manifest V3 popup wallet that can
-    // observe any dApp origin. The content script match pattern and host permissions must stay
-    // broad enough for local and deployed dApps while the popup assets remain local extension files.
+    // Scenario: the browser extension is a Manifest V3 popup wallet injected on every origin
+    // so it can reach local and deployed dApps. Broad <all_urls> injection is only safe because
+    // account identity and signing are gated at runtime on an approved per-origin connection
+    // (see extensionDirectProvider.test.ts); the manifest scope alone grants no account access.
     const manifest = readJson<{
       manifest_version?: number
       name?: string
diff --git a/carpincho-wallet/test/views/homeHooks.test.tsx b/carpincho-wallet/test/views/homeHooks.test.tsx
index 6b882e96..fa304b8b 100644
--- a/carpincho-wallet/test/views/homeHooks.test.tsx
+++ b/carpincho-wallet/test/views/homeHooks.test.tsx
@@ -46,28 +46,50 @@ describe('useProviderRequestHandler', () => {
   })
 
   const setup = (resolve: AccountResolver) => {
+    const connects: Array<unknown> = []
     const signs: Array<unknown> = []
     const executes: Array<unknown> = []
     const { result } = renderHook(() =>
       useProviderRequestHandler(
         resolve,
+        (v) => connects.push(v),
         (v) => signs.push(v),
         (v) => executes.push(v),
       ),
     )
-    return { handler: result.current, signs, executes }
+    return { handler: result.current, connects, signs, executes }
   }
 
-  it('bridges a sign-message approval into pending-sign state', async () => {
+  it('bridges a connect request into pending-connect state with the origin', async () => {
+    const { responder } = makeResponder()
+    const { handler, connects, signs, executes } = setup(() => ({
+      accounts: [account()],
+      primary: account(),
+    }))
+
+    await handler({ method: 'connect', params: undefined }, responder, {
+      origin: 'http://localhost:3012',
+    })
+
+    assert.equal(connects.length, 1)
+    assert.deepEqual(connects[0], { origin: 'http://localhost:3012', responder })
+    assert.equal(signs.length, 0)
+    assert.equal(executes.length, 0)
+  })
+
+  it('bridges a sign-message approval into pending-sign state with the origin', async () => {
     const { responder, errors } = makeResponder()
     const { handler, signs, executes } = setup(() => ({ accounts: [account()], primary: null }))
 
-    await handler({ method: 'signMessage', params: { message: 'bWVzc2FnZQ==' } }, responder, {})
+    await handler({ method: 'signMessage', params: { message: 'bWVzc2FnZQ==' } }, responder, {
+      origin: 'http://localhost:3012',
+    })
 
     assert.equal(signs.length, 1)
     assert.deepEqual(signs[0], {
       account: account(),
       messageBase64: 'bWVzc2FnZQ==',
+      origin: 'http://localhost:3012',
       responder,
     })
     assert.equal(executes.length, 0)

From ecfc6684260302a0563a407f35455020c7e22404 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:28:38 -0300
Subject: [PATCH 008/121] fix(carpincho-wallet): keep the default minimum
 password score at 1

This is a developer wallet; a low default is intentional so devs are not forced
into complex passwords. Restore the default zxcvbn score of 1 when the env var is
unset; the boundary enforcement in setup()/changePassword() still applies the
configured score.
---
 carpincho-wallet/.env.example                 |  3 +--
 .../src/vault/passwordStrength.ts             |  8 +++----
 .../test/vault/passwordAcceptance.test.tsx    |  8 +++----
 .../test/vault/passwordStrength.test.ts       | 24 ++++++++-----------
 4 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/carpincho-wallet/.env.example b/carpincho-wallet/.env.example
index 42ba5295..fff96df2 100644
--- a/carpincho-wallet/.env.example
+++ b/carpincho-wallet/.env.example
@@ -1,5 +1,4 @@
 # Optional. Minimum zxcvbn strength score (0-4) required to set a vault password.
 # 0 too weak, 1 very guessable, 2 fair, 3 strong, 4 excellent.
-# Fails closed: defaults to 3 (strong) when unset or invalid. Set a lower value
-# only to relax the bar for local development.
+# Defaults to 1 when unset. Use 3 for a security-conscious build.
 # VITE_MIN_PASSWORD_SCORE=1
diff --git a/carpincho-wallet/src/vault/passwordStrength.ts b/carpincho-wallet/src/vault/passwordStrength.ts
index 73e045c5..3988ca03 100644
--- a/carpincho-wallet/src/vault/passwordStrength.ts
+++ b/carpincho-wallet/src/vault/passwordStrength.ts
@@ -1,10 +1,10 @@
 import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core'
 import { useEffect, useState } from 'react'
 
-// Fail closed: a missing or invalid VITE_MIN_PASSWORD_SCORE requires a strong
-// password (zxcvbn 3, "safely unguessable"). An explicit env value may still
-// lower the bar for local development.
-const FALLBACK_PASSWORD_SCORE = 3
+// Intentionally low default: this is a developer wallet, so a missing or invalid
+// VITE_MIN_PASSWORD_SCORE accepts "very guessable" passwords (zxcvbn 1). Set the
+// env var higher for a security-conscious build.
+const FALLBACK_PASSWORD_SCORE = 1
 
 // zxcvbn scores run 0-4; anything missing, blank, or out of range falls back.
 export const parsePasswordScore = (raw: unknown): number => {
diff --git a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
index 819d312e..7f1b6a0e 100644
--- a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
+++ b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
@@ -11,11 +11,9 @@ afterEach(() => {
   cleanup()
 })
 
-test('rejects weak passwords and accepts strong ones at the default score', async () => {
+test('accepts a short password once it meets the strength score', async () => {
   const { getByTestId } = render(<Probe />)
   await waitFor(() => assert.equal(getByTestId('ready').textContent, 'ready'))
-  // Default minimum is now zxcvbn 3 (fail closed): a guessable password is rejected.
-  assert.equal(isPasswordAcceptable('monkey99'), false)
-  // A strong passphrase clears the bar regardless of length.
-  assert.equal(isPasswordAcceptable('correct-horse-battery'), true)
+  // 8 chars (under the former 9-char floor) but scores 1, the default minimum.
+  assert.equal(isPasswordAcceptable('monkey99'), true)
 })
diff --git a/carpincho-wallet/test/vault/passwordStrength.test.ts b/carpincho-wallet/test/vault/passwordStrength.test.ts
index 3a07e52e..e6f3733f 100644
--- a/carpincho-wallet/test/vault/passwordStrength.test.ts
+++ b/carpincho-wallet/test/vault/passwordStrength.test.ts
@@ -8,20 +8,16 @@ test('parsePasswordScore accepts in-range integer scores', () => {
   assert.equal(parsePasswordScore('4'), 4)
 })
 
-test('parsePasswordScore fails closed to 3 for missing, empty, or invalid values', () => {
-  assert.equal(parsePasswordScore(undefined), 3)
-  assert.equal(parsePasswordScore(''), 3)
-  assert.equal(parsePasswordScore('   '), 3)
-  assert.equal(parsePasswordScore('abc'), 3)
-  assert.equal(parsePasswordScore('-1'), 3)
-  assert.equal(parsePasswordScore('5'), 3)
-  assert.equal(parsePasswordScore('2.5'), 3)
+test('parsePasswordScore falls back to 1 for missing, empty, or invalid values', () => {
+  assert.equal(parsePasswordScore(undefined), 1)
+  assert.equal(parsePasswordScore(''), 1)
+  assert.equal(parsePasswordScore('   '), 1)
+  assert.equal(parsePasswordScore('abc'), 1)
+  assert.equal(parsePasswordScore('-1'), 1)
+  assert.equal(parsePasswordScore('5'), 1)
+  assert.equal(parsePasswordScore('2.5'), 1)
 })
 
-test('parsePasswordScore still honors an explicit in-range override', () => {
-  assert.equal(parsePasswordScore('1'), 1)
-})
-
-test('MIN_PASSWORD_SCORE defaults to 3 when VITE_MIN_PASSWORD_SCORE is unset', () => {
-  assert.equal(MIN_PASSWORD_SCORE, 3)
+test('MIN_PASSWORD_SCORE defaults to 1 when VITE_MIN_PASSWORD_SCORE is unset', () => {
+  assert.equal(MIN_PASSWORD_SCORE, 1)
 })

From d8ecedb838af52e317996096bbe3f02a078c8988 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:36:07 -0300
Subject: [PATCH 009/121] refactor(carpincho-wallet): simplify clipboard,
 gatekeeper, and provider request path

copySecret now delegates to copyText via an onSuccess hook instead of duplicating
the write/toast/catch chain; collapse the two identical allow branches in the
direct-provider gatekeeper into one guard; and read the wallet snapshot and
connection state concurrently in handleProviderRequest instead of sequentially.
---
 carpincho-wallet/src/extension/background.ts     | 12 +++++++-----
 carpincho-wallet/src/extension/directProvider.ts | 13 +++++++------
 carpincho-wallet/src/utils/clipboard.ts          | 16 +++++++---------
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/carpincho-wallet/src/extension/background.ts b/carpincho-wallet/src/extension/background.ts
index ea8decd5..dbd85eb4 100644
--- a/carpincho-wallet/src/extension/background.ts
+++ b/carpincho-wallet/src/extension/background.ts
@@ -192,11 +192,13 @@ const handleProviderRequest = async (
   message: RuntimeProviderRequest,
   sendResponse: (response?: unknown) => void,
 ): Promise<void> => {
-  const directResponse = await createDirectProviderResponse(
-    message.request,
-    await readWalletSnapshot().catch(() => null),
-    { isConnected: await isOriginConnected(message.origin) },
-  )
+  const [snapshot, isConnected] = await Promise.all([
+    readWalletSnapshot().catch(() => null),
+    isOriginConnected(message.origin),
+  ])
+  const directResponse = await createDirectProviderResponse(message.request, snapshot, {
+    isConnected,
+  })
   if (directResponse !== undefined) {
     await applyDirectConnectionUpdate(
       { origin: message.origin, request: message.request },
diff --git a/carpincho-wallet/src/extension/directProvider.ts b/carpincho-wallet/src/extension/directProvider.ts
index 87f66cea..e043f3b4 100644
--- a/carpincho-wallet/src/extension/directProvider.ts
+++ b/carpincho-wallet/src/extension/directProvider.ts
@@ -81,12 +81,13 @@ export const createDirectProviderResponse = async (
 
   const method = normalizeMethod(request.method)
 
-  // Network discovery and disconnect never disclose account identity.
-  if (method === CANTON_METHOD_GET_ACTIVE_NETWORK || method === CANTON_METHOD_DISCONNECT) {
-    return runDispatch(request, snapshot)
-  }
-
-  if (context.isConnected) {
+  // A connected origin is allowed everything; network discovery and disconnect never
+  // disclose account identity, so they are allowed regardless of connection state.
+  if (
+    context.isConnected ||
+    method === CANTON_METHOD_GET_ACTIVE_NETWORK ||
+    method === CANTON_METHOD_DISCONNECT
+  ) {
     return runDispatch(request, snapshot)
   }
 
diff --git a/carpincho-wallet/src/utils/clipboard.ts b/carpincho-wallet/src/utils/clipboard.ts
index 9cbc9735..55138bcb 100644
--- a/carpincho-wallet/src/utils/clipboard.ts
+++ b/carpincho-wallet/src/utils/clipboard.ts
@@ -4,10 +4,14 @@ import { toast } from '@/components/ui/toast'
 const SECRET_CLIPBOARD_CLEAR_MS = 60_000
 
 // Copies arbitrary wallet text while keeping success and failure feedback consistent.
-export const copyText = (value: string, successMessage: string): void => {
+// onSuccess runs only after a successful copy (used to schedule a secret wipe).
+export const copyText = (value: string, successMessage: string, onSuccess?: () => void): void => {
   void navigator.clipboard
     .writeText(value)
-    .then(() => toast.success(successMessage))
+    .then(() => {
+      toast.success(successMessage)
+      onSuccess?.()
+    })
     .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
 }
 
@@ -32,13 +36,7 @@ const scheduleSecretClear = (secret: string): void => {
 
 // Copies a sensitive value (e.g. a private key) and schedules a best-effort clipboard wipe.
 export const copySecret = (value: string, successMessage: string): void => {
-  void navigator.clipboard
-    .writeText(value)
-    .then(() => {
-      toast.success(successMessage)
-      scheduleSecretClear(value)
-    })
-    .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
+  copyText(value, successMessage, () => scheduleSecretClear(value))
 }
 
 // Copies a party id from account surfaces with a domain-specific confirmation.

From d6b6d7409011e5b81e9a5cfb081b6cfd44b8f56b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:45:22 -0300
Subject: [PATCH 010/121] chore: gitignore .env.fivenorth

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index f9601738..804c18cf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ dist-extension/
 # env
 .env
 .env.local
+.env.fivenorth
 
 # typescript
 *.tsbuildinfo

From c1eaf6039e2893caeda83675eaed2fd8b56ff0d8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:47:43 -0300
Subject: [PATCH 011/121] refactor(carpincho-wallet): classify provider methods
 by access tier at the source

Move the injected-provider gate's per-method policy out of three hand-maintained
lists in directProvider.ts into a single access-tier mapping next to the method
definitions in provider/methods.ts. The mapping is exhaustive over known methods
(satisfies Record) and unknown methods fail safe to RESTRICTED, so a newly added
RPC method cannot silently reach an unapproved origin.
---
 .../src/extension/directProvider.ts           | 38 +++-----------
 carpincho-wallet/src/provider/methods.ts      | 49 +++++++++++++++++++
 .../test/providerAccessTier.test.ts           | 27 ++++++++++
 3 files changed, 84 insertions(+), 30 deletions(-)
 create mode 100644 carpincho-wallet/test/providerAccessTier.test.ts

diff --git a/carpincho-wallet/src/extension/directProvider.ts b/carpincho-wallet/src/extension/directProvider.ts
index e043f3b4..7a168bb3 100644
--- a/carpincho-wallet/src/extension/directProvider.ts
+++ b/carpincho-wallet/src/extension/directProvider.ts
@@ -5,16 +5,7 @@ import {
   jsonRpcResult,
 } from '@/extension/messages'
 import { dispatchProviderRequest } from '@/provider/dispatch'
-import {
-  CANTON_METHOD_CONNECT,
-  CANTON_METHOD_DISCONNECT,
-  CANTON_METHOD_GET_ACTIVE_NETWORK,
-  CANTON_METHOD_GET_PRIMARY_ACCOUNT,
-  CANTON_METHOD_IS_CONNECTED,
-  CANTON_METHOD_LIST_ACCOUNTS,
-  CANTON_METHOD_STATUS,
-  normalizeMethod,
-} from '@/provider/methods'
+import { ACCESS_TIER, accessTier } from '@/provider/methods'
 import type { AccountPublic } from '@/vault/types'
 
 export interface DirectProviderSnapshot {
@@ -27,15 +18,6 @@ export interface DirectProviderContext {
   isConnected: boolean
 }
 
-// Account-disclosing queries that may run for an unapproved origin only against an
-// empty snapshot, so they report a disconnected state without leaking party data.
-const NON_CONNECTED_QUERY_METHODS = new Set<string>([
-  CANTON_METHOD_LIST_ACCOUNTS,
-  CANTON_METHOD_GET_PRIMARY_ACCOUNT,
-  CANTON_METHOD_STATUS,
-  CANTON_METHOD_IS_CONNECTED,
-])
-
 const EMPTY_SNAPSHOT: DirectProviderSnapshot = { accounts: [], primary: null }
 
 // Runs the shared provider dispatch against a chosen snapshot and materializes a
@@ -79,28 +61,24 @@ export const createDirectProviderResponse = async (
     return undefined
   }
 
-  const method = normalizeMethod(request.method)
+  const tier = accessTier(request.method)
 
-  // A connected origin is allowed everything; network discovery and disconnect never
-  // disclose account identity, so they are allowed regardless of connection state.
-  if (
-    context.isConnected ||
-    method === CANTON_METHOD_GET_ACTIVE_NETWORK ||
-    method === CANTON_METHOD_DISCONNECT
-  ) {
+  // A connected origin is allowed everything; PUBLIC methods disclose no account
+  // identity, so they are allowed regardless of connection state.
+  if (context.isConnected || tier === ACCESS_TIER.PUBLIC) {
     return runDispatch(request, snapshot)
   }
 
   // Origin has not been granted access by the user yet.
-  if (method === CANTON_METHOD_CONNECT) {
+  if (tier === ACCESS_TIER.CONNECT) {
     // Queue: the popup prompts the user to approve this origin before any accounts leave the wallet.
     return undefined
   }
-  if (NON_CONNECTED_QUERY_METHODS.has(method)) {
+  if (tier === ACCESS_TIER.IDENTITY) {
     // Answer from an empty snapshot: reports isConnected:false / empty accounts, leaks nothing.
     return runDispatch(request, EMPTY_SNAPSHOT)
   }
-  // signMessage / prepareExecute / ledgerApi / unknown: refuse without prompting.
+  // RESTRICTED (signMessage / prepareExecute / ledgerApi / unknown): refuse without prompting.
   return jsonRpcError(
     request.id,
     -32000,
diff --git a/carpincho-wallet/src/provider/methods.ts b/carpincho-wallet/src/provider/methods.ts
index 7956f54f..38d553a3 100644
--- a/carpincho-wallet/src/provider/methods.ts
+++ b/carpincho-wallet/src/provider/methods.ts
@@ -40,3 +40,52 @@ export const pendingApprovalMethod = (
   rawMethod === LEGACY_CANTON_METHOD_PREPARE_SIGN_EXECUTE
     ? CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT
     : normalizedMethod
+
+// Access tier decides what an injected-provider origin may do BEFORE the user has
+// approved it (enforced in extension/directProvider.ts). Classification lives next to
+// the method definitions so a newly added method cannot silently bypass the gate.
+export const ACCESS_TIER = {
+  // Discloses no account identity; answerable to any origin.
+  PUBLIC: 'public',
+  // Account queries; an unapproved origin gets an empty / disconnected view.
+  IDENTITY: 'identity',
+  // The connection grant itself; an unapproved origin is queued for user approval.
+  CONNECT: 'connect',
+  // Requires an approved origin; refused otherwise. The default for unknown methods.
+  RESTRICTED: 'restricted',
+} as const
+
+export type AccessTier = (typeof ACCESS_TIER)[keyof typeof ACCESS_TIER]
+
+type CantonMethod =
+  | typeof CANTON_METHOD_CONNECT
+  | typeof CANTON_METHOD_DISCONNECT
+  | typeof CANTON_METHOD_IS_CONNECTED
+  | typeof CANTON_METHOD_PREPARE_EXECUTE
+  | typeof CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT
+  | typeof CANTON_METHOD_LIST_ACCOUNTS
+  | typeof CANTON_METHOD_GET_PRIMARY_ACCOUNT
+  | typeof CANTON_METHOD_GET_ACTIVE_NETWORK
+  | typeof CANTON_METHOD_STATUS
+  | typeof CANTON_METHOD_LEDGER_API
+  | typeof CANTON_METHOD_SIGN_MESSAGE
+
+// `satisfies` forces every known method to be classified; omit one and this fails to compile.
+const METHOD_ACCESS_TIERS = {
+  [CANTON_METHOD_GET_ACTIVE_NETWORK]: ACCESS_TIER.PUBLIC,
+  [CANTON_METHOD_DISCONNECT]: ACCESS_TIER.PUBLIC,
+  [CANTON_METHOD_CONNECT]: ACCESS_TIER.CONNECT,
+  [CANTON_METHOD_IS_CONNECTED]: ACCESS_TIER.IDENTITY,
+  [CANTON_METHOD_LIST_ACCOUNTS]: ACCESS_TIER.IDENTITY,
+  [CANTON_METHOD_GET_PRIMARY_ACCOUNT]: ACCESS_TIER.IDENTITY,
+  [CANTON_METHOD_STATUS]: ACCESS_TIER.IDENTITY,
+  [CANTON_METHOD_PREPARE_EXECUTE]: ACCESS_TIER.RESTRICTED,
+  [CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT]: ACCESS_TIER.RESTRICTED,
+  [CANTON_METHOD_LEDGER_API]: ACCESS_TIER.RESTRICTED,
+  [CANTON_METHOD_SIGN_MESSAGE]: ACCESS_TIER.RESTRICTED,
+} satisfies Record<CantonMethod, AccessTier>
+
+// Fail safe: an unrecognized method is treated as restricted.
+export const accessTier = (method: string): AccessTier =>
+  (METHOD_ACCESS_TIERS as Record<string, AccessTier>)[normalizeMethod(method)] ??
+  ACCESS_TIER.RESTRICTED
diff --git a/carpincho-wallet/test/providerAccessTier.test.ts b/carpincho-wallet/test/providerAccessTier.test.ts
new file mode 100644
index 00000000..b9e6b8f1
--- /dev/null
+++ b/carpincho-wallet/test/providerAccessTier.test.ts
@@ -0,0 +1,27 @@
+import assert from 'node:assert/strict'
+import { describe, it } from 'node:test'
+
+import { ACCESS_TIER, accessTier } from '@/provider/methods'
+
+describe('provider method access tiers', () => {
+  it('classifies known methods by sensitivity', () => {
+    assert.equal(accessTier('getActiveNetwork'), ACCESS_TIER.PUBLIC)
+    assert.equal(accessTier('disconnect'), ACCESS_TIER.PUBLIC)
+    assert.equal(accessTier('connect'), ACCESS_TIER.CONNECT)
+    assert.equal(accessTier('listAccounts'), ACCESS_TIER.IDENTITY)
+    assert.equal(accessTier('status'), ACCESS_TIER.IDENTITY)
+    assert.equal(accessTier('signMessage'), ACCESS_TIER.RESTRICTED)
+    assert.equal(accessTier('prepareExecute'), ACCESS_TIER.RESTRICTED)
+    assert.equal(accessTier('ledgerApi'), ACCESS_TIER.RESTRICTED)
+  })
+
+  it('normalizes canton_-prefixed methods before classifying', () => {
+    assert.equal(accessTier('canton_listAccounts'), ACCESS_TIER.IDENTITY)
+    assert.equal(accessTier('canton_prepareSignExecute'), ACCESS_TIER.RESTRICTED)
+  })
+
+  it('fails safe: an unknown method is restricted', () => {
+    assert.equal(accessTier('someFutureMethod'), ACCESS_TIER.RESTRICTED)
+    assert.equal(accessTier('amulet.tap'), ACCESS_TIER.RESTRICTED)
+  })
+})

From a6c82d37eda05d72444f800bd99cb52c0aae06e9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 17:51:43 -0300
Subject: [PATCH 012/121] refactor(carpincho-wallet): extract shared
 ConfirmPasswordForm

The private-key export re-auth gate duplicated the verify-password form (input,
a11y wiring, incorrect-password handling) already in SecurityPanel. Extract a
ConfirmPasswordForm component and use it in both; it takes an initialError so
SecurityPanel can still surface a changePassword failure on the verify step.
---
 .../src/components/ConfirmPasswordForm.tsx    | 71 +++++++++++++++++++
 .../src/components/PrivateKeyPanel.tsx        | 45 ++----------
 .../src/components/SecurityPanel.tsx          | 66 ++++-------------
 3 files changed, 91 insertions(+), 91 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ConfirmPasswordForm.tsx

diff --git a/carpincho-wallet/src/components/ConfirmPasswordForm.tsx b/carpincho-wallet/src/components/ConfirmPasswordForm.tsx
new file mode 100644
index 00000000..dfd8c652
--- /dev/null
+++ b/carpincho-wallet/src/components/ConfirmPasswordForm.tsx
@@ -0,0 +1,71 @@
+import { type FormEvent, type ReactNode, useState } from 'react'
+import { PrimaryButton } from '@/components/ui/Button'
+import { PasswordInput } from '@/components/ui/PasswordInput'
+import { useVault } from '@/vault/useVault'
+
+interface ConfirmPasswordFormProps {
+  label: string
+  submitLabel: string
+  // Called with the entered password once it matches the unlocked vault password.
+  onVerified: (password: string) => void
+  // Seeds an error on mount (e.g. a failure from the action this gate precedes).
+  initialError?: string | null
+  // Content rendered above the password field (account summary, description).
+  children?: ReactNode
+}
+
+// Re-checks the unlocked vault password before a sensitive action (change password,
+// reveal private key). Centralizes the input, a11y wiring, and incorrect-password handling.
+export const ConfirmPasswordForm = ({
+  label,
+  submitLabel,
+  onVerified,
+  initialError = null,
+  children,
+}: ConfirmPasswordFormProps): JSX.Element => {
+  const v = useVault()
+  const [current, setCurrent] = useState('')
+  const [error, setError] = useState<string | null>(initialError)
+  const hasError = error !== null
+
+  const onSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault()
+    if (!v.verifyPassword(current)) {
+      setError('Incorrect password.')
+      return
+    }
+    setError(null)
+    setCurrent('')
+    onVerified(current)
+  }
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      className="flex flex-col gap-4"
+    >
+      {children}
+      <PasswordInput
+        aria-label={label}
+        aria-errormessage={hasError ? 'confirm-password-error' : undefined}
+        placeholder="Current password"
+        autoComplete="current-password"
+        error={hasError}
+        value={current}
+        onChange={(event) => {
+          setCurrent(event.target.value)
+          setError(null)
+        }}
+      />
+      {hasError && (
+        <p
+          id="confirm-password-error"
+          className="text-[0.85rem] text-danger"
+        >
+          {error}
+        </p>
+      )}
+      <PrimaryButton type="submit">{submitLabel}</PrimaryButton>
+    </form>
+  )
+}
diff --git a/carpincho-wallet/src/components/PrivateKeyPanel.tsx b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
index 7f27154c..f988dfb5 100644
--- a/carpincho-wallet/src/components/PrivateKeyPanel.tsx
+++ b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
@@ -1,5 +1,6 @@
 import { type FormEvent, useState } from 'react'
 import { getWalletServiceNetworkId } from '@/api/walletService'
+import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { COPY_ICON } from '@/components/ui/icons'
 import { PasswordInput } from '@/components/ui/PasswordInput'
@@ -139,8 +140,6 @@ export const ExportPrivateKeyView = (): JSX.Element => {
   const v = useVault()
   const account = v.primary
   const [revealed, setRevealed] = useState(false)
-  const [current, setCurrent] = useState('')
-  const [error, setError] = useState<string | null>(null)
 
   if (account === null) {
     return (
@@ -150,17 +149,6 @@ export const ExportPrivateKeyView = (): JSX.Element => {
     )
   }
 
-  const onVerify = (event: FormEvent<HTMLFormElement>): void => {
-    event.preventDefault()
-    if (!v.verifyPassword(current)) {
-      setError('Incorrect password.')
-      return
-    }
-    setError(null)
-    setCurrent('')
-    setRevealed(true)
-  }
-
   const accountSummary = (
     <div className="rounded-md border border-border bg-muted p-3">
       <p className="font-semibold text-foreground">{account.name}</p>
@@ -171,38 +159,17 @@ export const ExportPrivateKeyView = (): JSX.Element => {
   )
 
   if (!revealed) {
-    const hasError = error !== null
     return (
-      <form
-        onSubmit={onVerify}
-        className="flex flex-col gap-4"
+      <ConfirmPasswordForm
+        label="Confirm password"
+        submitLabel="Reveal private key"
+        onVerified={() => setRevealed(true)}
       >
         {accountSummary}
         <p className="text-[0.85rem] text-muted-foreground">
           Confirm your password to reveal this account's private key.
         </p>
-        <PasswordInput
-          aria-label="Confirm password"
-          aria-errormessage={hasError ? 'export-private-key-error' : undefined}
-          placeholder="Current password"
-          autoComplete="current-password"
-          error={hasError}
-          value={current}
-          onChange={(event) => {
-            setCurrent(event.target.value)
-            setError(null)
-          }}
-        />
-        {hasError && (
-          <p
-            id="export-private-key-error"
-            className="text-[0.85rem] text-danger"
-          >
-            {error}
-          </p>
-        )}
-        <PrimaryButton type="submit">Reveal private key</PrimaryButton>
-      </form>
+      </ConfirmPasswordForm>
     )
   }
 
diff --git a/carpincho-wallet/src/components/SecurityPanel.tsx b/carpincho-wallet/src/components/SecurityPanel.tsx
index 9c543787..e151f695 100644
--- a/carpincho-wallet/src/components/SecurityPanel.tsx
+++ b/carpincho-wallet/src/components/SecurityPanel.tsx
@@ -1,8 +1,8 @@
 import { type FormEvent, useState } from 'react'
+import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
 import { NewPasswordFields } from '@/components/NewPasswordFields'
 import { PrimaryButton } from '@/components/ui/Button'
 import { OptionList } from '@/components/ui/OptionList'
-import { PasswordInput } from '@/components/ui/PasswordInput'
 import { toast } from '@/components/ui/toast'
 import type { AutoLockOption } from '@/vault/storage'
 import { useVault } from '@/vault/useVault'
@@ -14,38 +14,16 @@ const AUTO_LOCK_LABELS: Array<{ value: AutoLockOption; label: string }> = [
   { value: '1h', label: '1 hour' },
 ]
 
-interface VerifyState {
-  phase: 'verify'
-  current: string
-  error: string | null
-}
-
-interface ChangeState {
-  phase: 'change'
-  current: string
-  next: string
-  confirm: string
-  valid: boolean
-}
+type PasswordState =
+  | { phase: 'verify'; error: string | null }
+  | { phase: 'change'; current: string; next: string; confirm: string; valid: boolean }
 
-type PasswordState = VerifyState | ChangeState
-
-const initialState = (): VerifyState => ({ phase: 'verify', current: '', error: null })
+const initialState = (): PasswordState => ({ phase: 'verify', error: null })
 
 export const PasswordForm = (): JSX.Element => {
   const v = useVault()
   const [state, setState] = useState<PasswordState>(initialState)
 
-  const onSubmitVerify = (e: FormEvent<HTMLFormElement>): void => {
-    e.preventDefault()
-    if (state.phase !== 'verify') return
-    if (!v.verifyPassword(state.current)) {
-      setState({ ...state, error: 'Incorrect password.' })
-      return
-    }
-    setState({ phase: 'change', current: state.current, next: '', confirm: '', valid: false })
-  }
-
   const onSubmitChange = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
     if (state.phase !== 'change') return
@@ -56,36 +34,20 @@ export const PasswordForm = (): JSX.Element => {
       toast.success('Password updated.')
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Could not change password.'
-      setState({ phase: 'verify', current: '', error: msg })
+      setState({ phase: 'verify', error: msg })
     }
   }
 
   if (state.phase === 'verify') {
-    const hasError = state.error !== null
     return (
-      <form
-        onSubmit={onSubmitVerify}
-        className="flex flex-col gap-3"
-      >
-        <PasswordInput
-          aria-label="Current password"
-          aria-errormessage={hasError ? 'current-password-error' : undefined}
-          placeholder="Current password"
-          autoComplete="current-password"
-          error={hasError}
-          value={state.current}
-          onChange={(e) => setState({ ...state, current: e.target.value, error: null })}
-        />
-        {hasError && (
-          <p
-            id="current-password-error"
-            className="text-[0.85rem] text-danger"
-          >
-            {state.error}
-          </p>
-        )}
-        <PrimaryButton type="submit">Continue</PrimaryButton>
-      </form>
+      <ConfirmPasswordForm
+        label="Current password"
+        submitLabel="Continue"
+        initialError={state.error}
+        onVerified={(current) =>
+          setState({ phase: 'change', current, next: '', confirm: '', valid: false })
+        }
+      />
     )
   }
 

From 2357f5e9390dfa45dedc5fa8fc35d7803324c4a2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 18:02:57 -0300
Subject: [PATCH 013/121] docs: sync wallet-service and carpincho docs to
 amulet.tap and the origin permission model

Document the new amulet.tap faucet method in the wallet-service README/AGENTS,
and update carpincho's architecture/README for the per-origin injected-provider
gate (account access gated until an origin is approved via connect), the
per-method access tiers in methods.ts, the boundary-enforced password gate, and
the connected-origins set now scoping account access and event broadcasts.
---
 canton-barebones/wallet-service/AGENTS.md |  2 +-
 canton-barebones/wallet-service/README.md |  3 ++-
 carpincho-wallet/README.md                |  2 +-
 carpincho-wallet/architecture.md          | 10 +++++-----
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/canton-barebones/wallet-service/AGENTS.md b/canton-barebones/wallet-service/AGENTS.md
index a847c895..89d4319e 100644
--- a/canton-barebones/wallet-service/AGENTS.md
+++ b/canton-barebones/wallet-service/AGENTS.md
@@ -4,7 +4,7 @@ This file applies only to `canton-barebones/wallet-service/`. For monorepo-wide
 
 ## Scope
 
-The wallet-service is a consumer-dApp-agnostic Express JSON-RPC bridge between Carpincho and the local Canton participant. It holds the Canton bearer token boundary, prepares and executes transactions, proxies participant reads, exposes CIP-56 token-standard reads/transfers and Amulet (Canton Coin) preapproval management, and handles wallet-internal party onboarding.
+The wallet-service is a consumer-dApp-agnostic Express JSON-RPC bridge between Carpincho and the local Canton participant. It holds the Canton bearer token boundary, prepares and executes transactions, proxies participant reads, exposes CIP-56 token-standard reads/transfers and Amulet (Canton Coin) preapproval management and DevNet faucet tap, and handles wallet-internal party onboarding.
 
 ## Working Rules
 
diff --git a/canton-barebones/wallet-service/README.md b/canton-barebones/wallet-service/README.md
index 0956f22b..b90921f3 100644
--- a/canton-barebones/wallet-service/README.md
+++ b/canton-barebones/wallet-service/README.md
@@ -76,8 +76,9 @@ These add Canton token-standard reads and transfers plus Amulet (Canton Coin) pr
 | `amulet.preapproval.create` | Prepares enabling Amulet auto-accept. |
 | `amulet.preapproval.cancel` | Prepares disabling Amulet auto-accept. |
 | `amulet.preapproval.acceptProposal` | Accepts a `TransferPreapprovalProposal` for the receiver. |
+| `amulet.tap` | Prepares the fixed 100 AMT Splice DevNet faucet tap for a receiver (DevNet only). |
 
-The write methods (`create*`, `acceptTransfer`, `amulet.preapproval.create/cancel/acceptProposal`) return prepared transactions; Carpincho signs locally and submits via `executePrepared`.
+The write methods (`create*`, `acceptTransfer`, `amulet.preapproval.create/cancel/acceptProposal`, `amulet.tap`) return prepared transactions; Carpincho signs locally and submits via `executePrepared`.
 
 `prepareExecute`, `prepareExecuteAndWait`, and `signMessage` stay in
 Carpincho because they require the user's key and approval UI.
diff --git a/carpincho-wallet/README.md b/carpincho-wallet/README.md
index 8b3150a4..3632693e 100644
--- a/carpincho-wallet/README.md
+++ b/carpincho-wallet/README.md
@@ -2,7 +2,7 @@
 
 Standalone browser wallet for the Canton barebones.
 
-Carpincho is a wallet/provider UI with an encrypted local vault, an injected CIP-0103 browser provider, and optional WalletConnect support. A dApp connects to Carpincho through the injected provider by default; Carpincho answers wallet/provider requests and forwards Canton execution requests to the app's wallet-service JSON-RPC endpoint.
+Carpincho is a wallet/provider UI with an encrypted local vault, an injected CIP-0103 browser provider, and optional WalletConnect support. A dApp connects to Carpincho through the injected provider by default; Carpincho answers wallet/provider requests and forwards Canton execution requests to the app's wallet-service JSON-RPC endpoint. A dApp must be explicitly approved per origin before Carpincho exposes accounts or signs for it: an unapproved site sees no accounts, and the first `connect` opens an approval prompt in Carpincho.
 
 ```text
 dApp frontend -> injected CIP-0103 provider -> carpincho-wallet -> wallet-service /rpc -> Canton participant
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 99ca3132..43c4ade0 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -85,14 +85,14 @@ The vault is the security core of the wallet. It holds encrypted account secrets
 - **`keypair.ts`** — Ed25519 sign/verify wrappers around `@noble/ed25519`.
 - **`sessionUnlock.ts`** — Caches the session password and the absolute auto-lock deadline (`lockAt`) in `sessionStorage` (or `chrome.storage.session` when running as an extension) so the vault can survive page reloads while still honouring the configured idle timeout.
 - **`useVault.ts`** — The only way components should access vault state. Never read `localStorage` directly.
-- **`passwordStrength.ts`** — Owns the `zxcvbn-ts` setup and exports `scorePassword(pw)`, `isPasswordAcceptable(pw)`, `isConfirmMismatch(pw, c)`, `isNewPasswordPairValid(pw, c)`, `usePasswordStrengthReady()`, `MIN_PASSWORD_LENGTH`, and `MIN_PASSWORD_SCORE`. The EN + common dictionaries load lazily via dynamic `import()` so the Unlock / Home bundles never pay for them; `usePasswordStrengthReady()` kicks off the load on mount and triggers a re-render once `scorePassword` is real. A small in-module cache deduplicates scoring across the indicator and the submit-gate. Every callsite that gates on password quality (Setup, Change Password, the live strength meter) must import from here so the gate is defined in one place.
+- **`passwordStrength.ts`** — Owns the `zxcvbn-ts` setup and exports `scorePassword(pw)`, `isPasswordAcceptable(pw)`, `isConfirmMismatch(pw, c)`, `isNewPasswordPairValid(pw, c)`, `usePasswordStrengthReady()`, `ensurePasswordStrengthReady()`, and `MIN_PASSWORD_SCORE`. The EN + common dictionaries load lazily via dynamic `import()` so the Unlock / Home bundles never pay for them; `usePasswordStrengthReady()` kicks off the load on mount and triggers a re-render once `scorePassword` is real. A small in-module cache deduplicates scoring across the indicator and the submit-gate. The password-quality gate is now enforced at the vault boundary too: `VaultContext.setup()` and `changePassword()` call `isPasswordAcceptable` via `ensurePasswordStrengthReady()`, not only the UI (Setup, Change Password, the live strength meter); every callsite that gates on password quality must import from here so the gate is defined in one place.
 
 ### CIP-0103 Provider (`src/provider/`)
 
 Implements the Canton wallet provider standard. Any dApp request (from WalletConnect or direct injection) is routed here.
 
 - **`dispatch.ts`** — Central request router. Maps method names to handlers and returns a `DispatchResult` with status `handled`, `pending-approval`, or `error`.
-- **`methods.ts`** — Canonical method name constants plus legacy `canton_*` aliases for backwards compatibility.
+- **`methods.ts`** — Canonical method name constants plus legacy `canton_*` aliases for backwards compatibility. Also defines the per-method access tier (`ACCESS_TIER` / `accessTier(method)`) that the injected-provider gate consults, with unknown methods defaulting to the most restrictive tier (fail safe).
 - **`walletService.ts`** — Forwards ledger-read methods (`ledgerApi`, `prepareExecute`, etc.) to the external wallet-service JSON-RPC endpoint.
 - **`accounts.ts`** — Adapts internal `AccountPublic` records to the CIP-0103 wire format.
 
@@ -108,12 +108,12 @@ Manages the WalletConnect sign client lifecycle and session event handling.
 
 Connects the extension popup UI to web pages and the extension background.
 
-- **`background.ts`** — Persistent service worker. Maintains a queue of pending dApp requests, updates the action badge with the count, and caches a wallet snapshot for the popup. Also records the set of direct (injected-provider) dApp origins that have connected to `chrome.storage.session`, which the popup reads and watches via `storage.session.onChanged` to drive the footer's connection state.
+- **`background.ts`** — Persistent service worker. Maintains a queue of pending dApp requests, updates the action badge with the count, and caches a wallet snapshot for the popup. Also records the set of direct (injected-provider) dApp origins that have connected to `chrome.storage.session`, which the popup reads and watches via `storage.session.onChanged` to drive the footer's connection state. That connected-origins set is also a security input: it decides whether a requesting origin is connected (gating account access), and wallet events are broadcast only to connected dApp tabs.
 - **`contentScript.ts`** — Injected into every matched page; announces Carpincho with `canton:announceProvider`, responds to `canton:requestProvider`, and bridges page `window.postMessage` requests to the extension runtime.
-- **`directProvider.ts`** — Handles direct injected-provider requests inside the background worker when the cached wallet snapshot can answer without opening the popup; approval-required methods are queued for the popup.
+- **`directProvider.ts`** — Per-origin permission gate for injected-provider requests inside the background worker. An origin the user has not approved via `connect` gets no account data — account queries answer from an empty snapshot, reporting a disconnected state — `connect` from an unapproved origin is queued for explicit popup approval, and signing is refused; a connected origin (and origin-agnostic methods like `getActiveNetwork` / `disconnect`) is dispatched normally.
 - **`messages.ts`** — Shared message-type constants and type guards used by all three extension scripts.
 - **`runtimeClient.ts`** — Popup-side client for sending requests to the background and receiving responses.
-- **`directConnections.ts`** — Persists the set of direct injected-provider dApp origins that have completed a connect (and removes them on disconnect) in `chrome.storage.session`, with an in-memory fallback when not running as an extension, so the popup footer can show connection state for non-WalletConnect dApps; `clearDirectConnectedOrigins` drops all remembered origins (used on vault reset).
+- **`directConnections.ts`** — Persists the set of direct injected-provider dApp origins that have completed a connect (and removes them on disconnect) in `chrome.storage.session`, with an in-memory fallback when not running as an extension. This set gates injected-provider account access in addition to driving the popup footer's connection state for non-WalletConnect dApps; `clearDirectConnectedOrigins` drops all remembered origins (used on vault reset).
 - **`directConnectionState.ts`** — Pure helper that normalizes page URLs to stable http(s) origins and derives a remember/forget/none update from a provider request/response pair: remembers on a successful `connect` whose result reports `isConnected: true`, forgets on `disconnect`.
 - **`walletSnapshot.ts`** — Serialises the current wallet state (accounts, network, lock status) into a plain object the background caches so the popup can render without unlocking the vault.
 

From 1b7667a897a2e47c0dfe65376294306bc59bb09e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 18:54:04 -0300
Subject: [PATCH 014/121] feat(carpincho-wallet): expose dApp host and favicon
 in connection status

---
 .../src/extension/dappConnection.ts           | 16 ++++++----
 carpincho-wallet/src/wc/client.ts             |  2 ++
 .../test/extensionDappConnection.test.tsx     | 29 +++++++++++++++++++
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/extension/dappConnection.ts b/carpincho-wallet/src/extension/dappConnection.ts
index a5efb1bd..2193b19d 100644
--- a/carpincho-wallet/src/extension/dappConnection.ts
+++ b/carpincho-wallet/src/extension/dappConnection.ts
@@ -8,6 +8,7 @@ import type { ConnectedDappSession } from '@/wc/client'
 interface ChromeTab {
   url?: string
   title?: string
+  favIconUrl?: string
 }
 
 interface ChromeApi {
@@ -24,8 +25,10 @@ export type DappConnectionStatus =
   | {
       kind: 'detected' | 'connected'
       label: string
+      host: string
       subtitle: string
       origin: string
+      icon?: string
     }
 
 interface DappConnectionSources {
@@ -106,24 +109,27 @@ export const dappConnectionFromSources = ({
     const connected =
       directConnectedOrigins.some((origin) => sameOrigin(origin, tab.url as string)) ||
       sessions.some((session) => sameOrigin(session.url, tab.url as string))
+    const host = labelFromUrl(tab.url)
     return {
       kind: connected ? 'connected' : 'detected',
-      label: labelFromUrl(tab.url),
+      label: host,
+      host,
       subtitle: connected ? 'Connected' : 'Not connected',
       origin: originFromUrl(tab.url),
+      ...(tab.favIconUrl === undefined ? {} : { icon: tab.favIconUrl }),
     }
   }
 
   const connectedSession = sessions[0]
   if (connectedSession !== undefined) {
+    const host = labelFromUrl(connectedSession.url)
     return {
       kind: 'connected',
-      label:
-        connectedSession.name.trim() === ''
-          ? labelFromUrl(connectedSession.url)
-          : connectedSession.name,
+      label: connectedSession.name.trim() === '' ? host : connectedSession.name,
+      host,
       subtitle: 'Connected',
       origin: originFromUrl(connectedSession.url),
+      ...(connectedSession.icon === undefined ? {} : { icon: connectedSession.icon }),
     }
   }
 
diff --git a/carpincho-wallet/src/wc/client.ts b/carpincho-wallet/src/wc/client.ts
index 9a1b8126..760757ef 100644
--- a/carpincho-wallet/src/wc/client.ts
+++ b/carpincho-wallet/src/wc/client.ts
@@ -177,6 +177,7 @@ export interface ConnectedDappSession {
   description: string
   // Party IDs the session was approved with (decoded from the CAIP account strings).
   accounts: string[]
+  icon?: string
 }
 
 // CAIP account is `<chain>:<encodeURIComponent(partyId)>`; party id is the last segment.
@@ -204,6 +205,7 @@ const toConnectedDappSession = (
   url: session.peer.metadata.url,
   description: session.peer.metadata.description,
   accounts: partyIdsFromNamespaces(session.namespaces),
+  icon: session.peer.metadata.icons?.[0],
 })
 
 export const getConnectedDappSessions = async (): Promise<ConnectedDappSession[]> => {
diff --git a/carpincho-wallet/test/extensionDappConnection.test.tsx b/carpincho-wallet/test/extensionDappConnection.test.tsx
index bdf3cfa9..c6fb7299 100644
--- a/carpincho-wallet/test/extensionDappConnection.test.tsx
+++ b/carpincho-wallet/test/extensionDappConnection.test.tsx
@@ -84,6 +84,7 @@ describe('extension dApp connection helpers', () => {
     assert.deepEqual(result, {
       kind: 'detected',
       label: 'localhost:3012',
+      host: 'localhost:3012',
       subtitle: 'Not connected',
       origin: 'http://localhost:3012',
     })
@@ -103,6 +104,7 @@ describe('extension dApp connection helpers', () => {
     assert.deepEqual(result, {
       kind: 'connected',
       label: 'Counter dApp',
+      host: 'localhost:3012',
       subtitle: 'Connected',
       origin: 'http://localhost:3012',
     })
@@ -125,6 +127,7 @@ describe('extension dApp connection helpers', () => {
     assert.deepEqual(result, {
       kind: 'connected',
       label: 'localhost:3012',
+      host: 'localhost:3012',
       subtitle: 'Connected',
       origin: 'http://localhost:3012',
     })
@@ -148,6 +151,7 @@ describe('extension dApp connection helpers', () => {
     assert.deepEqual(result, {
       kind: 'connected',
       label: 'localhost:3012',
+      host: 'localhost:3012',
       subtitle: 'Connected',
       origin: 'http://localhost:3012',
     })
@@ -165,4 +169,29 @@ describe('extension dApp connection helpers', () => {
     // The footer should show the active tab host instead of the empty state.
     await waitFor(() => assert.ok(screen.getByText('github.com Not connected')))
   })
+
+  it('passes the active tab favicon through as the dApp icon', () => {
+    // Scenario: the browser exposes a favicon for the active tab.
+    const result = dappConnectionFromSources({
+      extensionMode: true,
+      sessions: [],
+      activeTab: {
+        url: 'http://localhost:3012/counter',
+        favIconUrl: 'http://localhost:3012/favicon.ico',
+      },
+    })
+
+    assert.equal(result.kind, 'detected')
+    assert.equal((result as { icon?: string }).icon, 'http://localhost:3012/favicon.ico')
+  })
+
+  it('passes the connected session icon through on web', () => {
+    // Scenario: the WalletConnect peer advertised an icon in its metadata.
+    const result = dappConnectionFromSources({
+      extensionMode: false,
+      sessions: [{ ...session, icon: 'http://localhost:3012/logo.png' }],
+    })
+
+    assert.equal((result as { icon?: string }).icon, 'http://localhost:3012/logo.png')
+  })
 })

From ccf0f0dc520eea3fea7e00e0d26751cdc0d07572 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 18:58:44 -0300
Subject: [PATCH 015/121] feat(carpincho-wallet): redesign connection footer as
 a single dApp + network row

---
 .../src/components/ConnectionFooter.tsx       | 165 ++++++++++--------
 carpincho-wallet/src/components/ui/icons.tsx  |  22 +++
 carpincho-wallet/src/views/HomeView.tsx       |  16 +-
 .../test/components/ConnectionFooter.test.tsx |  68 ++++----
 .../test/views/OnboardingFlow.test.tsx        |   2 +-
 5 files changed, 157 insertions(+), 116 deletions(-)

diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index c60a9624..5646453f 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -1,5 +1,5 @@
-import { ICON_BUTTON_CLASS, SecondaryButton } from '@/components/ui/Button'
-import { COG_ICON, DISCONNECT_ICON } from '@/components/ui/icons'
+import { useState } from 'react'
+import { CHEVRON_DOWN_ICON, DISCONNECT_ICON, GLOBE_ICON } from '@/components/ui/icons'
 import { cn } from '@/utils/cn'
 
 export interface WalletServiceFooterStatus {
@@ -10,105 +10,132 @@ export interface WalletServiceFooterStatus {
 
 export type DappFooterStatus =
   | { kind: 'none' }
-  | { kind: 'detected' | 'connected'; label: string; subtitle: string }
+  | { kind: 'detected' | 'connected'; host: string; subtitle: string; icon?: string }
 
 interface ConnectionFooterProps {
   walletService: WalletServiceFooterStatus
   dapp: DappFooterStatus
-  dappAccountAddress?: string
   onDisconnectDapp?: () => void
   onOpenSettings: () => void
 }
 
-// Canton service health, plus a connected-dApp row shown only while a dApp is connected.
+// dApp favicon with a monogram fallback; the globe stands in when there is no site context.
+const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element => {
+  const [failed, setFailed] = useState(false)
+  const tile = 'flex size-[26px] shrink-0 items-center justify-center rounded-[7px]'
+
+  if (host === undefined) {
+    return <span className={cn(tile, 'bg-muted text-soft [&>svg]:size-[15px]')}>{GLOBE_ICON}</span>
+  }
+  if (icon !== undefined && !failed) {
+    return (
+      <img
+        src={icon}
+        alt=""
+        className="size-[26px] shrink-0 rounded-[7px] object-cover"
+        onError={() => setFailed(true)}
+      />
+    )
+  }
+  return (
+    <span
+      className={cn(tile, 'bg-[image:var(--bg-gradient-brand)] text-[0.8rem] font-bold text-white')}
+    >
+      {host.charAt(0).toUpperCase()}
+    </span>
+  )
+}
+
+// Single-row footer: dApp identity on the left, the network pill (settings + health) on the right.
 export const ConnectionFooter = ({
   walletService,
   dapp,
-  dappAccountAddress,
   onDisconnectDapp,
   onOpenSettings,
 }: ConnectionFooterProps): JSX.Element => {
-  const dotClass = walletService.connected ? 'bg-success' : 'bg-danger'
-  const networkLabel = walletService.connected ? (walletService.networkId ?? 'unknown') : undefined
-  const formattedNetwork =
-    networkLabel === undefined ? undefined : networkLabel.replace(/^canton:/, 'network:')
+  const networkLabel = walletService.connected
+    ? (walletService.networkId?.replace(/^canton:/, '') ?? 'unknown')
+    : 'Offline'
+  const site = dapp.kind === 'none' ? undefined : dapp
+  const connected = dapp.kind === 'connected'
 
   return (
     <footer
       className={cn(
         // In-flow at the column bottom, bled past the shell padding to the popup edges.
         '-mx-3 shrink-0',
-        'flex flex-col gap-1.5 border-t border-border bg-background/95 px-2 py-2 backdrop-blur-md',
+        'flex items-center gap-2.5 border-t border-border bg-background/95 px-3 py-2 backdrop-blur-md',
       )}
     >
-      <div className="flex items-center gap-2">
-        <span
-          aria-hidden="true"
-          className={cn('size-2 rounded-full shrink-0', dotClass)}
+      <div className="flex min-w-0 flex-1 items-center gap-2.5">
+        <DappIcon
+          host={site?.host}
+          icon={site?.icon}
         />
-        <span
-          className="flex min-w-0 flex-1 items-baseline gap-1.5 truncate font-mono text-[0.7rem] tracking-normal"
-          title={walletService.reason}
-        >
-          <span
+        <div className="min-w-0 leading-tight">
+          <div
             className={cn(
-              'shrink-0 font-semibold uppercase tracking-[0.06em]',
-              walletService.connected ? 'text-success' : 'text-danger',
+              'truncate text-[0.84rem] font-semibold',
+              site === undefined ? 'text-muted-foreground' : 'font-mono text-foreground',
             )}
           >
-            canton
-          </span>
-          {formattedNetwork !== undefined && (
-            <>
-              <span className="shrink-0 text-muted-foreground/70">-</span>
+            {site?.host ?? 'No dApp connected'}
+          </div>
+          {site !== undefined && (
+            <div className="mt-0.5 flex items-center gap-1.5">
               <span
-                className="min-w-0 truncate font-medium normal-case text-muted-foreground"
-                title={formattedNetwork}
+                aria-hidden="true"
+                className={cn(
+                  'size-1.5 shrink-0 rounded-full',
+                  connected ? 'bg-success' : 'bg-border-strong',
+                )}
+              />
+              <span
+                className={cn(
+                  'text-[0.72rem] font-semibold',
+                  connected ? 'text-success' : 'text-muted-foreground',
+                )}
               >
-                {formattedNetwork}
+                {site.subtitle}
               </span>
-            </>
+              {connected && onDisconnectDapp !== undefined && (
+                <button
+                  type="button"
+                  onClick={onDisconnectDapp}
+                  aria-label="Disconnect"
+                  title="Disconnect"
+                  className="ml-0.5 inline-flex size-[18px] items-center justify-center rounded-sm text-soft hover:bg-danger/10 hover:text-danger [&>svg]:size-[13px]"
+                >
+                  {DISCONNECT_ICON}
+                </button>
+              )}
+            </div>
           )}
-        </span>
-        <button
-          type="button"
-          onClick={onOpenSettings}
-          aria-label="Connection settings"
-          title="Connection settings"
-          className={cn(ICON_BUTTON_CLASS, 'size-7 rounded-sm text-soft')}
-        >
-          {COG_ICON}
-        </button>
+        </div>
       </div>
 
-      {dapp.kind === 'connected' && (
-        <>
-          <div className="-mx-2 h-px bg-border" />
-
-          <div className="flex min-h-7 items-center gap-2">
-            <div className="min-w-0 flex-1 leading-tight">
-              <div className="truncate text-[0.82rem] font-semibold text-foreground">
-                {dapp.label}
-              </div>
-              {dappAccountAddress !== undefined && (
-                <div className="truncate font-mono text-[0.78rem] text-muted-foreground">
-                  {dappAccountAddress}
-                </div>
-              )}
-            </div>
-            {onDisconnectDapp !== undefined && (
-              <SecondaryButton
-                className="shrink-0 px-2.5 py-2"
-                onClick={onDisconnectDapp}
-                aria-label="Disconnect"
-                title="Disconnect"
-              >
-                {DISCONNECT_ICON}
-              </SecondaryButton>
-            )}
-          </div>
-        </>
-      )}
+      <button
+        type="button"
+        onClick={onOpenSettings}
+        aria-label="Connection settings"
+        title={walletService.reason ?? 'Connection settings'}
+        className={cn(
+          'flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-1.5',
+          'text-[0.74rem] font-semibold hover:border-border-strong',
+        )}
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            'size-2 shrink-0 rounded-full',
+            walletService.connected ? 'bg-success' : 'bg-danger',
+          )}
+        />
+        <span className={walletService.connected ? 'text-foreground' : 'text-danger'}>
+          {networkLabel}
+        </span>
+        <span className="text-soft [&>svg]:size-3.5">{CHEVRON_DOWN_ICON}</span>
+      </button>
     </footer>
   )
 }
diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index f7aaf804..82a3a755 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -491,6 +491,28 @@ export const CONTACTS_ICON = (
   </svg>
 )
 
+export const GLOBE_ICON = (
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="9"
+    />
+    <path d="M3 12h18" />
+    <path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18" />
+  </svg>
+)
+
 // Official WalletConnect logo mark, in brand blue.
 export const WALLET_CONNECT_ICON = (
   <svg
diff --git a/carpincho-wallet/src/views/HomeView.tsx b/carpincho-wallet/src/views/HomeView.tsx
index b969e10c..097b03f0 100644
--- a/carpincho-wallet/src/views/HomeView.tsx
+++ b/carpincho-wallet/src/views/HomeView.tsx
@@ -8,7 +8,7 @@ import { toast } from '@/components/ui/toast'
 import { useExtensionDappConnection } from '@/extension/dappConnection'
 import { forgetConnectedOrigin, isExtensionRuntime } from '@/extension/runtimeClient'
 import { useWalletServiceStatus } from '@/hooks/useWalletServiceStatus'
-import { shortMiddle, sortAccounts } from '@/utils/account'
+import { sortAccounts } from '@/utils/account'
 import { useVault } from '@/vault/useVault'
 import { ConnectionSettingsView } from '@/views/ConnectionSettingsView'
 import { PendingActionsSection } from '@/views/home/PendingActionsSection'
@@ -121,19 +121,6 @@ export const HomeView = (): JSX.Element => {
     sessions,
   })
   const connectedSession = sessions[0]
-  // Connected account address: the WC session's account on web, the active account in extension mode.
-  const footerDappAccountAddress = ((): string | undefined => {
-    if (extensionMode) {
-      return primary === undefined ? undefined : shortMiddle(primary.partyId, 12, 7)
-    }
-    if (connectedSession === undefined) {
-      return undefined
-    }
-    const partyId =
-      v.accounts.find((a) => connectedSession.accounts.includes(a.partyId))?.partyId ??
-      connectedSession.accounts[0]
-    return partyId === undefined ? undefined : shortMiddle(partyId, 12, 7)
-  })()
   // Disconnect, run only after the confirmation dialog is accepted.
   const performDisconnect = ((): (() => void) | undefined => {
     if (extensionMode) {
@@ -224,7 +211,6 @@ export const HomeView = (): JSX.Element => {
       <ConnectionFooter
         walletService={walletService}
         dapp={dapp}
-        dappAccountAddress={footerDappAccountAddress}
         onDisconnectDapp={
           performDisconnect === undefined ? undefined : () => setDisconnectConfirmOpen(true)
         }
diff --git a/carpincho-wallet/test/components/ConnectionFooter.test.tsx b/carpincho-wallet/test/components/ConnectionFooter.test.tsx
index 6a34eda2..2283fe0d 100644
--- a/carpincho-wallet/test/components/ConnectionFooter.test.tsx
+++ b/carpincho-wallet/test/components/ConnectionFooter.test.tsx
@@ -14,9 +14,10 @@ const connectedService: WalletServiceFooterStatus = {
   networkId: 'canton:local',
 }
 
-const disconnectedService: WalletServiceFooterStatus = {
+const offlineService: WalletServiceFooterStatus = {
   // Wallet-service fixture representing an unreachable service or disconnected Canton network.
   connected: false,
+  networkId: 'canton:local',
 }
 
 const noDapp: DappFooterStatus = {
@@ -27,17 +28,24 @@ const noDapp: DappFooterStatus = {
 const detectedDapp: DappFooterStatus = {
   // Detected dApp fixture matching a browser page that contacted the extension without connecting.
   kind: 'detected',
-  label: 'localhost:3012',
+  host: 'app.uniswap.org',
   subtitle: 'Not connected',
 }
 
+const connectedDapp: DappFooterStatus = {
+  // Connected dApp fixture representing an active session.
+  kind: 'connected',
+  host: 'localhost:5173',
+  subtitle: 'Connected',
+}
+
 describe('ConnectionFooter', () => {
   afterEach(() => {
     cleanup()
   })
 
-  it('shows wallet-service status and opens settings from a cog button', async () => {
-    // Scenario: Canton is connected, so the footer should show green service state and settings chrome.
+  it('opens settings from the network pill and shows the network name', async () => {
+    // Scenario: Canton is connected, so the pill shows the network and routes to settings.
     const user = userEvent.setup()
     let settingsCalls = 0
     render(
@@ -50,33 +58,26 @@ describe('ConnectionFooter', () => {
       />,
     )
 
-    // The service row should split Canton status color from the muted network label.
-    assert.ok(screen.getByText('canton'))
-    assert.ok(screen.getByText('network:local'))
-    assert.equal(screen.queryByText(/edit/i), null)
-
-    // The cog button is the only settings affordance and must remain keyboard/click accessible.
+    assert.ok(screen.getByText('local'))
     await user.click(screen.getByRole('button', { name: /connection settings/i }))
     assert.equal(settingsCalls, 1)
   })
 
-  it('shows a red not-connected service state', () => {
-    // Scenario: Canton is unavailable, so the footer should make the service problem explicit.
+  it('shows the offline pill when the wallet-service is unreachable', () => {
+    // Scenario: Canton is unavailable, so the pill makes the service problem explicit.
     render(
       <ConnectionFooter
-        walletService={{ ...disconnectedService, networkId: 'canton:local' }}
+        walletService={offlineService}
         dapp={noDapp}
         onOpenSettings={() => undefined}
       />,
     )
 
-    // The disconnected label must be visible, but the network is hidden because it is unknown.
-    assert.ok(screen.getByText('canton'))
-    assert.equal(screen.queryByText('canton - network:local'), null)
+    assert.ok(screen.getByText('Offline'))
   })
 
-  it('shows unknown when connected service omits the network id', () => {
-    // Scenario: wallet-service confirms Canton connectivity but does not include network metadata.
+  it('marks a connected service with a missing network id as unknown', () => {
+    // Scenario: wallet-service confirms connectivity but omits the network metadata.
     render(
       <ConnectionFooter
         walletService={{ connected: true }}
@@ -85,40 +86,45 @@ describe('ConnectionFooter', () => {
       />,
     )
 
-    // Connected state should still include network text and mark the missing id explicitly.
     assert.ok(screen.getByText('unknown'))
   })
 
-  it('hides the dApp row while no dApp is connected', () => {
-    // Scenario: neither an empty nor a merely-detected page should render a dApp row anymore.
-    const { rerender } = render(
+  it('shows a placeholder when no dApp is connected', () => {
+    // Scenario: nothing is connected and no site context exists.
+    render(
       <ConnectionFooter
         walletService={connectedService}
         dapp={noDapp}
         onOpenSettings={() => undefined}
       />,
     )
-    assert.equal(screen.queryByText(/no dapp found/i), null)
 
-    rerender(
+    assert.ok(screen.getByText('No dApp connected'))
+  })
+
+  it('shows a detected but unconnected site host with a not-connected status', () => {
+    // Scenario: a site is open but has not connected, so its host shows as not connected.
+    render(
       <ConnectionFooter
         walletService={connectedService}
         dapp={detectedDapp}
         onOpenSettings={() => undefined}
       />,
     )
-    assert.equal(screen.queryByText('localhost:3012'), null)
+
+    assert.ok(screen.getByText('app.uniswap.org'))
+    assert.ok(screen.getByText('Not connected'))
+    assert.equal(screen.queryByRole('button', { name: /disconnect/i }), null)
   })
 
-  it('shows the connected dApp with account address and a disconnect button', async () => {
-    // Scenario: a dApp is connected, so the footer shows the app, the connected account address, and disconnect.
+  it('shows the connected host with a disconnect control', async () => {
+    // Scenario: a dApp is connected, so the footer shows the host, status, and disconnect.
     const user = userEvent.setup()
     let disconnects = 0
     render(
       <ConnectionFooter
         walletService={connectedService}
-        dapp={{ kind: 'connected', label: 'Counter dApp', subtitle: 'Connected' }}
-        dappAccountAddress="bn-dev::mock...79f7ec4"
+        dapp={connectedDapp}
         onDisconnectDapp={() => {
           disconnects += 1
         }}
@@ -126,8 +132,8 @@ describe('ConnectionFooter', () => {
       />,
     )
 
-    assert.ok(screen.getByText('Counter dApp'))
-    assert.ok(screen.getByText('bn-dev::mock...79f7ec4'))
+    assert.ok(screen.getByText('localhost:5173'))
+    assert.ok(screen.getByText('Connected'))
     await user.click(screen.getByRole('button', { name: /disconnect/i }))
     assert.equal(disconnects, 1)
   })
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index da712545..c7165fe1 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -107,7 +107,7 @@ describe('OnboardingFlow', () => {
     renderFlow({ hasVault: true, accounts: [] })
 
     // The existing footer should report the configured wallet-service status on this step.
-    await waitFor(() => assert.ok(screen.getByText('network:local')))
+    await waitFor(() => assert.ok(screen.getByText('local')))
 
     // Opening the footer settings should show the same wallet-service URL field used after setup.
     await user.click(screen.getByRole('button', { name: 'Connection settings' }))

From 510199af419d19a388ee023f02edd2061138ffde Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 19:25:01 -0300
Subject: [PATCH 016/121] refactor(carpincho-wallet): render the dApp favicon
 with Radix Avatar

---
 carpincho-wallet/package.json                 |   1 +
 .../src/components/ConnectionFooter.tsx       |  42 ++---
 package-lock.json                             | 144 ++++++++++++++++++
 3 files changed, 166 insertions(+), 21 deletions(-)

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index 386d8153..ba64fb44 100644
--- a/carpincho-wallet/package.json
+++ b/carpincho-wallet/package.json
@@ -18,6 +18,7 @@
     "@fontsource-variable/manrope": "^5.2.8",
     "@noble/ed25519": "^3.1.0",
     "@noble/hashes": "^1.7.0",
+    "@radix-ui/react-avatar": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-select": "^2.3.0",
     "@radix-ui/react-switch": "^1.3.0",
diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index 5646453f..7deeda8b 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import * as Avatar from '@radix-ui/react-avatar'
 import { CHEVRON_DOWN_ICON, DISCONNECT_ICON, GLOBE_ICON } from '@/components/ui/icons'
 import { cn } from '@/utils/cn'
 
@@ -19,30 +19,30 @@ interface ConnectionFooterProps {
   onOpenSettings: () => void
 }
 
-// dApp favicon with a monogram fallback; the globe stands in when there is no site context.
-const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element => {
-  const [failed, setFailed] = useState(false)
-  const tile = 'flex size-[26px] shrink-0 items-center justify-center rounded-[7px]'
+const TILE = 'flex size-[26px] shrink-0 items-center justify-center overflow-hidden rounded-[7px]'
 
+// dApp favicon via Radix Avatar (image with monogram fallback); the globe stands in
+// when there is no site context to identify.
+const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element => {
   if (host === undefined) {
-    return <span className={cn(tile, 'bg-muted text-soft [&>svg]:size-[15px]')}>{GLOBE_ICON}</span>
-  }
-  if (icon !== undefined && !failed) {
-    return (
-      <img
-        src={icon}
-        alt=""
-        className="size-[26px] shrink-0 rounded-[7px] object-cover"
-        onError={() => setFailed(true)}
-      />
-    )
+    return <span className={cn(TILE, 'bg-muted text-soft [&>svg]:size-[15px]')}>{GLOBE_ICON}</span>
   }
   return (
-    <span
-      className={cn(tile, 'bg-[image:var(--bg-gradient-brand)] text-[0.8rem] font-bold text-white')}
-    >
-      {host.charAt(0).toUpperCase()}
-    </span>
+    <Avatar.Root className={cn(TILE, 'bg-[image:var(--bg-gradient-brand)]')}>
+      {icon !== undefined && (
+        <Avatar.Image
+          src={icon}
+          alt=""
+          className="size-full object-cover"
+        />
+      )}
+      <Avatar.Fallback
+        delayMs={icon === undefined ? 0 : 200}
+        className="text-[0.8rem] font-bold text-white"
+      >
+        {host.charAt(0).toUpperCase()}
+      </Avatar.Fallback>
+    </Avatar.Root>
   )
 }
 
diff --git a/package-lock.json b/package-lock.json
index 589c4c9c..c3ba9266 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -110,6 +110,7 @@
         "@fontsource-variable/manrope": "^5.2.8",
         "@noble/ed25519": "^3.1.0",
         "@noble/hashes": "^1.7.0",
+        "@radix-ui/react-avatar": "^1.2.0",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-select": "^2.3.0",
         "@radix-ui/react-switch": "^1.3.0",
@@ -3274,6 +3275,134 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.2.0.tgz",
+      "integrity": "sha512-am/CwltXtmtdtP+5FbYblYDnMa/zuKcMJP1i3/SJMDXXfj2mG+BTqLH2wucqeyyiQMursUtg/5cK+Nh2pCaSOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.6",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz",
+      "integrity": "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.4.tgz",
+      "integrity": "sha512-QwH4PO5urrbO+FaGd5Aglg+YJgWTyyuZ3g/6mKvsqraLkglDdckw9JafgL5McL5VEJ6EPNduPaT3ZE9BttDAqg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.6.tgz",
+      "integrity": "sha512-wetd0QI77DbvrPpTAvH1SqOxsYF2wZe5TNxqwOd5Ty4XDpV3dpV0s8K/1MGMJBeY5o7lg8ub5VIt1Ub+yVen6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-slot": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.0.tgz",
+      "integrity": "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.2.tgz",
+      "integrity": "sha512-xCso9j1/u8sEgP1RNHjFrXJLApL8LiqOkI1R4ywuN00rxWdYg4oQXuwKLS3i0j5NWLromUD27/4nlxj2UFVvIw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -4461,6 +4590,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.1.tgz",
+      "integrity": "sha512-qwOiz4Tjo8CNnrOLAYUMXeZwDzXgXpvK4TKQPmWLECM9XoWvA6+0Z2/7Ag3A4ivjS4ovbLJPbskkxioFyBhr8A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",

From 4abb762fd0c0f3ac9dc3828cf4916a2c06f179b2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 19:32:21 -0300
Subject: [PATCH 017/121] refactor(carpincho-wallet): tidy connection footer
 after review

Drop the now-unused COG_ICON, render the monogram synchronously when a
dApp has no favicon, and cover status independence and the favicon fallback.
---
 .../src/components/ConnectionFooter.tsx       |  2 +-
 carpincho-wallet/src/components/ui/icons.tsx  | 17 ------------
 .../test/components/ConnectionFooter.test.tsx | 27 +++++++++++++++++++
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index 7deeda8b..a17a790a 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -37,7 +37,7 @@ const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element
         />
       )}
       <Avatar.Fallback
-        delayMs={icon === undefined ? 0 : 200}
+        delayMs={icon === undefined ? undefined : 200}
         className="text-[0.8rem] font-bold text-white"
       >
         {host.charAt(0).toUpperCase()}
diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index 82a3a755..be08a2c7 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -113,23 +113,6 @@ export const COPY_ICON = (
   </svg>
 )
 
-export const COG_ICON = (
-  <svg
-    width="15"
-    height="15"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    aria-hidden="true"
-  >
-    <path d="M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z" />
-    <path d="M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1.09 1.65V21a2.1 2.1 0 1 1-4.2 0v-.09a1.8 1.8 0 0 0-1.09-1.65 1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 4.6 15a1.8 1.8 0 0 0-1.65-1.09H3a2.1 2.1 0 1 1 0-4.2h.09A1.8 1.8 0 0 0 4.74 8.6a1.8 1.8 0 0 0-.36-1.98l-.06-.06A2.1 2.1 0 1 1 7.29 3.6l.06.06a1.8 1.8 0 0 0 1.98.36A1.8 1.8 0 0 0 10.42 2.4V2a2.1 2.1 0 1 1 4.2 0v.09a1.8 1.8 0 0 0 1.09 1.65 1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06a1.8 1.8 0 0 0-.36 1.98 1.8 1.8 0 0 0 1.65 1.09H22a2.1 2.1 0 1 1 0 4.2h-.09A1.8 1.8 0 0 0 19.4 15Z" />
-  </svg>
-)
-
 export const EYE_ICON = (
   <svg
     width="16"
diff --git a/carpincho-wallet/test/components/ConnectionFooter.test.tsx b/carpincho-wallet/test/components/ConnectionFooter.test.tsx
index 2283fe0d..81b78755 100644
--- a/carpincho-wallet/test/components/ConnectionFooter.test.tsx
+++ b/carpincho-wallet/test/components/ConnectionFooter.test.tsx
@@ -137,4 +137,31 @@ describe('ConnectionFooter', () => {
     await user.click(screen.getByRole('button', { name: /disconnect/i }))
     assert.equal(disconnects, 1)
   })
+
+  it('falls back to a host monogram when the dApp has no favicon', () => {
+    // Scenario: connected dApp without an icon, so the avatar shows the first host letter.
+    render(
+      <ConnectionFooter
+        walletService={connectedService}
+        dapp={connectedDapp}
+        onOpenSettings={() => undefined}
+      />,
+    )
+
+    assert.ok(screen.getByText('L'))
+  })
+
+  it('keeps dApp connection and wallet-service health independent', () => {
+    // Scenario: a connected dApp coexists with an unreachable wallet-service.
+    render(
+      <ConnectionFooter
+        walletService={offlineService}
+        dapp={connectedDapp}
+        onOpenSettings={() => undefined}
+      />,
+    )
+
+    assert.ok(screen.getByText('Connected'))
+    assert.ok(screen.getByText('Offline'))
+  })
 })

From 0e5c7c39e0ab1b9fd7d593fe5e0fce98d4b5669d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 19:42:23 -0300
Subject: [PATCH 018/121] chore(carpincho-wallet): remove dead extension and
 theme exports

These message constants/types are re-declared locally in contentScript.ts and
were never imported from messages.ts; the Theme alias was superseded by ThemeMode.
---
 carpincho-wallet/src/extension/messages.ts | 17 -----------------
 carpincho-wallet/src/theme/ThemeContext.ts |  1 -
 2 files changed, 18 deletions(-)

diff --git a/carpincho-wallet/src/extension/messages.ts b/carpincho-wallet/src/extension/messages.ts
index 914206ac..8c83f601 100644
--- a/carpincho-wallet/src/extension/messages.ts
+++ b/carpincho-wallet/src/extension/messages.ts
@@ -1,6 +1,5 @@
 export const CARPINCHO_PROVIDER_ID = 'carpincho-wallet'
 export const CARPINCHO_PROVIDER_NAME = 'Carpincho Wallet'
-export const CARPINCHO_PROVIDER_DESCRIPTION = 'Connect with the Carpincho browser extension wallet'
 
 export const WalletEvent = {
   SPLICE_WALLET_REQUEST: 'SPLICE_WALLET_REQUEST',
@@ -14,9 +13,6 @@ export const WalletEvent = {
 
 type WalletEventValue<K extends keyof typeof WalletEvent> = (typeof WalletEvent)[K]
 
-export const CANTON_REQUEST_PROVIDER_EVENT = 'canton:requestProvider'
-export const CANTON_ANNOUNCE_PROVIDER_EVENT = 'canton:announceProvider'
-
 export interface JsonRpcRequest {
   jsonrpc: '2.0'
   id?: string | number | null
@@ -41,16 +37,6 @@ export interface SpliceWalletRequestMessage {
   target?: string
 }
 
-export interface SpliceWalletResponseMessage {
-  type: WalletEventValue<'SPLICE_WALLET_RESPONSE'>
-  response: JsonRpcResponse
-}
-
-export interface SpliceWalletReadyMessage {
-  type: WalletEventValue<'SPLICE_WALLET_EXT_READY'>
-  target?: string
-}
-
 export interface SpliceWalletAckMessage {
   type: WalletEventValue<'SPLICE_WALLET_EXT_ACK'>
   target: typeof CARPINCHO_PROVIDER_ID
@@ -113,9 +99,6 @@ export const isRecord = (value: unknown): value is Record<string, unknown> =>
 export const isForCarpincho = (message: { target?: unknown }): boolean =>
   message.target === undefined || message.target === CARPINCHO_PROVIDER_ID
 
-export const isSpliceWalletReady = (value: unknown): value is SpliceWalletReadyMessage =>
-  isRecord(value) && value.type === WalletEvent.SPLICE_WALLET_EXT_READY
-
 export const isSpliceWalletRequest = (value: unknown): value is SpliceWalletRequestMessage =>
   isRecord(value) &&
   value.type === WalletEvent.SPLICE_WALLET_REQUEST &&
diff --git a/carpincho-wallet/src/theme/ThemeContext.ts b/carpincho-wallet/src/theme/ThemeContext.ts
index 2d996f2c..2ac38037 100644
--- a/carpincho-wallet/src/theme/ThemeContext.ts
+++ b/carpincho-wallet/src/theme/ThemeContext.ts
@@ -1,6 +1,5 @@
 import { createContext } from 'react'
 
-export type Theme = 'light' | 'dark'
 export type ThemeMode = 'light' | 'dark' | 'system'
 
 export interface ThemeContextValue {

From e13d1b93d7d07a50958a93037894bf6f71822e3e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:28:21 -0300
Subject: [PATCH 019/121] refactor(carpincho-wallet): reuse icon-button styling
 and restore footer focus ring

The disconnect control now builds on PLAIN_ICON_BUTTON_CLASS (overriding to a
danger hover) and the network pill regains focus-visible:shadow-focus, matching
the rest of the app's keyboard focus treatment.
---
 carpincho-wallet/src/components/ConnectionFooter.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index a17a790a..c308b211 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -1,4 +1,5 @@
 import * as Avatar from '@radix-ui/react-avatar'
+import { PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
 import { CHEVRON_DOWN_ICON, DISCONNECT_ICON, GLOBE_ICON } from '@/components/ui/icons'
 import { cn } from '@/utils/cn'
 
@@ -104,7 +105,10 @@ export const ConnectionFooter = ({
                   onClick={onDisconnectDapp}
                   aria-label="Disconnect"
                   title="Disconnect"
-                  className="ml-0.5 inline-flex size-[18px] items-center justify-center rounded-sm text-soft hover:bg-danger/10 hover:text-danger [&>svg]:size-[13px]"
+                  className={cn(
+                    PLAIN_ICON_BUTTON_CLASS,
+                    'ml-0.5 size-[18px] text-soft hover:bg-danger/10 hover:text-danger [&>svg]:size-[13px]',
+                  )}
                 >
                   {DISCONNECT_ICON}
                 </button>
@@ -121,7 +125,8 @@ export const ConnectionFooter = ({
         title={walletService.reason ?? 'Connection settings'}
         className={cn(
           'flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-muted px-2.5 py-1.5',
-          'text-[0.74rem] font-semibold hover:border-border-strong',
+          'text-[0.74rem] font-semibold transition-colors hover:border-border-strong',
+          'focus-visible:outline-none focus-visible:shadow-focus',
         )}
       >
         <span

From 73060e80b9cd9603847ea62e72ffa89c2b9200c5 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:32:19 -0300
Subject: [PATCH 020/121] docs(carpincho-wallet): sync icon catalogue and Radix
 list to the footer redesign

Drop the removed COG_ICON, add GLOBE_ICON, and list @radix-ui/react-avatar
(dApp favicon with monogram fallback in ConnectionFooter).
---
 carpincho-wallet/AGENTS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index 7d0fec55..0a0f2458 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -13,7 +13,7 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 | Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
 | Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer at Settings → Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
 | Fonts | Self-hosted via `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Imported once in `src/main.tsx`; works offline in the extension popup. Manrope is the entire UI: `font-display` for hero wordmarks, view-level headings, section markers (heavier weight for hierarchy) and `font-sans` for UI chrome / body / labels / buttons. `font-mono` (JetBrains Mono) is for party IDs, hashes, RPC URLs, JSON payloads, status eyebrows |
-| UI primitives | Radix UI | `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `COG_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus pending CIP-56 transfers split by direction through `transferDirection`: incoming transfers the active party can Accept, and the party's own outgoing transfers shown read-only as "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; completed transfer history lives in the Activity tab, not here), and `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`); Assets is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a count badge of incoming transfers awaiting acceptance. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
+| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus pending CIP-56 transfers split by direction through `transferDirection`: incoming transfers the active party can Accept, and the party's own outgoing transfers shown read-only as "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; completed transfer history lives in the Activity tab, not here), and `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`); Assets is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a count badge of incoming transfers awaiting acceptance. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
 | Feedback | Toast vs inline Alert vs error prop | Transient system feedback (action results, async errors, network failures, copy confirmations) renders via `toast.*` from [`@/components/ui/toast.ts`](src/components/ui/toast.ts) — never as inline `Alert`. Mount the `ToastProvider` once in `App.tsx`. Field-level error state (mismatched passwords, wrong current password on a verify step, invalid input) uses the `error` prop on `TextInput` / `PasswordInput` (danger border + `aria-invalid`); pair it with `aria-errormessage` pointing at a sibling caption `<p>` when there is a human-readable reason to render. Inline `Alert` is reserved for form-level errors that cannot be attributed to a single field and for persistent contextual hints inside cards. All callers (React components, WalletConnect handlers in `src/wc/`, vault errors, extension bridge) use the imperative `toast` import directly. Variant durations: non-critical variants (`info` / `success` / `warning`) auto-dismiss after 5 s; only `error` (must-read) persists until dismissed. Identical messages collapse — emitting a string message that matches a visible toast of the same variant replaces it with a fresh entry (so rapid repeats like copy clicks collapse to a single toast and restart its timer); distinct messages of the same variant (a copy confirmation vs an RPC test result) stack separately. Toasts render as elevated `bg-surface` cards (border + `shadow-popover`) with a variant-tinted icon badge and a left accent rail, sized to the app content width (`w-popup`). The message body caps at `max-h-40` and scrolls when longer; `error` toasts (only) carry a copy-icon button that copies the rendered message text. Max 3 visible, top-center, newest on top |
 | Package manager | npm | lockfile: `package-lock.json` |
 | Data fetching | @tanstack/react-query | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); a single `QueryClient` is mounted in `App.tsx`. Read/list logic lives in `src/cip56/*`, wrapped by hooks in `src/hooks/*` |

From 50f8c43c88e0792cc6732f7fb6850b1ade5681d0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:58:23 -0300
Subject: [PATCH 021/121] refactor(carpincho-wallet): show token balance
 instead of UTXO count in asset rows

---
 carpincho-wallet/src/components/TokenRow.tsx  | 78 +++++++++----------
 carpincho-wallet/src/components/ui/icons.tsx  | 23 ++++++
 .../test/components/AssetsPanel.test.tsx      |  5 +-
 .../test/components/TokenRow.test.tsx         | 29 +++----
 4 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/carpincho-wallet/src/components/TokenRow.tsx b/carpincho-wallet/src/components/TokenRow.tsx
index aeccbf9c..780458b8 100644
--- a/carpincho-wallet/src/components/TokenRow.tsx
+++ b/carpincho-wallet/src/components/TokenRow.tsx
@@ -1,51 +1,47 @@
 import cantonIcon from '@/assets/canton.png'
+import { formatTokenAmount } from '@/cip56/amount'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
-import { CHEVRON_RIGHT_ICON } from '@/components/ui/icons'
+import { LOCK_ICON } from '@/components/ui/icons'
 
 interface TokenRowProps {
   summary: TokenHoldingSummary
   onOpen: () => void
 }
 
-// Activity-style subtitle: UTXO count with pluralisation and an optional locked suffix.
-const utxoSubtitle = (summary: TokenHoldingSummary): string => {
-  const parts: string[] =
-    summary.utxoCount === undefined
-      ? ['UTXOs load on demand']
-      : [`${summary.utxoCount} ${summary.utxoCount === 1 ? 'UTXO' : 'UTXOs'}`]
-  if ((summary.lockedCount ?? 0) > 0) {
-    parts.push(`${summary.lockedCount} locked`)
-  }
-  return parts.join(' · ')
-}
-
-// One token in the assets list; the whole row opens the token detail modal.
-export const TokenRow = ({ summary, onOpen }: TokenRowProps): JSX.Element => (
-  <button
-    type="button"
-    onClick={onOpen}
-    className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-1 py-2.5 text-left outline-none transition-colors hover:bg-primary-soft/40 focus-visible:bg-primary-soft/60"
-  >
-    <img
-      src={cantonIcon}
-      alt=""
-      aria-hidden="true"
-      draggable={false}
-      className="size-9 shrink-0 rounded-full"
-    />
-    <span className="min-w-0">
-      <span className="block truncate text-[0.94rem] font-semibold text-foreground">
-        {summary.tokenLabel}
+// One token in the assets list: icon + name left, grouped balance right; opens the detail modal.
+export const TokenRow = ({ summary, onOpen }: TokenRowProps): JSX.Element => {
+  const hasLocked = (summary.lockedCount ?? 0) > 0
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-1 py-2.5 text-left outline-none transition-colors hover:bg-primary-soft/40 focus-visible:bg-primary-soft/60"
+    >
+      <img
+        src={cantonIcon}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        className="size-9 shrink-0 rounded-full"
+      />
+      <span className="flex min-w-0 items-center gap-1.5">
+        <span className="truncate text-[0.94rem] font-semibold text-foreground">
+          {summary.tokenLabel}
+        </span>
+        {hasLocked ? (
+          <span
+            role="img"
+            className="shrink-0 text-warning"
+            title="Some holdings are locked"
+            aria-label="Some holdings are locked"
+          >
+            {LOCK_ICON}
+          </span>
+        ) : null}
       </span>
-      <span className="block truncate text-[0.84rem] text-muted-foreground">
-        {utxoSubtitle(summary)}
+      <span className="justify-self-end font-mono text-[0.95rem] font-semibold text-foreground">
+        {formatTokenAmount(summary.totalAmount)}
       </span>
-    </span>
-    <span
-      aria-hidden="true"
-      className="justify-self-end text-muted-foreground"
-    >
-      {CHEVRON_RIGHT_ICON}
-    </span>
-  </button>
-)
+    </button>
+  )
+}
diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index be08a2c7..112a7513 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -496,6 +496,29 @@ export const GLOBE_ICON = (
   </svg>
 )
 
+export const LOCK_ICON = (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <rect
+      x="4"
+      y="11"
+      width="16"
+      height="10"
+      rx="2"
+    />
+    <path d="M8 11V7a4 4 0 0 1 8 0v4" />
+  </svg>
+)
+
 // Official WalletConnect logo mark, in brand blue.
 export const WALLET_CONNECT_ICON = (
   <svg
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 763d5236..50cd9a7e 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -105,7 +105,8 @@ describe('AssetsPanel', () => {
     renderAssets(api)
 
     await screen.findByText('Amulet')
-    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
+    assert.equal(screen.getByText('15.75').textContent, '15.75')
+    assert.equal(screen.queryByText(/UTXO/i), null)
     assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
   })
 
@@ -185,7 +186,7 @@ describe('AssetsPanel', () => {
     assert.equal(detailsCalls, 0)
     await clickTokenRow('Amulet')
 
-    await screen.findByText('15.75')
+    await screen.findAllByText('15.75')
     await screen.findByText('12.50')
     assert.equal(detailsCalls, 1)
   })
diff --git a/carpincho-wallet/test/components/TokenRow.test.tsx b/carpincho-wallet/test/components/TokenRow.test.tsx
index 66946e16..39c509a7 100644
--- a/carpincho-wallet/test/components/TokenRow.test.tsx
+++ b/carpincho-wallet/test/components/TokenRow.test.tsx
@@ -21,9 +21,9 @@ describe('TokenRow', () => {
     cleanup()
   })
 
-  it('renders the token name and UTXO subtitle as an icon row with a chevron', () => {
-    // Scenario: the assets list should read like an activity row, not a card with
-    // an inline expander: token icon left, name + UTXO count center, chevron right.
+  it('shows the token name and formatted balance, no UTXO subtitle or chevron', () => {
+    // Scenario: the assets list is balance-first (MetaMask/Rabby-style): icon + name
+    // on the left, the grouped balance on the right. The UTXO count moved to the detail sheet.
     const { container } = render(
       <TokenRow
         summary={SUMMARY}
@@ -32,35 +32,36 @@ describe('TokenRow', () => {
     )
 
     assert.equal(screen.getByText('Amulet').textContent, 'Amulet')
-    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
+    assert.equal(screen.getByText('9,997.00').textContent, '9,997.00')
     assert.ok(container.querySelector('img'), 'the row should show the token icon')
+    assert.equal(screen.queryByText(/UTXO/i), null)
     assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
   })
 
-  it('singularises a lone UTXO and notes locked holdings', () => {
-    // Scenario: subtitle pluralisation and the locked-count suffix carry over from
-    // the old card so users keep that at-a-glance detail.
+  it('marks locked holdings with a lock hint', () => {
+    // Scenario: locked funds matter at a glance; a small lock glyph appears when any
+    // holding is locked (the amount/breakdown stays in the detail sheet).
     render(
       <TokenRow
-        summary={{ ...SUMMARY, utxoCount: 1, lockedCount: 1, unlockedCount: 0 }}
+        summary={{ ...SUMMARY, lockedCount: 1, unlockedCount: 1 }}
         onOpen={() => undefined}
       />,
     )
 
-    assert.equal(screen.getByText('1 UTXO · 1 locked').textContent, '1 UTXO · 1 locked')
+    assert.ok(screen.getByLabelText('Some holdings are locked'))
   })
 
-  it('falls back to a load-on-demand subtitle when the count is unknown', () => {
-    // Scenario: Scan summaries arrive without a UTXO count; the row must not render
-    // "undefined UTXOs".
+  it('omits the lock hint when nothing is locked', () => {
+    // Scenario: a fully-spendable token shows no lock glyph, only the balance.
     render(
       <TokenRow
-        summary={{ ...SUMMARY, utxoCount: undefined, lockedCount: undefined }}
+        summary={SUMMARY}
         onOpen={() => undefined}
       />,
     )
 
-    assert.equal(screen.getByText('UTXOs load on demand').textContent, 'UTXOs load on demand')
+    assert.equal(screen.queryByLabelText('Some holdings are locked'), null)
+    assert.ok(screen.getByText('9,997.00'))
   })
 
   it('opens the token when the row is clicked', async () => {

From de605524fa3f9d3f0f76362cdc9f9832f49b502a Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:02:25 -0300
Subject: [PATCH 022/121] refactor(carpincho-wallet): extract auto-accept
 toggle into AutoAcceptSetting

---
 .../src/components/AutoAcceptSetting.tsx      |  74 ++++++++
 .../components/AutoAcceptSetting.test.tsx     | 175 ++++++++++++++++++
 2 files changed, 249 insertions(+)
 create mode 100644 carpincho-wallet/src/components/AutoAcceptSetting.tsx
 create mode 100644 carpincho-wallet/test/components/AutoAcceptSetting.test.tsx

diff --git a/carpincho-wallet/src/components/AutoAcceptSetting.tsx b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
new file mode 100644
index 00000000..3493c2d6
--- /dev/null
+++ b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { Switch } from '@/components/ui/Switch'
+import { Tooltip } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
+import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+interface AutoAcceptSettingProps {
+  account: AccountPublic
+  api?: AmuletPreapprovalApi
+}
+
+const AUTO_ACCEPT_TOOLTIP =
+  "When this is on, any Amulet someone sends you drops straight into your wallet. Turn it off and you'll have to accept each incoming transfer yourself."
+
+// Receiver opt-in for Amulet auto-accept, surfaced as a setting row on the Assets tab.
+export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX.Element => {
+  const vault = useVault()
+  const preapproval = useAmuletPreapproval(account, {
+    api,
+    signMessage: vault.signMessage,
+    recordTransaction: vault.recordTransaction,
+  })
+  const status = preapproval.status
+  const isExpired = status?.expired === true
+  const isActive = status?.active === true && !isExpired
+  const confirmed = isActive || isExpired
+
+  // Optimistic: hold the requested state until polling confirms it; the ledger can lag.
+  const [optimistic, setOptimistic] = useState<boolean | undefined>(undefined)
+  const checked = optimistic ?? confirmed
+
+  useEffect(() => {
+    if (optimistic !== undefined && optimistic === confirmed) {
+      setOptimistic(undefined)
+    }
+  }, [optimistic, confirmed])
+
+  const handleToggle = async (): Promise<void> => {
+    const next = !checked
+    setOptimistic(next)
+    try {
+      if (next) {
+        await preapproval.enable()
+        toast.success('Amulet auto-accept enabled')
+      } else {
+        await preapproval.disable()
+        toast.success('Amulet auto-accept disabled')
+      }
+    } catch (error) {
+      setOptimistic(undefined)
+      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-surface px-3.5 py-3.5">
+      <div className="flex items-center gap-1.5">
+        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Auto-accept incoming</h2>
+        <Tooltip content={AUTO_ACCEPT_TOOLTIP} />
+      </div>
+      <Switch
+        aria-label="Auto-accept incoming"
+        checked={checked}
+        disabled={preapproval.busy || (preapproval.loading && status === undefined)}
+        onCheckedChange={() => {
+          void handleToggle()
+        }}
+      />
+    </div>
+  )
+}
diff --git a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
new file mode 100644
index 00000000..41589956
--- /dev/null
+++ b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
@@ -0,0 +1,175 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { AutoAcceptSetting } from '@/components/AutoAcceptSetting'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderSetting = (api: AmuletPreapprovalApi): void => {
+  render(
+    <TestQueryClientProvider>
+      <TooltipProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <AutoAcceptSetting
+            account={ACCOUNT}
+            api={api}
+          />
+        </VaultContext.Provider>
+      </TooltipProvider>
+    </TestQueryClientProvider>,
+  )
+}
+
+describe('AutoAcceptSetting', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('enables Amulet auto-accept for the selected party', async () => {
+    // Scenario: no active preapproval; enabling signs the prepared command for that party.
+    let createCalls = 0
+    const api: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async (receiver) => {
+        assert.equal(receiver, 'alice::party')
+        return { active: false, expired: false }
+      },
+      createAmuletPreapproval: async ({ account, recordTransaction }) => {
+        createCalls += 1
+        assert.equal(account.partyId, 'alice::party')
+        assert.ok(recordTransaction, 'preapproval execution should be recorded')
+        return { updateId: 'create-update-1' }
+      },
+      cancelAmuletPreapproval: async () => {
+        throw new Error('cancel should not run while enabling')
+      },
+    }
+
+    renderSetting(api)
+
+    await screen.findByText('Auto-accept incoming')
+    const toggle = await screen.findByRole('switch', { name: 'Auto-accept incoming' })
+    await waitFor(() => assert.equal(toggle.hasAttribute('disabled'), false))
+    await userEvent.click(toggle)
+
+    assert.equal(createCalls, 1)
+  })
+
+  it('flips on optimistically while the enable command settles', async () => {
+    // Scenario: the ledger lags; the switch reads on immediately instead of waiting.
+    let resolveCreate: (() => void) | undefined
+    const api: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
+      createAmuletPreapproval: async () => {
+        await new Promise<void>((resolve) => {
+          resolveCreate = resolve
+        })
+        return { updateId: 'create-update-1' }
+      },
+      cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
+    }
+
+    renderSetting(api)
+
+    const toggle = await screen.findByRole('switch', { name: 'Auto-accept incoming' })
+    await waitFor(() => assert.equal(toggle.hasAttribute('disabled'), false))
+    await userEvent.click(toggle)
+
+    await waitFor(() => assert.equal(toggle.getAttribute('aria-checked'), 'true'))
+    resolveCreate?.()
+  })
+
+  it('disables active Amulet auto-accept for the selected party', async () => {
+    // Scenario: an active preapproval reads as on; flipping it cancels the same preapproval.
+    let cancelCalls = 0
+    const api: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async () => ({
+        active: true,
+        expired: false,
+        expiresAt: '2026-06-11T12:00:00.000Z',
+        contractId: 'preapproval-cid-1',
+      }),
+      createAmuletPreapproval: async () => {
+        throw new Error('create should not run while disabling')
+      },
+      cancelAmuletPreapproval: async ({ account }) => {
+        cancelCalls += 1
+        assert.equal(account.partyId, 'alice::party')
+        return { updateId: 'cancel-update-1' }
+      },
+    }
+
+    renderSetting(api)
+
+    const toggle = await screen.findByRole('switch', {
+      name: 'Auto-accept incoming',
+      checked: true,
+    })
+    await userEvent.click(toggle)
+
+    assert.equal(cancelCalls, 1)
+  })
+
+  it('reads expired Amulet auto-accept as on so it can be cleared', async () => {
+    // Scenario: a preapproval contract can outlive its expiry; the toggle stays on to clear it.
+    const api: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async () => ({
+        active: false,
+        expired: true,
+        expiresAt: '2026-06-01T12:00:00.000Z',
+        contractId: 'expired-preapproval-cid',
+      }),
+      createAmuletPreapproval: async () => {
+        throw new Error('create should not run for expired status action')
+      },
+      cancelAmuletPreapproval: async () => ({ updateId: 'cancel-expired-1' }),
+    }
+
+    renderSetting(api)
+
+    const toggle = await screen.findByRole('switch', {
+      name: 'Auto-accept incoming',
+      checked: true,
+    })
+    assert.equal(toggle.getAttribute('aria-checked'), 'true')
+  })
+})

From 4eeaa2d4380d364b405b43834e2b3272fe7ad2be Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:05:06 -0300
Subject: [PATCH 023/121] fix(carpincho-wallet): use a span not a heading for
 the auto-accept label

---
 carpincho-wallet/src/components/AutoAcceptSetting.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/AutoAcceptSetting.tsx b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
index 3493c2d6..673a240d 100644
--- a/carpincho-wallet/src/components/AutoAcceptSetting.tsx
+++ b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
@@ -58,7 +58,7 @@ export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX
   return (
     <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-surface px-3.5 py-3.5">
       <div className="flex items-center gap-1.5">
-        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Auto-accept incoming</h2>
+        <span className="text-[0.95rem] font-semibold text-foreground">Auto-accept incoming</span>
         <Tooltip content={AUTO_ACCEPT_TOOLTIP} />
       </div>
       <Switch

From a8abdab3a3a5caece73159cb3c0f803025ee7755 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:07:57 -0300
Subject: [PATCH 024/121] feat(carpincho-wallet): add TransferDetailsSheet for
 transfer metadata

---
 .../src/components/TransferDetailsSheet.tsx   | 69 ++++++++++++++++
 .../components/TransferDetailsSheet.test.tsx  | 78 +++++++++++++++++++
 2 files changed, 147 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TransferDetailsSheet.tsx
 create mode 100644 carpincho-wallet/test/components/TransferDetailsSheet.test.tsx

diff --git a/carpincho-wallet/src/components/TransferDetailsSheet.tsx b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
new file mode 100644
index 00000000..ca65c467
--- /dev/null
+++ b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
@@ -0,0 +1,69 @@
+import type { PendingTokenTransfer } from '@/cip56/transfers'
+import { transferStatusLabel, transferTimeLabel } from '@/cip56/transfers'
+import { Sheet } from '@/components/ui/Sheet'
+
+interface TransferDetailRowProps {
+  label: string
+  value: string
+}
+
+// Keeps long Canton identifiers readable inside the details sheet.
+const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Element => (
+  <div className="grid gap-1">
+    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
+    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
+  </div>
+)
+
+interface TransferDetailsSheetProps {
+  transfer: PendingTokenTransfer | null
+  onClose: () => void
+}
+
+// Full transfer metadata in the app's standard Sheet, opened from a transfer's eye button.
+export const TransferDetailsSheet = ({
+  transfer,
+  onClose,
+}: TransferDetailsSheetProps): JSX.Element => {
+  const view = transfer?.interfaceViewValue?.transfer
+  return (
+    <Sheet
+      open={transfer !== null}
+      onOpenChange={(open) => {
+        if (!open) onClose()
+      }}
+      side="center"
+      title="Transfer details"
+      description="Full details for this transfer instruction."
+    >
+      {transfer === null ? null : (
+        <dl className="grid gap-3">
+          <TransferDetailRow
+            label="status"
+            value={transferStatusLabel(transfer)}
+          />
+          <TransferDetailRow
+            label="requested"
+            value={transferTimeLabel(view?.requestedAt)}
+          />
+          <TransferDetailRow
+            label="expires"
+            value={transferTimeLabel(view?.executeBefore)}
+          />
+          <TransferDetailRow
+            label="sender"
+            value={view?.sender ?? 'unknown'}
+          />
+          <TransferDetailRow
+            label="receiver"
+            value={view?.receiver ?? 'unknown'}
+          />
+          <TransferDetailRow
+            label="contract id"
+            value={transfer.contractId}
+          />
+        </dl>
+      )}
+    </Sheet>
+  )
+}
diff --git a/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
new file mode 100644
index 00000000..0b3ba2e8
--- /dev/null
+++ b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
@@ -0,0 +1,78 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { PendingTokenTransfer } from '@/cip56/transfers'
+import { TransferDetailsSheet } from '@/components/TransferDetailsSheet'
+
+const TRANSFER: PendingTokenTransfer = {
+  contractId: 'transfer-cid-1',
+  interfaceViewValue: {
+    transfer: {
+      sender: 'sender-party-1234567890abcdef',
+      receiver: 'alice::party',
+      amount: '666.0000000000',
+      instrumentId: { id: 'Amulet' },
+      requestedAt: '2026-06-09T20:41:05.841851Z',
+      executeBefore: '2026-06-10T20:41:05.803Z',
+    },
+    status: { tag: 'TransferPendingReceiverAcceptance' },
+  },
+}
+
+describe('TransferDetailsSheet', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('shows full transfer metadata when a transfer is selected', () => {
+    // Scenario: the eye button opens this sheet with parties, status, timestamps, and id.
+    render(
+      <TransferDetailsSheet
+        transfer={TRANSFER}
+        onClose={() => undefined}
+      />,
+    )
+
+    assert.equal(
+      screen.getByText('sender-party-1234567890abcdef').textContent,
+      'sender-party-1234567890abcdef',
+    )
+    assert.equal(screen.getByText('alice::party').textContent, 'alice::party')
+    assert.equal(
+      screen.getByText('TransferPendingReceiverAcceptance').textContent,
+      'TransferPendingReceiverAcceptance',
+    )
+    assert.equal(screen.getByText('2026-06-09 20:41 UTC').textContent, '2026-06-09 20:41 UTC')
+    assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1')
+  })
+
+  it('is closed when no transfer is selected', () => {
+    // Scenario: a null selection renders nothing visible.
+    render(
+      <TransferDetailsSheet
+        transfer={null}
+        onClose={() => undefined}
+      />,
+    )
+
+    assert.equal(screen.queryByText('transfer-cid-1'), null)
+  })
+
+  it('calls onClose when dismissed', async () => {
+    // Scenario: the sheet close button dismisses the details view.
+    let closes = 0
+    render(
+      <TransferDetailsSheet
+        transfer={TRANSFER}
+        onClose={() => {
+          closes += 1
+        }}
+      />,
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }))
+
+    assert.equal(closes, 1)
+  })
+})

From ad3315a185ea1ea9016934e7654b78e3d6f8f03a Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:12:29 -0300
Subject: [PATCH 025/121] refactor(carpincho-wallet): split TransferCard into
 needs-action and awaiting variants

---
 .../src/components/TransferCard.tsx           | 103 ++++++++++++++++++
 .../test/components/TransferCard.test.tsx     | 101 +++++++++++++++++
 2 files changed, 204 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TransferCard.tsx
 create mode 100644 carpincho-wallet/test/components/TransferCard.test.tsx

diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
new file mode 100644
index 00000000..8cddc1e1
--- /dev/null
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -0,0 +1,103 @@
+import { formatTokenAmount } from '@/cip56/amount'
+import type { PendingTokenTransfer } from '@/cip56/transfers'
+import { tokenDisplayLabel, transferDescription } from '@/cip56/transfers'
+import { PrimaryButton } from '@/components/ui/Button'
+import { EYE_ICON } from '@/components/ui/icons'
+import { shortMiddle } from '@/utils/account'
+
+interface TransferCardProps {
+  transfer: PendingTokenTransfer
+  direction: 'incoming' | 'outgoing'
+  // Acceptance only applies to incoming transfers; senders just watch theirs settle.
+  isAccepting?: boolean
+  onAccept?: (transferInstructionCid: string) => void | Promise<void>
+  onOpenDetails: (transfer: PendingTokenTransfer) => void
+}
+
+const EYE_BUTTON_CLASS =
+  'grid size-8 shrink-0 place-items-center rounded-md border border-border-strong bg-transparent text-soft outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-4'
+
+// One active transfer instruction. Incoming = accent needs-action card with Accept;
+// outgoing = quiet watch-only row with a Pending pill. Both open details in a Sheet.
+export const TransferCard = ({
+  transfer,
+  direction,
+  isAccepting = false,
+  onAccept,
+  onOpenDetails,
+}: TransferCardProps): JSX.Element => {
+  const view = transfer.interfaceViewValue?.transfer
+  const label = `${
+    view?.amount === undefined ? 'unknown' : formatTokenAmount(view.amount)
+  } ${tokenDisplayLabel(view?.instrumentId)}`
+  const description = transferDescription(transfer)
+  const counterpartyLabel = direction === 'incoming' ? 'from' : 'to'
+  const counterparty = direction === 'incoming' ? view?.sender : view?.receiver
+  const counterpartyText = counterparty === undefined ? 'unknown' : shortMiddle(counterparty, 10, 6)
+
+  const detailsButton = (
+    <button
+      type="button"
+      aria-label="Transfer details"
+      className={EYE_BUTTON_CLASS}
+      onClick={() => onOpenDetails(transfer)}
+    >
+      {EYE_ICON}
+    </button>
+  )
+
+  if (direction === 'outgoing') {
+    return (
+      <article
+        aria-label="Outgoing transfer, awaiting acceptance"
+        className="flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-3"
+      >
+        <div className="min-w-0 flex-1">
+          <p className="m-0 text-[0.95rem] font-semibold text-foreground">{label}</p>
+          <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
+            {counterpartyLabel}: {counterpartyText}
+          </p>
+        </div>
+        <span className="shrink-0 rounded-full border border-warning/40 bg-warning-soft px-2.5 py-1 text-[0.72rem] font-semibold text-warning">
+          Pending
+        </span>
+        {detailsButton}
+      </article>
+    )
+  }
+
+  return (
+    <article
+      aria-label="Incoming transfer"
+      className="relative overflow-hidden rounded-md border border-accent/45 bg-gradient-to-b from-accent/15 to-accent/[0.06] py-3 pr-3 pl-4"
+    >
+      <span
+        aria-hidden="true"
+        className="absolute inset-y-0 left-0 w-[3px] bg-gradient-to-b from-accent to-primary"
+      />
+      <div className="flex items-start gap-3">
+        <div className="min-w-0 flex-1">
+          <p className="m-0 text-[0.95rem] font-semibold text-foreground">{label}</p>
+          {description === undefined ? null : (
+            <p className="m-0 mt-1 text-[0.83rem] leading-5 text-foreground">{description}</p>
+          )}
+          <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
+            {counterpartyLabel}: {counterpartyText}
+          </p>
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-2">
+          <PrimaryButton
+            className="px-3 py-1.5 text-[0.82rem]"
+            disabled={isAccepting}
+            onClick={() => {
+              void onAccept?.(transfer.contractId)
+            }}
+          >
+            {isAccepting ? 'Accepting...' : 'Accept'}
+          </PrimaryButton>
+          {detailsButton}
+        </div>
+      </div>
+    </article>
+  )
+}
diff --git a/carpincho-wallet/test/components/TransferCard.test.tsx b/carpincho-wallet/test/components/TransferCard.test.tsx
new file mode 100644
index 00000000..6647baa7
--- /dev/null
+++ b/carpincho-wallet/test/components/TransferCard.test.tsx
@@ -0,0 +1,101 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { PendingTokenTransfer } from '@/cip56/transfers'
+import { TransferCard } from '@/components/TransferCard'
+
+const INCOMING: PendingTokenTransfer = {
+  contractId: 'incoming-cid-1',
+  interfaceViewValue: {
+    transfer: {
+      sender: 'sender-party-1234567890abcdef',
+      receiver: 'alice::party',
+      amount: '42',
+      instrumentId: { id: 'Amulet' },
+      meta: { values: { 'splice.lfdecentralizedtrust.org/reason': 'invoice 42' } },
+    },
+  },
+}
+
+const OUTGOING: PendingTokenTransfer = {
+  contractId: 'outgoing-cid-1',
+  interfaceViewValue: {
+    transfer: {
+      sender: 'alice::party',
+      receiver: 'bob-party-1234567890abcdef',
+      amount: '10',
+      instrumentId: { id: 'Amulet' },
+    },
+  },
+}
+
+describe('TransferCard', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  it('renders an incoming transfer with Accept, description, and a details button', async () => {
+    // Scenario: an incoming transfer is the actionable case — amount, memo, Accept, and the
+    // eye that opens details. Accept and the eye fire their callbacks with the transfer.
+    let accepted = ''
+    let opened: PendingTokenTransfer | undefined
+    render(
+      <TransferCard
+        transfer={INCOMING}
+        direction="incoming"
+        onAccept={(cid) => {
+          accepted = cid
+        }}
+        onOpenDetails={(transfer) => {
+          opened = transfer
+        }}
+      />,
+    )
+
+    assert.equal(screen.getByText('42.00 Amulet').textContent, '42.00 Amulet')
+    assert.equal(screen.getByText('invoice 42').textContent, 'invoice 42')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
+    assert.equal(accepted, 'incoming-cid-1')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Transfer details' }))
+    assert.equal(opened?.contractId, 'incoming-cid-1')
+  })
+
+  it('renders an outgoing transfer as watch-only with a Pending pill and no Accept', async () => {
+    // Scenario: the sender can only watch their outgoing transfer settle.
+    let opened: PendingTokenTransfer | undefined
+    render(
+      <TransferCard
+        transfer={OUTGOING}
+        direction="outgoing"
+        onOpenDetails={(transfer) => {
+          opened = transfer
+        }}
+      />,
+    )
+
+    assert.equal(screen.getByText('10.00 Amulet').textContent, '10.00 Amulet')
+    assert.equal(screen.getByText('Pending').textContent, 'Pending')
+    assert.equal(screen.queryByRole('button', { name: 'Accept' }), null)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Transfer details' }))
+    assert.equal(opened?.contractId, 'outgoing-cid-1')
+  })
+
+  it('shows a busy label while accepting', () => {
+    // Scenario: the Accept button reflects the in-flight state for its own transfer.
+    render(
+      <TransferCard
+        transfer={INCOMING}
+        direction="incoming"
+        isAccepting
+        onAccept={() => undefined}
+        onOpenDetails={() => undefined}
+      />,
+    )
+
+    assert.ok(screen.getByRole('button', { name: 'Accepting...' }))
+  })
+})

From 533eeef70e23080ed71e4e8f4f2930f4efef44bf Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:15:15 -0300
Subject: [PATCH 026/121] test(carpincho-wallet): assert Accept button is
 disabled while accepting

---
 carpincho-wallet/test/components/TransferCard.test.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/test/components/TransferCard.test.tsx b/carpincho-wallet/test/components/TransferCard.test.tsx
index 6647baa7..a9ce69ef 100644
--- a/carpincho-wallet/test/components/TransferCard.test.tsx
+++ b/carpincho-wallet/test/components/TransferCard.test.tsx
@@ -96,6 +96,11 @@ describe('TransferCard', () => {
       />,
     )
 
-    assert.ok(screen.getByRole('button', { name: 'Accepting...' }))
+    const acceptingButton = screen.getByRole('button', { name: 'Accepting...' })
+    assert.ok(acceptingButton)
+    assert.ok(
+      acceptingButton.hasAttribute('disabled'),
+      'Accept button must be disabled while accepting',
+    )
   })
 })

From cb3e2f688ebbdf7d695ee92c16b1762f1008a1a9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:24:31 -0300
Subject: [PATCH 027/121] feat(carpincho-wallet): add ActivityPanel folding
 pending transfers into activity

---
 .../src/components/ActivityPanel.tsx          | 130 ++++++++++
 .../test/components/ActivityPanel.test.tsx    | 244 ++++++++++++++++++
 2 files changed, 374 insertions(+)
 create mode 100644 carpincho-wallet/src/components/ActivityPanel.tsx
 create mode 100644 carpincho-wallet/test/components/ActivityPanel.test.tsx

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
new file mode 100644
index 00000000..76eb5b5f
--- /dev/null
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -0,0 +1,130 @@
+import { useEffect, useMemo, useState } from 'react'
+import type { PendingTokenTransfer } from '@/cip56/transfers'
+import { transferDirection } from '@/cip56/transfers'
+import { ActivityList } from '@/components/ActivityList'
+import { TransferCard } from '@/components/TransferCard'
+import { TransferDetailsSheet } from '@/components/TransferDetailsSheet'
+import { LoadingState } from '@/components/ui/LoadingState'
+import { toast } from '@/components/ui/toast'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
+import type { AccountPublic, TransactionRecord } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export interface ActivityPanelProps {
+  account?: AccountPublic
+  transactions: TransactionRecord[]
+  api?: Cip56TransferApi
+  onPendingCountChange?: (count: number) => void
+}
+
+// Activity tab body: actionable + in-flight transfers pinned above the settled history feed.
+export const ActivityPanel = ({
+  account,
+  transactions,
+  api,
+  onPendingCountChange,
+}: ActivityPanelProps): JSX.Element => {
+  const vault = useVault()
+  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
+  const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
+  const [detailsTransfer, setDetailsTransfer] = useState<PendingTokenTransfer | null>(null)
+  const { transfers, loading, error, accept } = usePendingCip56Transfers(activeAccount, {
+    api,
+    signMessage: vault.signMessage,
+    recordTransaction: vault.recordTransaction,
+  })
+
+  const { incoming, outgoing } = useMemo(() => {
+    const partyId = activeAccount?.partyId
+    const incomingTransfers: PendingTokenTransfer[] = []
+    const outgoingTransfers: PendingTokenTransfer[] = []
+    for (const transfer of transfers) {
+      if (transferDirection(transfer, partyId) === 'outgoing') {
+        outgoingTransfers.push(transfer)
+      } else {
+        incomingTransfers.push(transfer)
+      }
+    }
+    return { incoming: incomingTransfers, outgoing: outgoingTransfers }
+  }, [transfers, activeAccount?.partyId])
+
+  // Only incoming transfers need receiver action, so the badge counts those alone.
+  useEffect(() => {
+    onPendingCountChange?.(incoming.length)
+  }, [onPendingCountChange, incoming.length])
+
+  useEffect(() => {
+    return () => onPendingCountChange?.(0)
+  }, [onPendingCountChange])
+
+  // Runs the receiver-acceptance flow while keeping the button state scoped to one transfer.
+  const onAccept = async (transferInstructionCid: string): Promise<void> => {
+    setAcceptingCid(transferInstructionCid)
+    try {
+      await accept(transferInstructionCid)
+      toast.success('Transfer accepted.')
+    } catch (err) {
+      toast.error(`Accept failed: ${(err as Error).message}`)
+    } finally {
+      setAcceptingCid(undefined)
+    }
+  }
+
+  const hasPending = incoming.length > 0 || outgoing.length > 0
+
+  return (
+    <div className="flex min-h-full flex-col gap-3 px-1 pt-3 pb-2">
+      {error === undefined ? null : (
+        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+          {error}
+        </div>
+      )}
+
+      {incoming.length > 0 ? (
+        <section className="flex flex-col gap-2">
+          <h2 className="m-0 flex items-center gap-2 px-0.5 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-foreground">
+            Needs action <span className="text-accent">· {incoming.length}</span>
+          </h2>
+          {incoming.map((transfer) => (
+            <TransferCard
+              key={transfer.contractId}
+              transfer={transfer}
+              direction="incoming"
+              isAccepting={acceptingCid === transfer.contractId}
+              onAccept={onAccept}
+              onOpenDetails={setDetailsTransfer}
+            />
+          ))}
+        </section>
+      ) : null}
+
+      {outgoing.length > 0 ? (
+        <section className="flex flex-col gap-2">
+          <h2 className="m-0 flex items-center gap-1.5 px-0.5 text-[0.62rem] font-bold uppercase tracking-[0.1em] text-muted-foreground/70">
+            Awaiting acceptance <span>· {outgoing.length}</span>
+          </h2>
+          {outgoing.map((transfer) => (
+            <TransferCard
+              key={transfer.contractId}
+              transfer={transfer}
+              direction="outgoing"
+              onOpenDetails={setDetailsTransfer}
+            />
+          ))}
+        </section>
+      ) : null}
+
+      {loading && !hasPending && transactions.length === 0 ? (
+        <LoadingState label="Loading transfers" />
+      ) : (
+        <ActivityList transactions={transactions} />
+      )}
+
+      <TransferDetailsSheet
+        transfer={detailsTransfer}
+        onClose={() => setDetailsTransfer(null)}
+      />
+    </div>
+  )
+}
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
new file mode 100644
index 00000000..98f8df04
--- /dev/null
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -0,0 +1,244 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ActivityPanel } from '@/components/ActivityPanel'
+import { toast } from '@/components/ui/toast'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
+import type { AccountPublic, TransactionRecord } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const txRecord = (id: string, summary: string): TransactionRecord => ({
+  id,
+  accountId: ACCOUNT.id,
+  accountName: ACCOUNT.name,
+  partyId: ACCOUNT.partyId,
+  network: ACCOUNT.network,
+  method: 'canton_prepareExecuteAndWait',
+  status: 'executed',
+  createdAt: Date.parse('2026-06-10T12:00:00.000Z'),
+  preparedTransactionHash: `${id}-hash`,
+  summary,
+})
+
+const renderPanel = (
+  api: Cip56TransferApi,
+  transactions: TransactionRecord[] = [],
+  onPendingCountChange?: (count: number) => void,
+): void => {
+  render(
+    <TestQueryClientProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <ActivityPanel
+          account={ACCOUNT}
+          transactions={transactions}
+          api={api}
+          onPendingCountChange={onPendingCountChange}
+        />
+      </VaultContext.Provider>
+    </TestQueryClientProvider>,
+  )
+}
+
+describe('ActivityPanel', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('shows a Needs action incoming transfer and accepts it', async () => {
+    // Scenario: an incoming transfer is pinned under "Needs action"; accepting clears it.
+    const calls: string[] = []
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => {
+        calls.push('list')
+        return calls.includes('accept')
+          ? []
+          : [
+              {
+                contractId: 'transfer-cid-1',
+                interfaceViewValue: {
+                  transfer: {
+                    sender: 'sender-party-1234567890abcdef',
+                    receiver: 'alice::party',
+                    amount: '42',
+                    instrumentId: { id: 'Amulet' },
+                  },
+                },
+              },
+            ]
+      },
+      acceptTransfer: async ({ transferInstructionCid }) => {
+        calls.push('accept')
+        assert.equal(transferInstructionCid, 'transfer-cid-1')
+        return { updateId: 'update-1' }
+      },
+    }
+
+    renderPanel(api)
+
+    await screen.findByText('Needs action')
+    await screen.findByText('42.00 Amulet')
+    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
+    await waitFor(() => assert.ok(screen.getByText('No activity yet')))
+
+    assert.deepEqual(calls, ['list', 'accept', 'list'])
+  })
+
+  it("shows the active party's outgoing transfer as read-only under Awaiting acceptance", async () => {
+    // Scenario: the sender's own outgoing transfer is watch-only — no Accept button.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'outgoing-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'alice::party',
+              receiver: 'bob-party-1234567890abcdef',
+              amount: '10',
+              instrumentId: { id: 'Amulet' },
+            },
+            status: { tag: 'TransferPendingReceiverAcceptance' },
+          },
+        },
+      ],
+      acceptTransfer: async () => {
+        throw new Error('the sender must not accept their own transfer')
+      },
+    }
+
+    renderPanel(api)
+
+    await screen.findByText('Awaiting acceptance')
+    await screen.findByText('10.00 Amulet')
+    assert.equal(screen.queryByRole('button', { name: 'Accept' }), null)
+  })
+
+  it('counts only incoming transfers toward the pending count', async () => {
+    // Scenario: a mixed list shows one Accept and reports a pending count of one.
+    const counts: number[] = []
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'incoming-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party-1234567890abcdef',
+              receiver: 'alice::party',
+              amount: '3',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+        {
+          contractId: 'outgoing-cid-2',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'alice::party',
+              receiver: 'bob-party-1234567890abcdef',
+              amount: '4',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderPanel(api, [], (count) => counts.push(count))
+
+    await screen.findByText('Awaiting acceptance')
+    assert.equal(screen.getAllByRole('button', { name: 'Accept' }).length, 1)
+    assert.equal(counts.at(-1), 1)
+  })
+
+  it('shows a spinner while transfers load and there is no history yet', async () => {
+    // Scenario: first fetch in flight, no history — show a loading indicator, not the empty state.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: () => new Promise(() => {}),
+    }
+
+    renderPanel(api)
+
+    await screen.findByRole('status', { name: /loading/i })
+    assert.equal(screen.queryByText('No activity yet'), null)
+  })
+
+  it('opens transfer details in a sheet from the eye button', async () => {
+    // Scenario: the eye button reveals full parties/status behind the standard sheet.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'transfer-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party-1234567890abcdef',
+              receiver: 'alice::party',
+              amount: '5',
+              instrumentId: { id: 'Amulet' },
+            },
+            status: { tag: 'TransferPendingReceiverAcceptance' },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderPanel(api)
+
+    await screen.findByText('5.00 Amulet')
+    assert.equal(screen.queryByText('sender-party-1234567890abcdef'), null)
+    await userEvent.click(screen.getByRole('button', { name: 'Transfer details' }))
+    assert.equal(
+      screen.getByText('sender-party-1234567890abcdef').textContent,
+      'sender-party-1234567890abcdef',
+    )
+  })
+
+  it('renders settled history below the pending zone', async () => {
+    // Scenario: confirmed transactions still render via ActivityList beneath any pending items.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [],
+    }
+
+    renderPanel(api, [txRecord('tx-1', 'Send 25 AMT')])
+
+    await screen.findByText('Send 25 AMT')
+    await screen.findByText('Confirmed')
+  })
+})

From 34dbf2234595cba0d2f77f6cb58bff204279fb32 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:29:08 -0300
Subject: [PATCH 028/121] fix(carpincho-wallet): make ActivityPanel
 pending-count effects identity-stable

---
 .../src/components/ActivityPanel.tsx          | 18 ++++++++----
 .../test/components/ActivityPanel.test.tsx    | 28 +++++++++++++++++++
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index 76eb5b5f..011c3128 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { transferDirection } from '@/cip56/transfers'
 import { ActivityList } from '@/components/ActivityList'
@@ -49,14 +49,22 @@ export const ActivityPanel = ({
     return { incoming: incomingTransfers, outgoing: outgoingTransfers }
   }, [transfers, activeAccount?.partyId])
 
+  // Hold the latest callback in a ref so the count effects don't depend on its identity;
+  // a parent that re-creates the callback must not trigger a spurious reset mid-session.
+  const onPendingCountChangeRef = useRef(onPendingCountChange)
+  useEffect(() => {
+    onPendingCountChangeRef.current = onPendingCountChange
+  })
+
   // Only incoming transfers need receiver action, so the badge counts those alone.
   useEffect(() => {
-    onPendingCountChange?.(incoming.length)
-  }, [onPendingCountChange, incoming.length])
+    onPendingCountChangeRef.current?.(incoming.length)
+  }, [incoming.length])
 
+  // Reset the parent's count when this panel unmounts (e.g. account teardown).
   useEffect(() => {
-    return () => onPendingCountChange?.(0)
-  }, [onPendingCountChange])
+    return () => onPendingCountChangeRef.current?.(0)
+  }, [])
 
   // Runs the receiver-acceptance flow while keeping the button state scoped to one transfer.
   const onAccept = async (transferInstructionCid: string): Promise<void> => {
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index 98f8df04..5c35d73f 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -241,4 +241,32 @@ describe('ActivityPanel', () => {
     await screen.findByText('Send 25 AMT')
     await screen.findByText('Confirmed')
   })
+
+  it('resets the pending count to zero when unmounted', async () => {
+    // Scenario: when the panel tears down (e.g. account switch), the parent badge must clear.
+    const counts: number[] = []
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'incoming-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party-1234567890abcdef',
+              receiver: 'alice::party',
+              amount: '3',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderPanel(api, [], (count) => counts.push(count))
+
+    await screen.findByText('Needs action')
+    await waitFor(() => assert.equal(counts.at(-1), 1))
+    cleanup()
+    assert.equal(counts.at(-1), 0)
+  })
 })

From f06440cf962b2674f131b4626f899a30c2c18912 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:32:44 -0300
Subject: [PATCH 029/121] feat(carpincho-wallet): surface auto-accept on the
 assets tab

---
 .../src/components/AssetsPanel.tsx            | 19 ++++++-
 .../test/components/AssetsPanel.test.tsx      | 50 ++++++++++++++++---
 2 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index e812cf65..f42a6dd5 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,12 +1,14 @@
 import { useState } from 'react'
 import { type AmuletTapApi, tapAmulet } from '@/cip56/amuletPreapproval'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
+import { AutoAcceptSetting } from '@/components/AutoAcceptSetting'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
 import { TokenRow } from '@/components/TokenRow'
 import { PrimaryButton } from '@/components/ui/Button'
 import { LoadingState } from '@/components/ui/LoadingState'
 import { toast } from '@/components/ui/toast'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -17,12 +19,19 @@ export interface AssetsPanelProps {
   api?: Cip56HoldingsApi
   sendApi?: Cip56SendApi
   tapApi?: AmuletTapApi
+  preapprovalApi?: AmuletPreapprovalApi
 }
 
 const defaultTapApi: AmuletTapApi = { tapAmulet }
 
 // Renders active CIP-56 token holdings as activity-style rows that open a detail modal.
-export const AssetsPanel = ({ account, api, sendApi, tapApi }: AssetsPanelProps): JSX.Element => {
+export const AssetsPanel = ({
+  account,
+  api,
+  sendApi,
+  tapApi,
+  preapprovalApi,
+}: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [selected, setSelected] = useState<TokenHoldingSummary | null>(null)
@@ -58,6 +67,11 @@ export const AssetsPanel = ({ account, api, sendApi, tapApi }: AssetsPanelProps)
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <AutoAcceptSetting
+        account={activeAccount}
+        api={preapprovalApi}
+      />
+
       <div className="flex justify-end">
         <PrimaryButton
           className="px-3 py-1.5 text-[0.82rem]"
@@ -78,6 +92,9 @@ export const AssetsPanel = ({ account, api, sendApi, tapApi }: AssetsPanelProps)
 
       {summaries.length > 0 ? (
         <div className="flex flex-col">
+          <div className="px-1 pb-1 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+            Holdings
+          </div>
           {summaries.map((summary) => (
             <TokenRow
               key={summary.key}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 50cd9a7e..1cac0bd4 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -4,8 +4,11 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
 import { AssetsPanel } from '@/components/AssetsPanel'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 import { toast } from '@/components/ui/toast'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { inactivePreapprovalApi } from '@/test-utils/preapproval'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -46,16 +49,23 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-// Mounts the panel under vault context so it can resolve the active account.
-const renderAssets = (api: Cip56HoldingsApi, tapApi?: AmuletTapApi): void => {
+// Mounts the panel under vault + tooltip context so it can resolve the account and toggle.
+const renderAssets = (
+  api: Cip56HoldingsApi,
+  tapApi?: AmuletTapApi,
+  preapprovalApi: AmuletPreapprovalApi = inactivePreapprovalApi,
+): void => {
   render(
     <TestQueryClientProvider>
-      <VaultContext.Provider value={baseVault()}>
-        <AssetsPanel
-          api={api}
-          tapApi={tapApi}
-        />
-      </VaultContext.Provider>
+      <TooltipProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <AssetsPanel
+            api={api}
+            tapApi={tapApi}
+            preapprovalApi={preapprovalApi}
+          />
+        </VaultContext.Provider>
+      </TooltipProvider>
     </TestQueryClientProvider>,
   )
 }
@@ -260,4 +270,28 @@ describe('AssetsPanel', () => {
 
     await screen.findByText('No token holdings')
   })
+
+  it('shows the auto-accept setting above the holdings list', async () => {
+    // Scenario: the auto-accept toggle now lives on the Assets tab as a setting row,
+    // with the holdings grouped beneath a label.
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [
+        {
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '15.75',
+          utxoCount: 2,
+          lockedCount: 0,
+          unlockedCount: 2,
+          source: 'utxos',
+        },
+      ],
+    }
+
+    renderAssets(api)
+
+    assert.ok(await screen.findByRole('switch', { name: 'Auto-accept incoming' }))
+    assert.equal(screen.getByText('Holdings').textContent, 'Holdings')
+  })
 })

From cad68835d3f5a5902af5c7f6f14d9f7f9bf66b92 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:42:28 -0300
Subject: [PATCH 030/121] refactor(carpincho-wallet): drop the transfers tab
 and badge activity

---
 carpincho-wallet/src/components/HomeTabs.tsx  |  26 +-
 .../src/components/TransfersPanel.tsx         | 333 --------------
 .../test/components/HomeTabs.test.tsx         |  16 +-
 .../test/components/TransfersPanel.test.tsx   | 435 ------------------
 4 files changed, 17 insertions(+), 793 deletions(-)
 delete mode 100644 carpincho-wallet/src/components/TransfersPanel.tsx
 delete mode 100644 carpincho-wallet/test/components/TransfersPanel.test.tsx

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index e841e978..e65c2e39 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,9 +1,8 @@
 import { useCallback, useMemo, useState } from 'react'
-import { ActivityList } from '@/components/ActivityList'
+import { ActivityPanel } from '@/components/ActivityPanel'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import { LedgerToolsPanel } from '@/components/LedgerToolsPanel'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
-import { TransfersPanel } from '@/components/TransfersPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
@@ -22,7 +21,8 @@ interface HomeTabsProps {
 // The only scrolling region between the account selector and the footer.
 const TAB_CONTENT_CLASS = 'min-h-0 flex-1 overflow-y-auto outline-none'
 
-// Tabbed home body; assets, transfers, activity, and sending each own a tab.
+// Tabbed home body; assets, activity, and dev tools each own a tab. Pending transfers
+// fold into Activity, which badges incoming receiver-acceptance work.
 export const HomeTabs = ({
   account,
   transactions,
@@ -61,15 +61,14 @@ export const HomeTabs = ({
     >
       <TabsList>
         <TabTrigger value="assets">Assets</TabTrigger>
-        <TabTrigger value="transfers">
-          <span>Transfers</span>
+        <TabTrigger value="activity">
+          <span>Activity</span>
           {pendingTransferCount > 0 ? (
-            <span className="ml-1 inline-grid min-w-5 place-items-center rounded-full bg-danger px-1.5 text-[0.72rem] leading-5 text-primary-foreground">
+            <span className="ml-1 inline-grid min-w-5 place-items-center rounded-full bg-accent px-1.5 text-[0.72rem] leading-5 text-primary-foreground">
               {pendingTransferCount}
             </span>
           ) : null}
         </TabTrigger>
-        <TabTrigger value="activity">Activity</TabTrigger>
         <TabTrigger value="utils">Utils</TabTrigger>
       </TabsList>
       <TabContent
@@ -80,26 +79,21 @@ export const HomeTabs = ({
           account={account}
           api={tokensApi}
           sendApi={sendApi}
+          preapprovalApi={preapprovalApi}
         />
       </TabContent>
       <TabContent
         forceMount
-        value="transfers"
+        value="activity"
         className={TAB_CONTENT_CLASS}
       >
-        <TransfersPanel
+        <ActivityPanel
           account={account}
+          transactions={activeTransactions}
           api={transfersApi}
-          preapprovalApi={preapprovalApi}
           onPendingCountChange={onPendingTransferCountChange}
         />
       </TabContent>
-      <TabContent
-        value="activity"
-        className={TAB_CONTENT_CLASS}
-      >
-        <ActivityList transactions={activeTransactions} />
-      </TabContent>
       <TabContent
         value="utils"
         className={TAB_CONTENT_CLASS}
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
deleted file mode 100644
index 5226580c..00000000
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import { useEffect, useMemo, useState } from 'react'
-import { formatTokenAmount } from '@/cip56/amount'
-import type { PendingTokenTransfer } from '@/cip56/transfers'
-import {
-  tokenDisplayLabel,
-  transferDescription,
-  transferDirection,
-  transferStatusLabel,
-  transferTimeLabel,
-} from '@/cip56/transfers'
-import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
-import { LoadingState } from '@/components/ui/LoadingState'
-import { Switch } from '@/components/ui/Switch'
-import { Tooltip } from '@/components/ui/Tooltip'
-import { toast } from '@/components/ui/toast'
-import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
-import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
-import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
-import { shortMiddle } from '@/utils/account'
-import type { AccountPublic } from '@/vault/types'
-import { useVault } from '@/vault/useVault'
-
-export interface TransfersPanelProps {
-  account?: AccountPublic
-  api?: Cip56TransferApi
-  preapprovalApi?: AmuletPreapprovalApi
-  onPendingCountChange?: (count: number) => void
-}
-
-interface TransferDetailRowProps {
-  label: string
-  value: string
-}
-
-interface AmuletPreapprovalSectionProps {
-  account: AccountPublic
-  api?: AmuletPreapprovalApi
-}
-
-const AUTO_ACCEPT_TOOLTIP =
-  "When this is on, any Amulet someone sends you drops straight into your wallet. Turn it off and you'll have to accept each incoming transfer yourself."
-
-// Lets the receiver opt into Amulet auto-accept without routing signing through wallet-service.
-const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProps): JSX.Element => {
-  const vault = useVault()
-  const preapproval = useAmuletPreapproval(account, {
-    api,
-    signMessage: vault.signMessage,
-    recordTransaction: vault.recordTransaction,
-  })
-  const status = preapproval.status
-  const isExpired = status?.expired === true
-  const isActive = status?.active === true && !isExpired
-  const confirmed = isActive || isExpired
-
-  // Optimistic: hold the requested state until polling confirms it; the ledger can lag.
-  const [optimistic, setOptimistic] = useState<boolean | undefined>(undefined)
-  const checked = optimistic ?? confirmed
-
-  useEffect(() => {
-    if (optimistic !== undefined && optimistic === confirmed) {
-      setOptimistic(undefined)
-    }
-  }, [optimistic, confirmed])
-
-  const handleToggle = async (): Promise<void> => {
-    const next = !checked
-    setOptimistic(next)
-    try {
-      if (next) {
-        await preapproval.enable()
-        toast.success('Amulet auto-accept enabled')
-      } else {
-        await preapproval.disable()
-        toast.success('Amulet auto-accept disabled')
-      }
-    } catch (error) {
-      setOptimistic(undefined)
-      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
-    }
-  }
-
-  return (
-    <div className="flex items-center justify-between gap-3 border-b border-border px-1 pb-3">
-      <div className="flex items-center gap-1.5">
-        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Auto-accept</h2>
-        <Tooltip content={AUTO_ACCEPT_TOOLTIP} />
-      </div>
-      <Switch
-        aria-label="Auto-accept"
-        checked={checked}
-        disabled={preapproval.busy || (preapproval.loading && status === undefined)}
-        onCheckedChange={() => {
-          void handleToggle()
-        }}
-      />
-    </div>
-  )
-}
-
-// Keeps long Canton identifiers readable without hiding the full value in the details area.
-const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Element => (
-  <div className="grid gap-1">
-    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
-  </div>
-)
-
-interface TransferCardProps {
-  transfer: PendingTokenTransfer
-  direction: 'incoming' | 'outgoing'
-  isExpanded: boolean
-  onToggleDetails: (transferInstructionCid: string) => void
-  // Acceptance only applies to incoming transfers; senders just watch theirs settle.
-  isAccepting?: boolean
-  onAccept?: (transferInstructionCid: string) => void | Promise<void>
-}
-
-// One active transfer instruction; receivers can accept, senders only watch it settle.
-const TransferCard = ({
-  transfer,
-  direction,
-  isExpanded,
-  onToggleDetails,
-  isAccepting = false,
-  onAccept,
-}: TransferCardProps): JSX.Element => {
-  const transferView = transfer.interfaceViewValue?.transfer
-  const label = `${
-    transferView?.amount === undefined ? 'unknown' : formatTokenAmount(transferView.amount)
-  } ${tokenDisplayLabel(transferView?.instrumentId)}`
-  const description = transferDescription(transfer)
-  const detailsId = `transfer-details-${transfer.contractId}`
-  const counterpartyLabel = direction === 'incoming' ? 'from' : 'to'
-  const counterparty = direction === 'incoming' ? transferView?.sender : transferView?.receiver
-  return (
-    <article
-      aria-label={
-        direction === 'incoming' ? 'Incoming transfer' : 'Outgoing transfer, awaiting acceptance'
-      }
-      className="rounded-md border border-border bg-surface px-3 py-3"
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <p className="m-0 text-[0.95rem] font-semibold text-foreground">{label}</p>
-          {description === undefined ? null : (
-            <p className="m-0 mt-1 text-[0.83rem] leading-5 text-foreground">{description}</p>
-          )}
-          <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
-            {counterpartyLabel}:{' '}
-            {counterparty === undefined ? 'unknown' : shortMiddle(counterparty, 10, 6)}
-          </p>
-        </div>
-        <div className="flex shrink-0 flex-col items-end gap-2">
-          {direction === 'incoming' ? (
-            <PrimaryButton
-              className="px-3 py-1.5 text-[0.82rem]"
-              disabled={isAccepting}
-              onClick={() => {
-                void onAccept?.(transfer.contractId)
-              }}
-            >
-              {isAccepting ? 'Accepting...' : 'Accept'}
-            </PrimaryButton>
-          ) : (
-            <span className="rounded-full bg-muted px-2.5 py-1 text-[0.74rem] font-medium text-muted-foreground">
-              Awaiting acceptance
-            </span>
-          )}
-          <SecondaryButton
-            aria-controls={detailsId}
-            aria-expanded={isExpanded}
-            className="px-3 py-1.5 text-[0.78rem]"
-            onClick={() => onToggleDetails(transfer.contractId)}
-          >
-            {isExpanded ? 'Hide details' : 'Show details'}
-          </SecondaryButton>
-        </div>
-      </div>
-      {isExpanded ? (
-        <dl
-          id={detailsId}
-          className="mt-3 grid gap-3 rounded-md border border-border bg-background/60 p-3"
-        >
-          <TransferDetailRow
-            label="status"
-            value={transferStatusLabel(transfer)}
-          />
-          <TransferDetailRow
-            label="requested"
-            value={transferTimeLabel(transferView?.requestedAt)}
-          />
-          <TransferDetailRow
-            label="expires"
-            value={transferTimeLabel(transferView?.executeBefore)}
-          />
-          <TransferDetailRow
-            label="sender"
-            value={transferView?.sender ?? 'unknown'}
-          />
-          <TransferDetailRow
-            label="receiver"
-            value={transferView?.receiver ?? 'unknown'}
-          />
-          <TransferDetailRow
-            label="contract id"
-            value={transfer.contractId}
-          />
-        </dl>
-      ) : null}
-    </article>
-  )
-}
-
-// Renders active CIP-56 transfers split by direction; receivers can accept, senders watch.
-export const TransfersPanel = ({
-  account,
-  api,
-  preapprovalApi,
-  onPendingCountChange,
-}: TransfersPanelProps): JSX.Element => {
-  const vault = useVault()
-  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
-  const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
-  const [expandedCid, setExpandedCid] = useState<string | undefined>(undefined)
-  const { transfers, loading, error, accept } = usePendingCip56Transfers(activeAccount, {
-    api,
-    signMessage: vault.signMessage,
-    recordTransaction: vault.recordTransaction,
-  })
-
-  const { incoming, outgoing } = useMemo(() => {
-    const partyId = activeAccount?.partyId
-    const incomingTransfers: PendingTokenTransfer[] = []
-    const outgoingTransfers: PendingTokenTransfer[] = []
-    for (const transfer of transfers) {
-      if (transferDirection(transfer, partyId) === 'outgoing') {
-        outgoingTransfers.push(transfer)
-      } else {
-        incomingTransfers.push(transfer)
-      }
-    }
-    return { incoming: incomingTransfers, outgoing: outgoingTransfers }
-  }, [transfers, activeAccount?.partyId])
-
-  // Only incoming transfers need receiver action, so the badge counts those alone.
-  useEffect(() => {
-    onPendingCountChange?.(incoming.length)
-  }, [onPendingCountChange, incoming.length])
-
-  useEffect(() => {
-    return () => onPendingCountChange?.(0)
-  }, [onPendingCountChange])
-
-  // Tracks one open transfer details section at a time to keep the transfers list compact.
-  const toggleDetails = (transferInstructionCid: string): void => {
-    setExpandedCid((current) =>
-      current === transferInstructionCid ? undefined : transferInstructionCid,
-    )
-  }
-
-  // Runs the receiver-acceptance flow while keeping the button state scoped to one transfer.
-  const onAccept = async (transferInstructionCid: string): Promise<void> => {
-    setAcceptingCid(transferInstructionCid)
-    try {
-      await accept(transferInstructionCid)
-      toast.success('Transfer accepted.')
-    } catch (err) {
-      toast.error(`Accept failed: ${(err as Error).message}`)
-    } finally {
-      setAcceptingCid(undefined)
-    }
-  }
-
-  if (activeAccount === undefined) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center px-4 py-10 text-center">
-        <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">No account selected</p>
-      </div>
-    )
-  }
-
-  const hasActive = incoming.length > 0 || outgoing.length > 0
-
-  return (
-    <div className="flex min-h-full flex-col gap-3 px-1 pt-4 pb-2">
-      <AmuletPreapprovalSection
-        account={activeAccount}
-        api={preapprovalApi}
-      />
-
-      {error === undefined ? null : (
-        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-          {error}
-        </div>
-      )}
-
-      {hasActive ? (
-        <div className="flex flex-col gap-2">
-          {incoming.map((transfer) => (
-            <TransferCard
-              key={transfer.contractId}
-              transfer={transfer}
-              direction="incoming"
-              isExpanded={expandedCid === transfer.contractId}
-              onToggleDetails={toggleDetails}
-              isAccepting={acceptingCid === transfer.contractId}
-              onAccept={onAccept}
-            />
-          ))}
-          {outgoing.map((transfer) => (
-            <TransferCard
-              key={transfer.contractId}
-              transfer={transfer}
-              direction="outgoing"
-              isExpanded={expandedCid === transfer.contractId}
-              onToggleDetails={toggleDetails}
-            />
-          ))}
-        </div>
-      ) : loading ? (
-        <LoadingState label="Loading transfers" />
-      ) : (
-        <div className="flex flex-1 flex-col items-center justify-center px-4 py-10 text-center">
-          <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">
-            No pending transfers
-          </p>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 14800809..5eee9ee3 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -90,9 +90,8 @@ describe('HomeTabs navigation', () => {
     cleanup()
   })
 
-  it('renders Assets, Transfers, Activity, and Utils tabs', () => {
-    // Scenario: token balances, incoming transfers, and history each own a top-level
-    // tab. Sending now lives inside the token detail modal, so there is no Send tab.
+  it('renders Assets, Activity, and Utils tabs without Transfers or Send', () => {
+    // Scenario: the Transfers tab is gone; pending transfers live in Activity now.
     renderHome(
       baseVault(),
       <HomeTabs
@@ -102,9 +101,9 @@ describe('HomeTabs navigation', () => {
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Assets' }).getAttribute('data-state'), 'active')
-    assert.ok(screen.getByRole('tab', { name: 'Transfers' }))
     assert.ok(screen.getByRole('tab', { name: 'Activity' }))
     assert.ok(screen.getByRole('tab', { name: 'Utils' }))
+    assert.equal(screen.queryByRole('tab', { name: 'Transfers' }), null)
     assert.equal(screen.queryByRole('tab', { name: 'Send' }), null)
   })
 
@@ -139,10 +138,9 @@ describe('HomeTabs navigation', () => {
     await screen.findByText('Amulet')
   })
 
-  it('badges the Transfers tab when hidden incoming transfers require action', async () => {
-    // Scenario: incoming transfer polling lives in the Transfers tab, which stays
-    // mounted while Activity is selected so pending receiver-acceptance work can
-    // still badge the tab.
+  it('badges the Activity tab when hidden incoming transfers require action', async () => {
+    // Scenario: the Activity content is force-mounted, so its incoming-transfer polling
+    // badges the tab even while Assets is selected.
     const transfersApi: Cip56TransferApi = {
       listPendingIncomingTransfers: async () => [
         {
@@ -174,7 +172,7 @@ describe('HomeTabs navigation', () => {
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Assets' }).getAttribute('data-state'), 'active')
-    await screen.findByRole('tab', { name: 'Transfers 1' })
+    await screen.findByRole('tab', { name: 'Activity 1' })
   })
 
   it('shows Activity only for the selected account', async () => {
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
deleted file mode 100644
index 1d068974..00000000
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ /dev/null
@@ -1,435 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { TransfersPanel } from '@/components/TransfersPanel'
-import { TooltipProvider } from '@/components/ui/Tooltip'
-import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
-import { inactivePreapprovalApi } from '@/test-utils/preapproval'
-import { TestQueryClientProvider } from '@/test-utils/queryClient'
-import type { AccountPublic } from '@/vault/types'
-import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
-
-const ACCOUNT: AccountPublic = {
-  // Account fixture represents the active wallet party receiving an incoming Amulet transfer.
-  id: 'account-1',
-  name: 'Alice',
-  partyId: 'alice::party',
-  publicKeyBase64: 'public-key',
-  network: 'canton:local',
-  isPrimary: true,
-  createdAt: 1,
-}
-
-const baseVault = (): VaultContextValue =>
-  ({
-    isLocked: false,
-    isLoading: false,
-    hasVault: true,
-    setup: async () => undefined,
-    unlock: async () => undefined,
-    lock: () => undefined,
-    destroyVault: () => undefined,
-    accounts: [ACCOUNT],
-    primary: ACCOUNT,
-    transactions: [],
-    setPrimary: async () => undefined,
-    addAccount: async () => ACCOUNT,
-    removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
-    signMessage: async () => 'signature',
-    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
-    changePassword: async () => undefined,
-    verifyPassword: () => true,
-    autoLockOption: 'never',
-    setAutoLockOption: () => undefined,
-  }) as VaultContextValue
-
-// Mounts incoming transfers under vault context so accept can use wallet signing hooks.
-const renderTransfers = (
-  api: Cip56TransferApi,
-  preapprovalApi: AmuletPreapprovalApi = inactivePreapprovalApi,
-): void => {
-  render(
-    <TestQueryClientProvider>
-      <TooltipProvider>
-        <VaultContext.Provider value={baseVault()}>
-          <TransfersPanel
-            api={api}
-            preapprovalApi={preapprovalApi}
-          />
-        </VaultContext.Provider>
-      </TooltipProvider>
-    </TestQueryClientProvider>,
-  )
-}
-
-describe('TransfersPanel', () => {
-  afterEach(() => {
-    // Each render owns a hook polling loop; cleanup unmounts it before the next scenario.
-    cleanup()
-  })
-
-  it('shows pending incoming transfers and accepts one from the active account', async () => {
-    // Scenario: the selected party has one pending Amulet transfer that requires receiver acceptance.
-    // The panel renders the SDK-shaped transfer view and delegates accept to the hook/API path.
-    const calls: string[] = []
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => {
-        calls.push('list')
-        return calls.includes('accept')
-          ? []
-          : [
-              {
-                contractId: 'transfer-cid-1',
-                interfaceViewValue: {
-                  transfer: {
-                    sender: 'sender-party-1234567890abcdef',
-                    amount: '42',
-                    instrumentId: { id: 'Amulet' },
-                  },
-                },
-              },
-            ]
-      },
-      acceptTransfer: async ({ account, transferInstructionCid }) => {
-        calls.push('accept')
-        assert.equal(account.id, 'account-1')
-        assert.equal(transferInstructionCid, 'transfer-cid-1')
-        return { updateId: 'update-1' }
-      },
-    }
-
-    renderTransfers(api)
-
-    await screen.findByText('42.00 Amulet')
-    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
-    await waitFor(() => assert.ok(screen.getByText('No pending transfers')))
-
-    assert.deepEqual(calls, ['list', 'accept', 'list'])
-  })
-
-  it('does not show the removed "Incoming transfers" heading', async () => {
-    // Scenario: the heading was redundant once outgoing transfers also appear here.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-
-    renderTransfers(api)
-
-    await screen.findByText('No pending transfers')
-    assert.equal(screen.queryByText('Incoming transfers'), null)
-  })
-
-  it('shows a spinner while transfers are loading instead of blank space', async () => {
-    // Scenario: the first pending-transfers fetch is still in flight. The panel must
-    // show a loading indicator rather than the no-pending-transfers message.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: () => new Promise(() => {}),
-    }
-
-    renderTransfers(api)
-
-    await screen.findByRole('status', { name: /loading/i })
-    assert.equal(screen.queryByText('No pending transfers'), null)
-  })
-
-  it("shows the active party's own outgoing transfer as read-only pending", async () => {
-    // Scenario: when sending between own accounts, the sender's outgoing transfer
-    // is returned by the ledger query too. The sender must not be able to accept
-    // it; it shows as awaiting the recipient's acceptance instead.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'outgoing-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'alice::party',
-              receiver: 'bob-party-1234567890abcdef',
-              amount: '10',
-              instrumentId: { id: 'Amulet' },
-            },
-            status: { tag: 'TransferPendingReceiverAcceptance' },
-          },
-        },
-      ],
-      acceptTransfer: async () => {
-        throw new Error('the sender must not accept their own transfer')
-      },
-    }
-
-    renderTransfers(api)
-
-    await screen.findByText('10.00 Amulet')
-    await screen.findByText('Awaiting acceptance')
-    assert.equal(screen.queryByRole('button', { name: 'Accept' }), null)
-  })
-
-  it('shows Accept for a transfer the active party sent to itself', async () => {
-    // Scenario: a transfer whose sender and receiver are both the active party is
-    // still only acceptable by that party as the receiver, so Accept must appear.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'self-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'alice::party',
-              receiver: 'alice::party',
-              amount: '7',
-              instrumentId: { id: 'Amulet' },
-            },
-            status: { tag: 'TransferPendingReceiverAcceptance' },
-          },
-        },
-      ],
-      acceptTransfer: async ({ transferInstructionCid }) => {
-        assert.equal(transferInstructionCid, 'self-cid-1')
-        return { updateId: 'update-1' }
-      },
-    }
-
-    renderTransfers(api)
-
-    await screen.findByText('7.00 Amulet')
-    assert.ok(screen.getByRole('button', { name: 'Accept' }))
-    assert.equal(screen.queryByText('Awaiting acceptance'), null)
-  })
-
-  it('counts only incoming transfers toward the pending badge', async () => {
-    // Scenario: a mixed list of one incoming and one outgoing transfer must show a
-    // single Accept button and report a pending count of one to the parent badge.
-    const counts: number[] = []
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'incoming-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'sender-party-1234567890abcdef',
-              receiver: 'alice::party',
-              amount: '3',
-              instrumentId: { id: 'Amulet' },
-            },
-          },
-        },
-        {
-          contractId: 'outgoing-cid-2',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'alice::party',
-              receiver: 'bob-party-1234567890abcdef',
-              amount: '4',
-              instrumentId: { id: 'Amulet' },
-            },
-          },
-        },
-      ],
-      acceptTransfer: async () => ({ updateId: 'update-1' }),
-    }
-
-    render(
-      <TestQueryClientProvider>
-        <TooltipProvider>
-          <VaultContext.Provider value={baseVault()}>
-            <TransfersPanel
-              api={api}
-              preapprovalApi={inactivePreapprovalApi}
-              onPendingCountChange={(count) => counts.push(count)}
-            />
-          </VaultContext.Provider>
-        </TooltipProvider>
-      </TestQueryClientProvider>,
-    )
-
-    await screen.findByText('Awaiting acceptance')
-    assert.equal(screen.getAllByRole('button', { name: 'Accept' }).length, 1)
-    assert.equal(counts.at(-1), 1)
-  })
-
-  it('shows transfer description and exposes raw details on demand', async () => {
-    // Scenario: Amulet transfers can carry a sender-provided description and
-    // operational metadata. The compact card should show the description, while
-    // full parties, status, timestamps, and contract id stay behind a details toggle.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'transfer-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'sender-party-1234567890abcdef',
-              receiver: 'alice::party',
-              amount: '666.0000000000',
-              instrumentId: { id: 'Amulet' },
-              requestedAt: '2026-06-09T20:41:05.841851Z',
-              executeBefore: '2026-06-10T20:41:05.803Z',
-              meta: {
-                values: {
-                  'splice.lfdecentralizedtrust.org/reason': 'invoice 42',
-                },
-              },
-            },
-            status: {
-              tag: 'TransferPendingReceiverAcceptance',
-            },
-          },
-        },
-      ],
-      acceptTransfer: async () => ({ updateId: 'update-1' }),
-    }
-
-    renderTransfers(api)
-
-    await screen.findByText('666.00 Amulet')
-    assert.equal(screen.getByText('invoice 42').textContent, 'invoice 42')
-    assert.equal(screen.queryByText('transfer-cid-1'), null)
-
-    await userEvent.click(screen.getByRole('button', { name: 'Show details' }))
-
-    assert.equal(
-      screen.getByText('sender-party-1234567890abcdef').textContent,
-      'sender-party-1234567890abcdef',
-    )
-    assert.equal(screen.getByText('alice::party').textContent, 'alice::party')
-    assert.equal(
-      screen.getByText('TransferPendingReceiverAcceptance').textContent,
-      'TransferPendingReceiverAcceptance',
-    )
-    assert.equal(screen.getByText('2026-06-09 20:41 UTC').textContent, '2026-06-09 20:41 UTC')
-    assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
-    assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1')
-  })
-
-  it('enables Amulet auto-accept for the selected party', async () => {
-    // Scenario: the selected party has no active Amulet receiver preapproval.
-    // Enabling auto-accept must sign the prepared command for that same party.
-    let createCalls = 0
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-    const preapprovalApi: AmuletPreapprovalApi = {
-      getAmuletPreapprovalStatus: async (receiver) => {
-        assert.equal(receiver, 'alice::party')
-        return { active: false, expired: false }
-      },
-      createAmuletPreapproval: async ({ account, signMessage, recordTransaction }) => {
-        createCalls += 1
-        assert.equal(account.partyId, 'alice::party')
-        assert.equal(await signMessage(ACCOUNT.id, new Uint8Array()), 'signature')
-        assert.ok(
-          recordTransaction,
-          'preapproval execution should be recorded like token transfers',
-        )
-        return { updateId: 'create-update-1' }
-      },
-      cancelAmuletPreapproval: async () => {
-        throw new Error('cancel should not run while enabling')
-      },
-    }
-
-    renderTransfers(transfersApi, preapprovalApi)
-
-    await screen.findByText('Auto-accept')
-    const toggle = await screen.findByRole('switch', { name: 'Auto-accept' })
-    await waitFor(() => {
-      assert.equal(toggle.hasAttribute('disabled'), false)
-    })
-    await userEvent.click(toggle)
-
-    assert.equal(createCalls, 1)
-  })
-
-  it('flips the toggle on while the enable command is still settling', async () => {
-    // Scenario: the preapproval can take seconds to land on the ledger. The switch
-    // must show the requested state right away instead of waiting for the next poll.
-    let resolveCreate: (() => void) | undefined
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-    const preapprovalApi: AmuletPreapprovalApi = {
-      getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
-      createAmuletPreapproval: async () => {
-        await new Promise<void>((resolve) => {
-          resolveCreate = resolve
-        })
-        return { updateId: 'create-update-1' }
-      },
-      cancelAmuletPreapproval: async () => {
-        throw new Error('cancel should not run while enabling')
-      },
-    }
-
-    renderTransfers(transfersApi, preapprovalApi)
-
-    const toggle = await screen.findByRole('switch', { name: 'Auto-accept' })
-    await waitFor(() => assert.equal(toggle.hasAttribute('disabled'), false))
-
-    await userEvent.click(toggle)
-
-    // Optimistic: reads as on before the ledger status has caught up.
-    await waitFor(() => assert.equal(toggle.getAttribute('aria-checked'), 'true'))
-
-    resolveCreate?.()
-  })
-
-  it('disables active Amulet auto-accept for the selected party', async () => {
-    // Scenario: the selected party already has an active receiver preapproval.
-    // The toggle reads as on and flipping it cancels the same receiver preapproval.
-    let cancelCalls = 0
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-    const preapprovalApi: AmuletPreapprovalApi = {
-      getAmuletPreapprovalStatus: async (receiver) => {
-        assert.equal(receiver, 'alice::party')
-        return {
-          active: true,
-          expired: false,
-          expiresAt: '2026-06-11T12:00:00.000Z',
-          contractId: 'preapproval-cid-1',
-        }
-      },
-      createAmuletPreapproval: async () => {
-        throw new Error('create should not run while disabling')
-      },
-      cancelAmuletPreapproval: async ({ account }) => {
-        cancelCalls += 1
-        assert.equal(account.partyId, 'alice::party')
-        return { updateId: 'cancel-update-1' }
-      },
-    }
-
-    renderTransfers(transfersApi, preapprovalApi)
-
-    const toggle = await screen.findByRole('switch', { name: 'Auto-accept', checked: true })
-    await userEvent.click(toggle)
-
-    assert.equal(cancelCalls, 1)
-  })
-
-  it('reads expired Amulet auto-accept as on so it can be cleared', async () => {
-    // Scenario: a preapproval contract can still exist after its expiry. The toggle
-    // stays on so the user can flip it off to clear the stale preapproval.
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-    const preapprovalApi: AmuletPreapprovalApi = {
-      getAmuletPreapprovalStatus: async () => ({
-        active: false,
-        expired: true,
-        expiresAt: '2026-06-01T12:00:00.000Z',
-        contractId: 'expired-preapproval-cid',
-      }),
-      createAmuletPreapproval: async () => {
-        throw new Error('create should not run for expired status action')
-      },
-      cancelAmuletPreapproval: async () => ({ updateId: 'cancel-expired-1' }),
-    }
-
-    renderTransfers(transfersApi, preapprovalApi)
-
-    const toggle = await screen.findByRole('switch', { name: 'Auto-accept', checked: true })
-    assert.equal(toggle.getAttribute('aria-checked'), 'true')
-  })
-})

From c73820f3537eba6e85616c714ab99213c46c27ce Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:50:15 -0300
Subject: [PATCH 031/121] fix(carpincho-wallet): restore no-account guard in
 ActivityPanel and assert expires row

---
 carpincho-wallet/src/components/ActivityPanel.tsx      | 10 +++++++++-
 .../test/components/TransferDetailsSheet.test.tsx      |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index 011c3128..b43bb0c1 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -54,7 +54,7 @@ export const ActivityPanel = ({
   const onPendingCountChangeRef = useRef(onPendingCountChange)
   useEffect(() => {
     onPendingCountChangeRef.current = onPendingCountChange
-  })
+  }, [onPendingCountChange])
 
   // Only incoming transfers need receiver action, so the badge counts those alone.
   useEffect(() => {
@@ -66,6 +66,14 @@ export const ActivityPanel = ({
     return () => onPendingCountChangeRef.current?.(0)
   }, [])
 
+  if (activeAccount === undefined) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center px-4 py-10 text-center">
+        <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">No account selected</p>
+      </div>
+    )
+  }
+
   // Runs the receiver-acceptance flow while keeping the button state scoped to one transfer.
   const onAccept = async (transferInstructionCid: string): Promise<void> => {
     setAcceptingCid(transferInstructionCid)
diff --git a/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
index 0b3ba2e8..f8ae1364 100644
--- a/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
+++ b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
@@ -44,6 +44,7 @@ describe('TransferDetailsSheet', () => {
       'TransferPendingReceiverAcceptance',
     )
     assert.equal(screen.getByText('2026-06-09 20:41 UTC').textContent, '2026-06-09 20:41 UTC')
+    assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
     assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1')
   })
 

From bcbbd77190bbd21c8476f344748a4c60c85e0f76 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 21:58:23 -0300
Subject: [PATCH 032/121] fix(carpincho-wallet): force-mount the assets tab so
 auto-accept keeps its optimistic state

---
 carpincho-wallet/src/components/HomeTabs.tsx  |  1 +
 .../test/components/HomeTabs.test.tsx         | 31 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index e65c2e39..5a8fe572 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -72,6 +72,7 @@ export const HomeTabs = ({
         <TabTrigger value="utils">Utils</TabTrigger>
       </TabsList>
       <TabContent
+        forceMount
         value="assets"
         className={TAB_CONTENT_CLASS}
       >
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 5eee9ee3..2ff93db7 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -1,6 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ReactNode } from 'react'
 import { HomeTabs } from '@/components/HomeTabs'
@@ -175,6 +175,35 @@ describe('HomeTabs navigation', () => {
     await screen.findByRole('tab', { name: 'Activity 1' })
   })
 
+  it('keeps the optimistic auto-accept toggle on across tab switches', async () => {
+    // Scenario: enabling auto-accept flips the toggle on optimistically while the ledger
+    // catches up. Switching tabs must not unmount the Assets panel and lose that state.
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [],
+    }
+
+    renderHome(
+      baseVault(),
+      <HomeTabs
+        transactions={[]}
+        tokensApi={holdingsApi}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
+    )
+
+    const toggle = await screen.findByRole('switch', { name: 'Auto-accept incoming' })
+    await waitFor(() => assert.equal(toggle.hasAttribute('disabled'), false))
+    await userEvent.click(toggle)
+    await waitFor(() => assert.equal(toggle.getAttribute('aria-checked'), 'true'))
+
+    // Leave the Assets tab and come back.
+    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }))
+    await userEvent.click(screen.getByRole('tab', { name: 'Assets' }))
+
+    const toggleAfter = await screen.findByRole('switch', { name: 'Auto-accept incoming' })
+    assert.equal(toggleAfter.getAttribute('aria-checked'), 'true')
+  })
+
   it('shows Activity only for the selected account', async () => {
     // Scenario: Alice and Bob share one local vault, but Activity belongs to the
     // selected party. Switching to Bob must hide Alice's transaction history.

From 9868bf33e79a1a3a38b31de08d89edbb8031fe9b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:02:45 -0300
Subject: [PATCH 033/121] refactor(carpincho-wallet): add token icon, bare eye
 next to accept, drop activity group counts

---
 .../src/components/ActivityPanel.tsx          |  8 +++----
 .../src/components/TransferCard.tsx           | 23 +++++++++++++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index b43bb0c1..0aa3e095 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -99,8 +99,8 @@ export const ActivityPanel = ({
 
       {incoming.length > 0 ? (
         <section className="flex flex-col gap-2">
-          <h2 className="m-0 flex items-center gap-2 px-0.5 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-foreground">
-            Needs action <span className="text-accent">· {incoming.length}</span>
+          <h2 className="m-0 px-0.5 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-foreground">
+            Needs action
           </h2>
           {incoming.map((transfer) => (
             <TransferCard
@@ -117,8 +117,8 @@ export const ActivityPanel = ({
 
       {outgoing.length > 0 ? (
         <section className="flex flex-col gap-2">
-          <h2 className="m-0 flex items-center gap-1.5 px-0.5 text-[0.62rem] font-bold uppercase tracking-[0.1em] text-muted-foreground/70">
-            Awaiting acceptance <span>· {outgoing.length}</span>
+          <h2 className="m-0 px-0.5 text-[0.62rem] font-bold uppercase tracking-[0.1em] text-muted-foreground/70">
+            Awaiting acceptance
           </h2>
           {outgoing.map((transfer) => (
             <TransferCard
diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index 8cddc1e1..b13d570b 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -1,3 +1,4 @@
+import cantonIcon from '@/assets/canton.png'
 import { formatTokenAmount } from '@/cip56/amount'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { tokenDisplayLabel, transferDescription } from '@/cip56/transfers'
@@ -15,7 +16,7 @@ interface TransferCardProps {
 }
 
 const EYE_BUTTON_CLASS =
-  'grid size-8 shrink-0 place-items-center rounded-md border border-border-strong bg-transparent text-soft outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-4'
+  'grid size-8 shrink-0 place-items-center rounded-md text-soft outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-4'
 
 // One active transfer instruction. Incoming = accent needs-action card with Accept;
 // outgoing = quiet watch-only row with a Pending pill. Both open details in a Sheet.
@@ -35,6 +36,20 @@ export const TransferCard = ({
   const counterparty = direction === 'incoming' ? view?.sender : view?.receiver
   const counterpartyText = counterparty === undefined ? 'unknown' : shortMiddle(counterparty, 10, 6)
 
+  // Token icon sits before the amount so the row reads like the assets list.
+  const amountRow = (
+    <p className="m-0 flex items-center gap-2 text-[0.95rem] font-semibold text-foreground">
+      <img
+        src={cantonIcon}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        className="size-5 shrink-0 rounded-full"
+      />
+      {label}
+    </p>
+  )
+
   const detailsButton = (
     <button
       type="button"
@@ -53,7 +68,7 @@ export const TransferCard = ({
         className="flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-3"
       >
         <div className="min-w-0 flex-1">
-          <p className="m-0 text-[0.95rem] font-semibold text-foreground">{label}</p>
+          {amountRow}
           <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
             {counterpartyLabel}: {counterpartyText}
           </p>
@@ -77,7 +92,7 @@ export const TransferCard = ({
       />
       <div className="flex items-start gap-3">
         <div className="min-w-0 flex-1">
-          <p className="m-0 text-[0.95rem] font-semibold text-foreground">{label}</p>
+          {amountRow}
           {description === undefined ? null : (
             <p className="m-0 mt-1 text-[0.83rem] leading-5 text-foreground">{description}</p>
           )}
@@ -85,7 +100,7 @@ export const TransferCard = ({
             {counterpartyLabel}: {counterpartyText}
           </p>
         </div>
-        <div className="flex shrink-0 flex-col items-end gap-2">
+        <div className="flex shrink-0 items-center gap-2">
           <PrimaryButton
             className="px-3 py-1.5 text-[0.82rem]"
             disabled={isAccepting}

From eaa60099f9c29322369b664d06c4f17c7b6dc2c6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:07:07 -0300
Subject: [PATCH 034/121] refactor(carpincho-wallet): vertically center the
 needs-action card actions

---
 carpincho-wallet/src/components/TransferCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index b13d570b..e3b6ebd3 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -90,7 +90,7 @@ export const TransferCard = ({
         aria-hidden="true"
         className="absolute inset-y-0 left-0 w-[3px] bg-gradient-to-b from-accent to-primary"
       />
-      <div className="flex items-start gap-3">
+      <div className="flex items-center gap-3">
         <div className="min-w-0 flex-1">
           {amountRow}
           {description === undefined ? null : (

From f6293f81c4a4f5f8c00acd25d534cfd06eafe975 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:13:39 -0300
Subject: [PATCH 035/121] refactor(carpincho-wallet): refine accept feedback
 and pending-activity empty state

---
 .../src/components/ActivityPanel.tsx          | 19 ++--
 .../test/components/ActivityPanel.test.tsx    | 86 ++++++++++++++++++-
 2 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index 0aa3e095..bbb5805c 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -74,19 +74,25 @@ export const ActivityPanel = ({
     )
   }
 
-  // Runs the receiver-acceptance flow while keeping the button state scoped to one transfer.
+  // Optimistically hides the accepted transfer while it settles; a progress toast tracks the
+  // flow and is replaced by the result. On failure the transfer reappears so it can be retried.
   const onAccept = async (transferInstructionCid: string): Promise<void> => {
     setAcceptingCid(transferInstructionCid)
+    const pendingToastId = toast.info('Accepting transfer...')
     try {
       await accept(transferInstructionCid)
+      toast.dismiss(pendingToastId)
       toast.success('Transfer accepted.')
     } catch (err) {
+      toast.dismiss(pendingToastId)
       toast.error(`Accept failed: ${(err as Error).message}`)
     } finally {
       setAcceptingCid(undefined)
     }
   }
 
+  // Hide the in-flight transfer from the actionable list as soon as Accept is clicked.
+  const visibleIncoming = incoming.filter((transfer) => transfer.contractId !== acceptingCid)
   const hasPending = incoming.length > 0 || outgoing.length > 0
 
   return (
@@ -97,17 +103,16 @@ export const ActivityPanel = ({
         </div>
       )}
 
-      {incoming.length > 0 ? (
+      {visibleIncoming.length > 0 ? (
         <section className="flex flex-col gap-2">
           <h2 className="m-0 px-0.5 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-foreground">
             Needs action
           </h2>
-          {incoming.map((transfer) => (
+          {visibleIncoming.map((transfer) => (
             <TransferCard
               key={transfer.contractId}
               transfer={transfer}
               direction="incoming"
-              isAccepting={acceptingCid === transfer.contractId}
               onAccept={onAccept}
               onOpenDetails={setDetailsTransfer}
             />
@@ -133,9 +138,11 @@ export const ActivityPanel = ({
 
       {loading && !hasPending && transactions.length === 0 ? (
         <LoadingState label="Loading transfers" />
-      ) : (
+      ) : transactions.length > 0 || !hasPending ? (
+        // Only the settled-history list owns the "No activity yet" empty state, so suppress it
+        // while transfers are pending — otherwise it reads as empty beneath the pending cards.
         <ActivityList transactions={transactions} />
-      )}
+      ) : null}
 
       <TransferDetailsSheet
         transfer={detailsTransfer}
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index 5c35d73f..6ccbc1f9 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -3,7 +3,7 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ActivityPanel } from '@/components/ActivityPanel'
-import { toast } from '@/components/ui/toast'
+import { getToastEntries, toast } from '@/components/ui/toast'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic, TransactionRecord } from '@/vault/types'
@@ -120,6 +120,64 @@ describe('ActivityPanel', () => {
     assert.deepEqual(calls, ['list', 'accept', 'list'])
   })
 
+  it('hides the transfer on Accept and swaps the progress toast for a success toast', async () => {
+    // Scenario: clicking Accept removes the card immediately (optimistic) and shows an
+    // "Accepting transfer..." toast that is replaced by "Transfer accepted." once it settles.
+    let resolveAccept: (() => void) | undefined
+    let accepted = false
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () =>
+        accepted
+          ? []
+          : [
+              {
+                contractId: 'incoming-cid-1',
+                interfaceViewValue: {
+                  transfer: {
+                    sender: 'sender-party-1234567890abcdef',
+                    receiver: 'alice::party',
+                    amount: '9',
+                    instrumentId: { id: 'Amulet' },
+                  },
+                },
+              },
+            ],
+      acceptTransfer: async () => {
+        await new Promise<void>((resolve) => {
+          resolveAccept = resolve
+        })
+        accepted = true
+        return { updateId: 'update-1' }
+      },
+    }
+
+    renderPanel(api)
+
+    await screen.findByText('9.00 Amulet')
+    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
+
+    // The card is gone before the accept settles, with a progress toast showing.
+    await waitFor(() => assert.equal(screen.queryByText('9.00 Amulet'), null))
+    assert.ok(
+      getToastEntries().some((t) => t.variant === 'info' && t.message === 'Accepting transfer...'),
+    )
+
+    resolveAccept?.()
+
+    // The progress toast is dismissed and replaced by the success toast.
+    await waitFor(() =>
+      assert.ok(
+        getToastEntries().some(
+          (t) => t.variant === 'success' && t.message === 'Transfer accepted.',
+        ),
+      ),
+    )
+    assert.equal(
+      getToastEntries().some((t) => t.variant === 'info'),
+      false,
+    )
+  })
+
   it("shows the active party's outgoing transfer as read-only under Awaiting acceptance", async () => {
     // Scenario: the sender's own outgoing transfer is watch-only — no Accept button.
     const api: Cip56TransferApi = {
@@ -230,6 +288,32 @@ describe('ActivityPanel', () => {
     )
   })
 
+  it('does not show the empty-activity message while transfers are pending', async () => {
+    // Scenario: with pending transfers but no settled history, the "No activity yet" empty
+    // state must not render beneath the pending cards.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'incoming-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party-1234567890abcdef',
+              receiver: 'alice::party',
+              amount: '8',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderPanel(api)
+
+    await screen.findByText('Needs action')
+    assert.equal(screen.queryByText('No activity yet'), null)
+  })
+
   it('renders settled history below the pending zone', async () => {
     // Scenario: confirmed transactions still render via ActivityList beneath any pending items.
     const api: Cip56TransferApi = {

From c57b1d15213eff61ae869045b53451e1e46a457d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:20:54 -0300
Subject: [PATCH 036/121] refactor(carpincho-wallet): drop unreachable
 isAccepting state from TransferCard

---
 .../src/components/TransferCard.tsx           |  5 +----
 .../test/components/TransferCard.test.tsx     | 20 -------------------
 2 files changed, 1 insertion(+), 24 deletions(-)

diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index e3b6ebd3..92a4bc33 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -10,7 +10,6 @@ interface TransferCardProps {
   transfer: PendingTokenTransfer
   direction: 'incoming' | 'outgoing'
   // Acceptance only applies to incoming transfers; senders just watch theirs settle.
-  isAccepting?: boolean
   onAccept?: (transferInstructionCid: string) => void | Promise<void>
   onOpenDetails: (transfer: PendingTokenTransfer) => void
 }
@@ -23,7 +22,6 @@ const EYE_BUTTON_CLASS =
 export const TransferCard = ({
   transfer,
   direction,
-  isAccepting = false,
   onAccept,
   onOpenDetails,
 }: TransferCardProps): JSX.Element => {
@@ -103,12 +101,11 @@ export const TransferCard = ({
         <div className="flex shrink-0 items-center gap-2">
           <PrimaryButton
             className="px-3 py-1.5 text-[0.82rem]"
-            disabled={isAccepting}
             onClick={() => {
               void onAccept?.(transfer.contractId)
             }}
           >
-            {isAccepting ? 'Accepting...' : 'Accept'}
+            Accept
           </PrimaryButton>
           {detailsButton}
         </div>
diff --git a/carpincho-wallet/test/components/TransferCard.test.tsx b/carpincho-wallet/test/components/TransferCard.test.tsx
index a9ce69ef..1ca2382c 100644
--- a/carpincho-wallet/test/components/TransferCard.test.tsx
+++ b/carpincho-wallet/test/components/TransferCard.test.tsx
@@ -83,24 +83,4 @@ describe('TransferCard', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Transfer details' }))
     assert.equal(opened?.contractId, 'outgoing-cid-1')
   })
-
-  it('shows a busy label while accepting', () => {
-    // Scenario: the Accept button reflects the in-flight state for its own transfer.
-    render(
-      <TransferCard
-        transfer={INCOMING}
-        direction="incoming"
-        isAccepting
-        onAccept={() => undefined}
-        onOpenDetails={() => undefined}
-      />,
-    )
-
-    const acceptingButton = screen.getByRole('button', { name: 'Accepting...' })
-    assert.ok(acceptingButton)
-    assert.ok(
-      acceptingButton.hasAttribute('disabled'),
-      'Accept button must be disabled while accepting',
-    )
-  })
 })

From 9ff258c89a28df44da4c8e185c3fc9eec3cb94e6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:27:05 -0300
Subject: [PATCH 037/121] refactor(carpincho-wallet): share DetailRow and name
 activity render conditions

---
 .../src/components/ActivityPanel.tsx          | 13 +++++-----
 .../src/components/TokenHoldingDetail.tsx     | 22 ++++------------
 .../src/components/TransferDetailsSheet.tsx   | 26 +++++--------------
 .../src/components/ui/DetailRow.tsx           | 12 +++++++++
 4 files changed, 30 insertions(+), 43 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/DetailRow.tsx

diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index bbb5805c..3290d8c3 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -94,6 +94,10 @@ export const ActivityPanel = ({
   // Hide the in-flight transfer from the actionable list as soon as Accept is clicked.
   const visibleIncoming = incoming.filter((transfer) => transfer.contractId !== acceptingCid)
   const hasPending = incoming.length > 0 || outgoing.length > 0
+  const showLoading = loading && !hasPending && transactions.length === 0
+  // ActivityList owns the "No activity yet" empty state, so render it only when there is real
+  // history or nothing is pending; otherwise that text reads as empty beneath the pending cards.
+  const showHistory = !showLoading && (transactions.length > 0 || !hasPending)
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 pt-3 pb-2">
@@ -136,13 +140,8 @@ export const ActivityPanel = ({
         </section>
       ) : null}
 
-      {loading && !hasPending && transactions.length === 0 ? (
-        <LoadingState label="Loading transfers" />
-      ) : transactions.length > 0 || !hasPending ? (
-        // Only the settled-history list owns the "No activity yet" empty state, so suppress it
-        // while transfers are pending — otherwise it reads as empty beneath the pending cards.
-        <ActivityList transactions={transactions} />
-      ) : null}
+      {showLoading ? <LoadingState label="Loading transfers" /> : null}
+      {showHistory ? <ActivityList transactions={transactions} /> : null}
 
       <TransferDetailsSheet
         transfer={detailsTransfer}
diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
index b1ec4d83..6160ae63 100644
--- a/carpincho-wallet/src/components/TokenHoldingDetail.tsx
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -1,19 +1,7 @@
 import { formatTokenAmount } from '@/cip56/amount'
 import type { TokenHolding } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
-
-interface HoldingDetailRowProps {
-  label: string
-  value: string
-}
-
-// Keeps raw holding values readable in the per-UTXO detail view.
-const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element => (
-  <div className="grid gap-1">
-    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
-  </div>
-)
+import { DetailRow } from '@/components/ui/DetailRow'
 
 // Full detail for a single token holding UTXO.
 export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.Element => {
@@ -21,21 +9,21 @@ export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.
   const lock = view?.lock
   return (
     <dl className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3">
-      <HoldingDetailRow
+      <DetailRow
         label="amount"
         value={view?.amount === undefined ? 'unknown' : formatTokenAmount(view.amount)}
       />
-      <HoldingDetailRow
+      <DetailRow
         label="lock"
         value={lock == null ? 'unlocked' : 'locked'}
       />
       {lock?.expiresAt === undefined ? null : (
-        <HoldingDetailRow
+        <DetailRow
           label="expires"
           value={transferTimeLabel(lock.expiresAt)}
         />
       )}
-      <HoldingDetailRow
+      <DetailRow
         label="contract id"
         value={holding.contractId}
       />
diff --git a/carpincho-wallet/src/components/TransferDetailsSheet.tsx b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
index ca65c467..ef319ada 100644
--- a/carpincho-wallet/src/components/TransferDetailsSheet.tsx
+++ b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
@@ -1,20 +1,8 @@
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { transferStatusLabel, transferTimeLabel } from '@/cip56/transfers'
+import { DetailRow } from '@/components/ui/DetailRow'
 import { Sheet } from '@/components/ui/Sheet'
 
-interface TransferDetailRowProps {
-  label: string
-  value: string
-}
-
-// Keeps long Canton identifiers readable inside the details sheet.
-const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Element => (
-  <div className="grid gap-1">
-    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
-  </div>
-)
-
 interface TransferDetailsSheetProps {
   transfer: PendingTokenTransfer | null
   onClose: () => void
@@ -38,27 +26,27 @@ export const TransferDetailsSheet = ({
     >
       {transfer === null ? null : (
         <dl className="grid gap-3">
-          <TransferDetailRow
+          <DetailRow
             label="status"
             value={transferStatusLabel(transfer)}
           />
-          <TransferDetailRow
+          <DetailRow
             label="requested"
             value={transferTimeLabel(view?.requestedAt)}
           />
-          <TransferDetailRow
+          <DetailRow
             label="expires"
             value={transferTimeLabel(view?.executeBefore)}
           />
-          <TransferDetailRow
+          <DetailRow
             label="sender"
             value={view?.sender ?? 'unknown'}
           />
-          <TransferDetailRow
+          <DetailRow
             label="receiver"
             value={view?.receiver ?? 'unknown'}
           />
-          <TransferDetailRow
+          <DetailRow
             label="contract id"
             value={transfer.contractId}
           />
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
new file mode 100644
index 00000000..177bebd6
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -0,0 +1,12 @@
+interface DetailRowProps {
+  label: string
+  value: string
+}
+
+// Label/value pair for the detail sheets; keeps long mono values readable.
+export const DetailRow = ({ label, value }: DetailRowProps): JSX.Element => (
+  <div className="grid gap-1">
+    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
+    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
+  </div>
+)

From ebe23a989f68c960383f9185fc7a3bf15d32850f Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:31:53 -0300
Subject: [PATCH 038/121] docs(carpincho-wallet): sync agents and architecture
 with the activity/transfers redesign

---
 carpincho-wallet/AGENTS.md       | 2 +-
 carpincho-wallet/architecture.md | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index 0a0f2458..b8ad511a 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -13,7 +13,7 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 | Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
 | Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer at Settings → Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
 | Fonts | Self-hosted via `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Imported once in `src/main.tsx`; works offline in the extension popup. Manrope is the entire UI: `font-display` for hero wordmarks, view-level headings, section markers (heavier weight for hierarchy) and `font-sans` for UI chrome / body / labels / buttons. `font-mono` (JetBrains Mono) is for party IDs, hashes, RPC URLs, JSON payloads, status eyebrows |
-| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus pending CIP-56 transfers split by direction through `transferDirection`: incoming transfers the active party can Accept, and the party's own outgoing transfers shown read-only as "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; completed transfer history lives in the Activity tab, not here), and `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`); Assets is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a count badge of incoming transfers awaiting acceptance. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
+| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` Amulet auto-accept toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `LedgerToolsPanel` (Utils — developer ledger tools); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
 | Feedback | Toast vs inline Alert vs error prop | Transient system feedback (action results, async errors, network failures, copy confirmations) renders via `toast.*` from [`@/components/ui/toast.ts`](src/components/ui/toast.ts) — never as inline `Alert`. Mount the `ToastProvider` once in `App.tsx`. Field-level error state (mismatched passwords, wrong current password on a verify step, invalid input) uses the `error` prop on `TextInput` / `PasswordInput` (danger border + `aria-invalid`); pair it with `aria-errormessage` pointing at a sibling caption `<p>` when there is a human-readable reason to render. Inline `Alert` is reserved for form-level errors that cannot be attributed to a single field and for persistent contextual hints inside cards. All callers (React components, WalletConnect handlers in `src/wc/`, vault errors, extension bridge) use the imperative `toast` import directly. Variant durations: non-critical variants (`info` / `success` / `warning`) auto-dismiss after 5 s; only `error` (must-read) persists until dismissed. Identical messages collapse — emitting a string message that matches a visible toast of the same variant replaces it with a fresh entry (so rapid repeats like copy clicks collapse to a single toast and restart its timer); distinct messages of the same variant (a copy confirmation vs an RPC test result) stack separately. Toasts render as elevated `bg-surface` cards (border + `shadow-popover`) with a variant-tinted icon badge and a left accent rail, sized to the app content width (`w-popup`). The message body caps at `max-h-40` and scrolls when longer; `error` toasts (only) carry a copy-icon button that copies the rendered message text. Max 3 visible, top-center, newest on top |
 | Package manager | npm | lockfile: `package-lock.json` |
 | Data fetching | @tanstack/react-query | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); a single `QueryClient` is mounted in `App.tsx`. Read/list logic lives in `src/cip56/*`, wrapped by hooks in `src/hooks/*` |
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 43c4ade0..1eec13ac 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -30,7 +30,8 @@ src/
   assets/           SVG brand assets (carpincho-logo.svg)
   components/       Shared UI components (Logo, Header, WelcomeHero, AccountCard,
                     AccountRow, AccountListRow, AccountsDialog, CopyPartyIdButton,
-                    ActivityList, HomeTabs, AssetsPanel, TransfersPanel,
+                    ActivityList, HomeTabs, AssetsPanel, ActivityPanel,
+                    AutoAcceptSetting, TransferCard, TransferDetailsSheet,
                     TokenRow, TokenDetailSheet, TokenReceive, TokenHoldingDetail,
                     SendTokenForm, SendConfirm, ContactsPicker, AmountField,
                     ConnectionFooter,
@@ -41,7 +42,7 @@ src/
                     Select on top of @radix-ui/react-select)
                     and provides static visuals (Button, TextInput, PasswordInput,
                     Alert, Card, OptionList, Stepper, DangerConfirm, AccountAvatar,
-                    PendingActionCard, Select).
+                    PendingActionCard, Select, DetailRow).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
   cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,
@@ -125,7 +126,7 @@ Token balances, transfers, and Amulet auto-accept are layered on top of the wall
 - **`cip56/transfers.ts`** — `listPendingIncomingTransfers` reads pending CIP-56 transfers (the ledger returns every instruction the party is a stakeholder on, so the list spans both directions) and `transferDirection` classifies each as incoming or outgoing relative to the active party; `acceptPendingTransfer` and `createTokenTransfer` run write flows through `executePreparedCommands`.
 - **`cip56/amuletPreapproval.ts`** — `getAmuletPreapprovalStatus` reads the Amulet auto-accept (preapproval) state; `createAmuletPreapproval` / `cancelAmuletPreapproval` toggle it via `executePreparedCommands`.
 - **`api/interactiveSubmission.ts`** — `executePreparedCommands` orchestrates the Canton interactive submission pattern: wallet-service `prepareTransaction`, then local signing through the Vault (`signMessage`), then wallet-service `executePrepared`, then an optional `recordTransaction`. It is the single write path for every token transfer and preapproval action, keeping command preparation and ledger submission on the wallet-service while signing stays local.
-- **`hooks/`** — Thin React Query wrappers: `useTokenHoldings` and `usePendingCip56Transfers` poll every 5 s; `useTokenHoldingDetails` lazy-loads a token's UTXOs when its detail modal opens; `useAmuletPreapproval` polls status and exposes `enable()` / `disable()`. `AssetsPanel`, `TokenDetailSheet`, and `TransfersPanel` consume these hooks.
+- **`hooks/`** — Thin React Query wrappers: `useTokenHoldings` and `usePendingCip56Transfers` poll every 5 s; `useTokenHoldingDetails` lazy-loads a token's UTXOs when its detail modal opens; `useAmuletPreapproval` polls status and exposes `enable()` / `disable()`. `AssetsPanel` / `AutoAcceptSetting`, `TokenDetailSheet`, and `ActivityPanel` consume these hooks.
 
 ### Data Access Layer
 

From 804ffa76667833c4417fe5558073ee2934fc4d9d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:49:28 -0300
Subject: [PATCH 039/121] chore(carpincho-wallet): add collapsible and
 json-view deps for utils redesign

---
 carpincho-wallet/package.json |   2 +
 package-lock.json             | 217 +++++++++++++++++++++++++++++++++-
 2 files changed, 218 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index ba64fb44..9ff4e85f 100644
--- a/carpincho-wallet/package.json
+++ b/carpincho-wallet/package.json
@@ -19,6 +19,7 @@
     "@noble/ed25519": "^3.1.0",
     "@noble/hashes": "^1.7.0",
     "@radix-ui/react-avatar": "^1.2.0",
+    "@radix-ui/react-collapsible": "^1.1.14",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-select": "^2.3.0",
     "@radix-ui/react-switch": "^1.3.0",
@@ -26,6 +27,7 @@
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-query": "^5.101.0",
+    "@uiw/react-json-view": "^2.0.0-alpha.30",
     "@walletconnect/core": "^2.23.9",
     "@walletconnect/jsonrpc-utils": "^1.0.8",
     "@walletconnect/sign-client": "^2.23.9",
diff --git a/package-lock.json b/package-lock.json
index c3ba9266..8789594e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -111,6 +111,7 @@
         "@noble/ed25519": "^3.1.0",
         "@noble/hashes": "^1.7.0",
         "@radix-ui/react-avatar": "^1.2.0",
+        "@radix-ui/react-collapsible": "^1.1.14",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-select": "^2.3.0",
         "@radix-ui/react-switch": "^1.3.0",
@@ -118,6 +119,7 @@
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.8",
         "@tanstack/react-query": "^5.101.0",
+        "@uiw/react-json-view": "^2.0.0-alpha.30",
         "@walletconnect/core": "^2.23.9",
         "@walletconnect/jsonrpc-utils": "^1.0.8",
         "@walletconnect/sign-client": "^2.23.9",
@@ -526,7 +528,6 @@
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
       "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -3403,6 +3404,206 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.14.tgz",
+      "integrity": "sha512-9bT+FvifX1FK2Mj6UEsTdyu0cN3JaA3KdfhaBao+ONrYFy/pyOy3TU1TNw7iOk1o+0hOEq67RojlUUmoFGwxyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.4",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-presence": "1.1.6",
+        "@radix-ui/react-primitive": "2.1.6",
+        "@radix-ui/react-use-controllable-state": "1.2.3",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.4.tgz",
+      "integrity": "sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.3.tgz",
+      "integrity": "sha512-rYOP8OMnuuPMQF1uhPVlGNcCDlkokKqGFE3JcxFViIkAXP7EvFWUliJAstrapypaBLJNHbZL6jGhbVDGTwmVhA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.4.tgz",
+      "integrity": "sha512-QwH4PO5urrbO+FaGd5Aglg+YJgWTyyuZ3g/6mKvsqraLkglDdckw9JafgL5McL5VEJ6EPNduPaT3ZE9BttDAqg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.2.tgz",
+      "integrity": "sha512-orBC88futVpqCmhX1p4cvquNHsELQ+w+vBJnuj3ftETI5bJb0bZn3Tqu3SWN2IOcPycTnMGnhwoermvISt72sA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.6.tgz",
+      "integrity": "sha512-zdTk4PlUO0E18HnZ3wYbW0KkJJxWCdiNYp6g6X1PtONFhxVkg01vliTJAmwIszU6mHiyBOoW9P0rAugl5/hULQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.6.tgz",
+      "integrity": "sha512-wetd0QI77DbvrPpTAvH1SqOxsYF2wZe5TNxqwOd5Ty4XDpV3dpV0s8K/1MGMJBeY5o7lg8ub5VIt1Ub+yVen6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.3.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.3.0.tgz",
+      "integrity": "sha512-MojKku4U/miO8Av4Dkb+ctMAQx7JmY96LmtDQlAarCRtd7rN52QCSzBF+XAvr5S6coSVj9HEPBgHAHKEJVk/WA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.3.tgz",
+      "integrity": "sha512-PLzC90MS+ReootmjC597dvopoelpZ8Q61HJkDXZSExitIq7PL55vHNnesAHwguHK0aPfBnpdNzQtv1uliaqQrA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.3",
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.3.tgz",
+      "integrity": "sha512-6c8ZqvPTWILEKnyVkP53EGRCcpnJiKTC21sS/6R1GF5xKyHJJWQEPfkqlcgUkdRQivd6tb23abUwe4ngWmY0JA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -6178,6 +6379,20 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@uiw/react-json-view": {
+      "version": "2.0.0-alpha.43",
+      "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-2.0.0-alpha.43.tgz",
+      "integrity": "sha512-PMj+6xRDCPbVGccfLUDhx7yGrmVBSeFx3py6bqDds4QIYScXo9GEgtTbWXn3gXpoehsmOu//6dveYTf872wu3Q==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "@babel/runtime": ">=7.10.0",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@upsetjs/venn.js": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",

From e63eace61a0c757bef778888579b112e1df1a6e1 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 22:53:55 -0300
Subject: [PATCH 040/121] feat(carpincho-wallet): add Collapsible ui wrapper

---
 .../src/components/ui/Collapsible.tsx         | 34 +++++++++++++++++++
 .../test/components/Collapsible.test.tsx      | 22 ++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 carpincho-wallet/src/components/ui/Collapsible.tsx
 create mode 100644 carpincho-wallet/test/components/Collapsible.test.tsx

diff --git a/carpincho-wallet/src/components/ui/Collapsible.tsx b/carpincho-wallet/src/components/ui/Collapsible.tsx
new file mode 100644
index 00000000..0371c62c
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/Collapsible.tsx
@@ -0,0 +1,34 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import type { ReactNode } from 'react'
+import { cn } from '@/utils/cn'
+
+export const Collapsible = CollapsiblePrimitive.Root
+
+export const CollapsibleTrigger = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}): JSX.Element => (
+  <CollapsiblePrimitive.Trigger
+    className={cn(
+      'flex w-full items-center gap-2 outline-none focus-visible:shadow-focus',
+      className,
+    )}
+  >
+    {children}
+  </CollapsiblePrimitive.Trigger>
+)
+
+export const CollapsibleContent = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}): JSX.Element => (
+  <CollapsiblePrimitive.Content className={cn('overflow-hidden', className)}>
+    {children}
+  </CollapsiblePrimitive.Content>
+)
diff --git a/carpincho-wallet/test/components/Collapsible.test.tsx b/carpincho-wallet/test/components/Collapsible.test.tsx
new file mode 100644
index 00000000..f3785c64
--- /dev/null
+++ b/carpincho-wallet/test/components/Collapsible.test.tsx
@@ -0,0 +1,22 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
+
+describe('Collapsible', () => {
+  afterEach(cleanup)
+
+  it('hides content until the trigger is activated', async () => {
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+        <CollapsibleContent>Hidden body</CollapsibleContent>
+      </Collapsible>,
+    )
+
+    assert.equal(screen.queryByText('Hidden body'), null)
+    await userEvent.click(screen.getByRole('button', { name: 'Toggle' }))
+    assert.ok(screen.getByText('Hidden body'))
+  })
+})

From c15448e2ee1632e40d1ac615f67992630d088a78 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:00:26 -0300
Subject: [PATCH 041/121] feat(carpincho-wallet): add Copyable and route
 CopyPartyIdButton through it

---
 .../src/components/CopyPartyIdButton.tsx      | 23 +++-----
 .../src/components/ui/Copyable.tsx            | 58 +++++++++++++++++++
 .../test/components/Copyable.test.tsx         | 41 +++++++++++++
 .../test/components/TokenReceive.test.tsx     |  7 ++-
 4 files changed, 113 insertions(+), 16 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/Copyable.tsx
 create mode 100644 carpincho-wallet/test/components/Copyable.test.tsx

diff --git a/carpincho-wallet/src/components/CopyPartyIdButton.tsx b/carpincho-wallet/src/components/CopyPartyIdButton.tsx
index 194db57a..b4f763d7 100644
--- a/carpincho-wallet/src/components/CopyPartyIdButton.tsx
+++ b/carpincho-wallet/src/components/CopyPartyIdButton.tsx
@@ -1,22 +1,15 @@
-import { PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
-import { COPY_ICON } from '@/components/ui/icons'
-import { copyPartyId } from '@/utils/clipboard'
-import { cn } from '@/utils/cn'
+import { Copyable } from '@/components/ui/Copyable'
 
 interface CopyPartyIdButtonProps {
   partyId: string
 }
 
-// Inline copy button used in the address row; pointer-events restored so it stays clickable
-// inside pointer-events-none row wrappers.
+// Address-row copy button; delegates to the shared Copyable while keeping its test id.
 export const CopyPartyIdButton = ({ partyId }: CopyPartyIdButtonProps): JSX.Element => (
-  <button
-    type="button"
-    data-testid="account-copy-party-id"
-    onClick={() => copyPartyId(partyId)}
-    aria-label="Copy party ID"
-    className={cn(PLAIN_ICON_BUTTON_CLASS, 'pointer-events-auto size-6 shrink-0')}
-  >
-    {COPY_ICON}
-  </button>
+  <Copyable
+    value={partyId}
+    label="party ID"
+    successMessage="Party ID copied"
+    testId="account-copy-party-id"
+  />
 )
diff --git a/carpincho-wallet/src/components/ui/Copyable.tsx b/carpincho-wallet/src/components/ui/Copyable.tsx
new file mode 100644
index 00000000..2a015022
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/Copyable.tsx
@@ -0,0 +1,58 @@
+import * as RadixTooltip from '@radix-ui/react-tooltip'
+import { useState } from 'react'
+import { PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
+import { CHECK_ICON, COPY_ICON } from '@/components/ui/icons'
+import { copyText } from '@/utils/clipboard'
+import { cn } from '@/utils/cn'
+
+interface CopyableProps {
+  value: string
+  label: string
+  successMessage?: string
+  testId?: string
+  className?: string
+}
+
+const COPIED_RESET_MS = 1200
+
+// Generic copy control: COPY_ICON swaps to CHECK_ICON briefly and copyText fires the toast.
+export const Copyable = ({
+  value,
+  label,
+  successMessage,
+  testId,
+  className,
+}: CopyableProps): JSX.Element => {
+  const [copied, setCopied] = useState(false)
+  const onCopy = (): void => {
+    copyText(value, successMessage ?? `${label} copied`)
+    setCopied(true)
+    const handle = setTimeout(() => setCopied(false), COPIED_RESET_MS)
+    ;(handle as unknown as { unref?: () => void }).unref?.()
+  }
+  return (
+    <RadixTooltip.Root delayDuration={150}>
+      <RadixTooltip.Trigger asChild>
+        <button
+          type="button"
+          data-testid={testId}
+          aria-label={`Copy ${label}`}
+          onClick={onCopy}
+          className={cn(PLAIN_ICON_BUTTON_CLASS, 'pointer-events-auto size-6 shrink-0', className)}
+        >
+          {copied ? CHECK_ICON : COPY_ICON}
+        </button>
+      </RadixTooltip.Trigger>
+      <RadixTooltip.Portal>
+        <RadixTooltip.Content
+          side="top"
+          sideOffset={4}
+          className="z-50 rounded-md border border-border bg-surface px-2 py-1 text-[0.72rem] font-medium text-foreground shadow-[var(--shadow-popover)]"
+        >
+          {copied ? 'Copied' : `Copy ${label}`}
+          <RadixTooltip.Arrow className="fill-surface" />
+        </RadixTooltip.Content>
+      </RadixTooltip.Portal>
+    </RadixTooltip.Root>
+  )
+}
diff --git a/carpincho-wallet/test/components/Copyable.test.tsx b/carpincho-wallet/test/components/Copyable.test.tsx
new file mode 100644
index 00000000..8d461054
--- /dev/null
+++ b/carpincho-wallet/test/components/Copyable.test.tsx
@@ -0,0 +1,41 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Copyable } from '@/components/ui/Copyable'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+
+describe('Copyable', () => {
+  const originalClipboard = globalThis.navigator?.clipboard
+
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: originalClipboard,
+      configurable: true,
+    })
+  })
+
+  it('writes the value to the clipboard and confirms the copy', async () => {
+    const written: string[] = []
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText: async (text: string) => void written.push(text) },
+      configurable: true,
+    })
+
+    render(
+      <TooltipProvider>
+        <Copyable
+          value="cid-1"
+          label="contract ID"
+        />
+      </TooltipProvider>,
+    )
+
+    await userEvent.click(screen.getByRole('button', { name: 'Copy contract ID' }))
+
+    await waitFor(() => assert.deepEqual(written, ['cid-1']))
+  })
+})
diff --git a/carpincho-wallet/test/components/TokenReceive.test.tsx b/carpincho-wallet/test/components/TokenReceive.test.tsx
index 53012a8c..fadfc60d 100644
--- a/carpincho-wallet/test/components/TokenReceive.test.tsx
+++ b/carpincho-wallet/test/components/TokenReceive.test.tsx
@@ -2,6 +2,7 @@ import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import { TokenReceive } from '@/components/TokenReceive'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 
 const PARTY_ID = 'alice::1220abc0000000000000000000000000000000000000000000000000c8b64e3'
 
@@ -13,7 +14,11 @@ describe('TokenReceive', () => {
   it('shows a QR code, the full party id, and a copy button', () => {
     // Scenario: the receive screen mirrors common wallets: scannable QR up top, the
     // full party id with a copy affordance below.
-    const { container } = render(<TokenReceive partyId={PARTY_ID} />)
+    const { container } = render(
+      <TooltipProvider>
+        <TokenReceive partyId={PARTY_ID} />
+      </TooltipProvider>,
+    )
 
     const qr = container.querySelector('[data-testid="receive-qr"] svg')
     assert.ok(qr, 'the receive screen should render a QR code')

From f288e21c1bb5d0f83735351d7a22c13041e11a90 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:07:39 -0300
Subject: [PATCH 042/121] feat(carpincho-wallet): add themed JsonView wrapper

---
 .../src/components/ui/JsonView.tsx            | 44 +++++++++++++++++++
 .../test/components/JsonView.test.tsx         | 18 ++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 carpincho-wallet/src/components/ui/JsonView.tsx
 create mode 100644 carpincho-wallet/test/components/JsonView.test.tsx

diff --git a/carpincho-wallet/src/components/ui/JsonView.tsx b/carpincho-wallet/src/components/ui/JsonView.tsx
new file mode 100644
index 00000000..2710e315
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/JsonView.tsx
@@ -0,0 +1,44 @@
+import { JsonView as RjvJsonView } from '@uiw/react-json-view'
+import type { CSSProperties } from 'react'
+import { cn } from '@/utils/cn'
+
+// Map the json tree's CSS variables onto the wallet's existing token palette.
+const THEME_STYLE: CSSProperties = {
+  '--w-rjv-font-family': 'var(--font-mono)',
+  '--w-rjv-background-color': 'transparent',
+  '--w-rjv-color': 'var(--color-foreground)',
+  '--w-rjv-key-string': 'var(--color-accent)',
+  '--w-rjv-line-color': 'var(--color-border)',
+  '--w-rjv-arrow-color': 'var(--color-muted-foreground)',
+  '--w-rjv-info-color': 'var(--color-muted-foreground)',
+  '--w-rjv-brackets-color': 'var(--color-muted-foreground)',
+  '--w-rjv-type-string-color': 'var(--color-success)',
+  '--w-rjv-type-int-color': 'var(--color-primary)',
+  '--w-rjv-type-float-color': 'var(--color-primary)',
+  '--w-rjv-type-boolean-color': 'var(--color-warning)',
+  '--w-rjv-type-null-color': 'var(--color-danger)',
+} as CSSProperties
+
+interface JsonViewProps {
+  value: unknown
+  className?: string
+}
+
+// Read-only JSON tree with per-node copy; used for contract args, results, and tx payloads.
+export const JsonView = ({ value, className }: JsonViewProps): JSX.Element => (
+  <div
+    className={cn(
+      'max-h-64 overflow-auto rounded-md border border-border bg-muted p-3 text-[0.78rem] leading-relaxed',
+      className,
+    )}
+  >
+    <RjvJsonView
+      value={value as object}
+      style={THEME_STYLE}
+      displayDataTypes={false}
+      displayObjectSize={false}
+      enableClipboard
+      collapsed={2}
+    />
+  </div>
+)
diff --git a/carpincho-wallet/test/components/JsonView.test.tsx b/carpincho-wallet/test/components/JsonView.test.tsx
new file mode 100644
index 00000000..5c83a541
--- /dev/null
+++ b/carpincho-wallet/test/components/JsonView.test.tsx
@@ -0,0 +1,18 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { JsonView } from '@/components/ui/JsonView'
+
+describe('JsonView', () => {
+  afterEach(cleanup)
+
+  it('renders object keys and values', () => {
+    render(<JsonView value={{ admin: 'alice::party' }} />)
+    // key renders in .w-rjv-object-key; value renders in .w-rjv-value — both are leaf spans
+    assert.ok(screen.getByText(/admin/))
+    assert.ok(
+      screen.getAllByText((_t, node) => node?.textContent?.includes('alice::party') ?? false)
+        .length > 0,
+    )
+  })
+})

From 518d4c4ccb9d62ef1f1e83b4fe3d36944c837ee6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:12:24 -0300
Subject: [PATCH 043/121] feat(carpincho-wallet): add validated JsonField for
 ledger command payloads

---
 .../src/components/utils/JsonField.tsx        | 76 +++++++++++++++++++
 .../test/components/utils/JsonField.test.tsx  | 46 +++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/JsonField.tsx
 create mode 100644 carpincho-wallet/test/components/utils/JsonField.test.tsx

diff --git a/carpincho-wallet/src/components/utils/JsonField.tsx b/carpincho-wallet/src/components/utils/JsonField.tsx
new file mode 100644
index 00000000..cdc7bcea
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/JsonField.tsx
@@ -0,0 +1,76 @@
+import { useEffect } from 'react'
+import { INPUT_CLASS } from '@/components/ui/TextInput'
+import { cn } from '@/utils/cn'
+import { formatJsonInput, parseJsonObject } from '@/utils/json'
+
+interface JsonFieldProps {
+  id: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  onValidityChange?: (valid: boolean) => void
+  placeholder?: string
+}
+
+// Returns an error message when the text is not a JSON object, else undefined.
+const validate = (value: string, label: string): string | undefined => {
+  try {
+    parseJsonObject(value, label)
+    return undefined
+  } catch (err) {
+    return err instanceof Error ? err.message : 'Invalid JSON'
+  }
+}
+
+// JSON object textarea with live validation and format-on-blur for ledger command payloads.
+export const JsonField = ({
+  id,
+  label,
+  value,
+  onChange,
+  onValidityChange,
+  placeholder,
+}: JsonFieldProps): JSX.Element => {
+  const errorMessage = validate(value, label)
+
+  useEffect(() => {
+    onValidityChange?.(errorMessage === undefined)
+  }, [errorMessage, onValidityChange])
+
+  const onBlur = (): void => {
+    try {
+      onChange(formatJsonInput(value, label))
+    } catch {
+      // Leave partially typed input untouched when it cannot be parsed yet.
+    }
+  }
+
+  return (
+    <label
+      htmlFor={id}
+      className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+    >
+      {label}
+      <textarea
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        spellCheck={false}
+        aria-invalid={errorMessage === undefined ? undefined : true}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        onBlur={onBlur}
+        className={cn(
+          INPUT_CLASS,
+          'min-h-44 resize-y font-mono text-[0.85rem] normal-case tracking-normal',
+          errorMessage !== undefined &&
+            'border-danger focus:border-danger shadow-focus-danger focus:shadow-focus-danger',
+        )}
+      />
+      {errorMessage === undefined ? null : (
+        <span className="text-[0.78rem] font-medium normal-case tracking-normal text-danger">
+          Invalid JSON: {errorMessage}
+        </span>
+      )}
+    </label>
+  )
+}
diff --git a/carpincho-wallet/test/components/utils/JsonField.test.tsx b/carpincho-wallet/test/components/utils/JsonField.test.tsx
new file mode 100644
index 00000000..158018bd
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/JsonField.test.tsx
@@ -0,0 +1,46 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { JsonField } from '@/components/utils/JsonField'
+
+const Harness = (): JSX.Element => {
+  const [value, setValue] = useState('{}')
+  const [valid, setValid] = useState(true)
+  return (
+    <div>
+      <span data-testid="valid">{valid ? 'valid' : 'invalid'}</span>
+      <JsonField
+        id="json-field"
+        label="Create arguments JSON"
+        value={value}
+        onChange={setValue}
+        onValidityChange={setValid}
+      />
+    </div>
+  )
+}
+
+describe('JsonField', () => {
+  afterEach(cleanup)
+
+  it('flags invalid JSON and clears the flag when fixed', () => {
+    render(<Harness />)
+    const textarea = screen.getByLabelText('Create arguments JSON')
+
+    fireEvent.change(textarea, { target: { value: '{ not json' } })
+    assert.equal(screen.getByTestId('valid').textContent, 'invalid')
+    assert.ok(screen.getByText(/invalid json/i))
+
+    fireEvent.change(textarea, { target: { value: '{"a":1}' } })
+    assert.equal(screen.getByTestId('valid').textContent, 'valid')
+  })
+
+  it('formats parseable input on blur', () => {
+    render(<Harness />)
+    const textarea = screen.getByLabelText('Create arguments JSON') as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: '{ a: 1 }' } })
+    fireEvent.blur(textarea)
+    assert.equal(textarea.value, JSON.stringify({ a: 1 }, null, 2))
+  })
+})

From 82355846dac6e01f2f1ace588788ea60785a66e5 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:20:27 -0300
Subject: [PATCH 044/121] feat(carpincho-wallet): add CreateContractUtil screen

---
 .../components/utils/CreateContractUtil.tsx   | 112 ++++++++++++++++++
 .../utils/CreateContractUtil.test.tsx         |  98 +++++++++++++++
 2 files changed, 210 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/CreateContractUtil.tsx
 create mode 100644 carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx

diff --git a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
new file mode 100644
index 00000000..ea880940
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
@@ -0,0 +1,112 @@
+import { useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { PrimaryButton } from '@/components/ui/Button'
+import { Copyable } from '@/components/ui/Copyable'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import { JsonField } from '@/components/utils/JsonField'
+import { createContract as defaultCreateContract } from '@/ledger/contracts'
+import { parseJsonObject } from '@/utils/json'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+interface CreateContractUtilProps {
+  account: AccountPublic
+  createContract?: typeof defaultCreateContract
+}
+
+// Submits one generic CreateCommand and surfaces the resulting update id for copying.
+export const CreateContractUtil = ({
+  account,
+  createContract = defaultCreateContract,
+}: CreateContractUtilProps): JSX.Element => {
+  const vault = useVault()
+  const [templateId, setTemplateId] = useState('')
+  const [json, setJson] = useState('{}')
+  const [jsonValid, setJsonValid] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+  const [updateId, setUpdateId] = useState<string | undefined>()
+
+  const onSubmit = async (): Promise<void> => {
+    const trimmed = templateId.trim()
+    if (trimmed === '') {
+      setError('Template ID is required')
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    setUpdateId(undefined)
+    try {
+      const createArguments = parseJsonObject(json, 'Create arguments')
+      const result = await createContract({
+        account,
+        templateId: trimmed,
+        createArguments,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setUpdateId(result.updateId)
+      toast.success('Contract created')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-4"
+      onSubmit={(event) => {
+        event.preventDefault()
+        void onSubmit()
+      }}
+    >
+      <label
+        htmlFor="create-template-id"
+        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+      >
+        Template ID
+        <TextInput
+          id="create-template-id"
+          value={templateId}
+          onChange={(event) => setTemplateId(event.currentTarget.value)}
+          placeholder="package:Module:Template"
+          className="font-mono text-[0.9rem] normal-case tracking-normal"
+        />
+      </label>
+      <JsonField
+        id="create-arguments-json"
+        label="Create arguments JSON"
+        value={json}
+        onChange={setJson}
+        onValidityChange={setJsonValid}
+      />
+      {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+      {updateId === undefined ? null : (
+        <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
+          <div className="min-w-0">
+            <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
+              Update ID
+            </div>
+            <div className="break-all font-mono text-[0.82rem] text-foreground">{updateId}</div>
+          </div>
+          <Copyable
+            value={updateId}
+            label="update ID"
+          />
+        </div>
+      )}
+      <PrimaryButton
+        type="submit"
+        className="w-full"
+        disabled={busy || !jsonValid}
+      >
+        {busy ? 'Creating...' : 'Create contract'}
+      </PrimaryButton>
+    </form>
+  )
+}
diff --git a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
new file mode 100644
index 00000000..40adf289
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
@@ -0,0 +1,98 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import { CreateContractUtil } from '@/components/utils/CreateContractUtil'
+import type { createContract as CreateContractFn } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderUtil = (createContract: typeof CreateContractFn): void => {
+  render(
+    <TooltipProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <CreateContractUtil
+          account={ACCOUNT}
+          createContract={createContract}
+        />
+      </VaultContext.Provider>
+    </TooltipProvider>,
+  )
+}
+
+describe('CreateContractUtil', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('submits a create command and shows a copyable update id', async () => {
+    const calls: Parameters<typeof CreateContractFn>[0][] = []
+    const createContract = (async (params) => {
+      calls.push(params)
+      return { updateId: 'update-1', completionOffset: 42 }
+    }) as typeof CreateContractFn
+    renderUtil(createContract)
+
+    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
+    fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
+      target: { value: JSON.stringify({ admin: 'alice::party' }) },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+
+    await waitFor(() => assert.equal(calls.length, 1))
+    assert.equal(calls[0]?.account.partyId, 'alice::party')
+    assert.equal(calls[0]?.templateId, 'pkg:Module:Template')
+    assert.deepEqual(calls[0]?.createArguments, { admin: 'alice::party' })
+    await screen.findByText(/update-1/)
+    assert.ok(screen.getByRole('button', { name: /Copy update ID/i }))
+  })
+
+  it('disables submit while the JSON is invalid', async () => {
+    const createContract = (async () => ({ updateId: 'x' })) as typeof CreateContractFn
+    renderUtil(createContract)
+    fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
+      target: { value: '{ broken' },
+    })
+    assert.equal(
+      (screen.getByRole('button', { name: 'Create contract' }) as HTMLButtonElement).disabled,
+      true,
+    )
+  })
+})

From 7a3c75e12136cebf4d1564df58a0993b2f3df9d4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:27:00 -0300
Subject: [PATCH 045/121] feat(carpincho-wallet): add ExerciseChoiceUtil
 component

---
 .../components/utils/ExerciseChoiceUtil.tsx   | 152 ++++++++++++++++++
 .../utils/ExerciseChoiceUtil.test.tsx         | 102 ++++++++++++
 2 files changed, 254 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
 create mode 100644 carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx

diff --git a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
new file mode 100644
index 00000000..3bb71d29
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
@@ -0,0 +1,152 @@
+import { useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { PrimaryButton } from '@/components/ui/Button'
+import { Copyable } from '@/components/ui/Copyable'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import { JsonField } from '@/components/utils/JsonField'
+import { exerciseContract as defaultExerciseContract } from '@/ledger/contracts'
+import { parseJsonObject } from '@/utils/json'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+interface ExerciseChoiceUtilProps {
+  account: AccountPublic
+  exerciseContract?: typeof defaultExerciseContract
+}
+
+// Submits one generic ExerciseCommand and surfaces the resulting update id for copying.
+export const ExerciseChoiceUtil = ({
+  account,
+  exerciseContract = defaultExerciseContract,
+}: ExerciseChoiceUtilProps): JSX.Element => {
+  const vault = useVault()
+  const [templateId, setTemplateId] = useState('')
+  const [contractId, setContractId] = useState('')
+  const [choice, setChoice] = useState('')
+  const [json, setJson] = useState('{}')
+  const [jsonValid, setJsonValid] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+  const [updateId, setUpdateId] = useState<string | undefined>()
+
+  const onSubmit = async (): Promise<void> => {
+    const trimmedTemplateId = templateId.trim()
+    const trimmedContractId = contractId.trim()
+    const trimmedChoice = choice.trim()
+    if (trimmedTemplateId === '') {
+      setError('Template ID is required')
+      return
+    }
+    if (trimmedContractId === '') {
+      setError('Contract ID is required')
+      return
+    }
+    if (trimmedChoice === '') {
+      setError('Choice is required')
+      return
+    }
+    setBusy(true)
+    setError(undefined)
+    setUpdateId(undefined)
+    try {
+      const choiceArgument = parseJsonObject(json, 'Choice argument')
+      const result = await exerciseContract({
+        account,
+        templateId: trimmedTemplateId,
+        contractId: trimmedContractId,
+        choice: trimmedChoice,
+        choiceArgument,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setUpdateId(result.updateId)
+      toast.success('Choice exercised')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-4"
+      onSubmit={(event) => {
+        event.preventDefault()
+        void onSubmit()
+      }}
+    >
+      <label
+        htmlFor="exercise-template-id"
+        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+      >
+        Template ID
+        <TextInput
+          id="exercise-template-id"
+          value={templateId}
+          onChange={(event) => setTemplateId(event.currentTarget.value)}
+          placeholder="package:Module:TemplateOrInterface"
+          className="font-mono text-[0.9rem] normal-case tracking-normal"
+        />
+      </label>
+      <label
+        htmlFor="exercise-contract-id"
+        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+      >
+        Contract ID
+        <TextInput
+          id="exercise-contract-id"
+          value={contractId}
+          onChange={(event) => setContractId(event.currentTarget.value)}
+          placeholder="active contract id"
+          className="font-mono text-[0.9rem] normal-case tracking-normal"
+        />
+      </label>
+      <label
+        htmlFor="exercise-choice"
+        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+      >
+        Choice
+        <TextInput
+          id="exercise-choice"
+          value={choice}
+          onChange={(event) => setChoice(event.currentTarget.value)}
+          placeholder="Template_Choice"
+          className="font-mono text-[0.9rem] normal-case tracking-normal"
+        />
+      </label>
+      <JsonField
+        id="exercise-choice-argument-json"
+        label="Choice argument JSON"
+        value={json}
+        onChange={setJson}
+        onValidityChange={setJsonValid}
+      />
+      {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+      {updateId === undefined ? null : (
+        <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
+          <div className="min-w-0">
+            <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
+              Update ID
+            </div>
+            <div className="break-all font-mono text-[0.82rem] text-foreground">{updateId}</div>
+          </div>
+          <Copyable
+            value={updateId}
+            label="update ID"
+          />
+        </div>
+      )}
+      <PrimaryButton
+        type="submit"
+        className="w-full"
+        disabled={busy || !jsonValid}
+      >
+        {busy ? 'Exercising...' : 'Exercise choice'}
+      </PrimaryButton>
+    </form>
+  )
+}
diff --git a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
new file mode 100644
index 00000000..49aa44e0
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
@@ -0,0 +1,102 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import { ExerciseChoiceUtil } from '@/components/utils/ExerciseChoiceUtil'
+import type { exerciseContract as ExerciseContractFn } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderUtil = (exerciseContract: typeof ExerciseContractFn): void => {
+  render(
+    <TooltipProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <ExerciseChoiceUtil
+          account={ACCOUNT}
+          exerciseContract={exerciseContract}
+        />
+      </VaultContext.Provider>
+    </TooltipProvider>,
+  )
+}
+
+describe('ExerciseChoiceUtil', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('submits an exercise command and shows a copyable update id', async () => {
+    const calls: Parameters<typeof ExerciseContractFn>[0][] = []
+    const exerciseContract = (async (params) => {
+      calls.push(params)
+      return { updateId: 'exercise-update-1', completionOffset: 43 }
+    }) as typeof ExerciseContractFn
+    renderUtil(exerciseContract)
+
+    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
+    await userEvent.type(screen.getByLabelText('Contract ID'), 'cid-1')
+    await userEvent.type(screen.getByLabelText('Choice'), 'Template_DoThing')
+    fireEvent.change(screen.getByLabelText('Choice argument JSON'), {
+      target: { value: JSON.stringify({ receiver: 'bob::party', amount: '5.0' }) },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
+
+    await waitFor(() => assert.equal(calls.length, 1))
+    assert.equal(calls[0]?.account.partyId, 'alice::party')
+    assert.equal(calls[0]?.templateId, 'pkg:Module:Template')
+    assert.equal(calls[0]?.contractId, 'cid-1')
+    assert.equal(calls[0]?.choice, 'Template_DoThing')
+    assert.deepEqual(calls[0]?.choiceArgument, { receiver: 'bob::party', amount: '5.0' })
+    await screen.findByText(/exercise-update-1/)
+    assert.ok(screen.getByRole('button', { name: /Copy update ID/i }))
+  })
+
+  it('disables submit while the choice argument JSON is invalid', async () => {
+    const exerciseContract = (async () => ({ updateId: 'x' })) as typeof ExerciseContractFn
+    renderUtil(exerciseContract)
+    fireEvent.change(screen.getByLabelText('Choice argument JSON'), {
+      target: { value: '{ broken' },
+    })
+    assert.equal(
+      (screen.getByRole('button', { name: 'Exercise choice' }) as HTMLButtonElement).disabled,
+      true,
+    )
+  })
+})

From 570bb06abc17cec8af3cfbe7e74e7f84aacdd4aa Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:34:16 -0300
Subject: [PATCH 046/121] feat(carpincho-wallet): add ActiveContractsUtil with
 collapsible cards

---
 .../components/utils/ActiveContractsUtil.tsx  | 153 ++++++++++++++++++
 .../utils/ActiveContractsUtil.test.tsx        |  75 +++++++++
 2 files changed, 228 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
 create mode 100644 carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
new file mode 100644
index 00000000..3d83244a
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Alert } from '@/components/ui/Alert'
+import { SecondaryButton } from '@/components/ui/Button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
+import { Copyable } from '@/components/ui/Copyable'
+import { CHEVRON_DOWN_ICON } from '@/components/ui/icons'
+import { JsonView } from '@/components/ui/JsonView'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import { type ActiveContract, listActiveContracts as defaultList } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+
+interface ActiveContractsUtilProps {
+  account: AccountPublic
+  listActiveContracts?: typeof defaultList
+}
+
+// One active contract as a collapsible card: id first, args behind an expander.
+const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
+  <Collapsible className="rounded-md border border-border bg-surface">
+    <div className="flex items-center gap-2 p-3">
+      <CollapsibleTrigger className="group min-w-0 flex-1 text-left">
+        <span className="grid size-5 shrink-0 place-items-center text-muted-foreground transition-transform group-data-[state=open]:rotate-180">
+          {CHEVRON_DOWN_ICON}
+        </span>
+        <span className="min-w-0">
+          <span className="block text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
+            Contract ID
+          </span>
+          <span className="block truncate font-mono text-[0.82rem] text-foreground">
+            {contract.contractId}
+          </span>
+        </span>
+      </CollapsibleTrigger>
+      <Copyable
+        value={contract.contractId}
+        label="contract ID"
+      />
+    </div>
+    <CollapsibleContent className="border-t border-border px-3 pb-3 pt-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0">
+          <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
+            Template
+          </div>
+          <div className="break-all font-mono text-[0.82rem] text-muted-foreground">
+            {contract.templateId}
+          </div>
+        </div>
+        <Copyable
+          value={contract.templateId}
+          label="template ID"
+        />
+      </div>
+      {contract.createdOffset === undefined ? null : (
+        <div className="mt-2 flex items-center gap-2">
+          <span className="text-[0.8rem] font-medium text-muted-foreground">
+            Offset {contract.createdOffset}
+          </span>
+          <Copyable
+            value={String(contract.createdOffset)}
+            label="offset"
+          />
+        </div>
+      )}
+      <JsonView
+        value={contract.createArgument}
+        className="mt-3"
+      />
+    </CollapsibleContent>
+  </Collapsible>
+)
+
+// Browses the active contract set with an optional template filter.
+export const ActiveContractsUtil = ({
+  account,
+  listActiveContracts = defaultList,
+}: ActiveContractsUtilProps): JSX.Element => {
+  const [filterTemplateId, setFilterTemplateId] = useState('')
+  const [contracts, setContracts] = useState<ActiveContract[]>([])
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | undefined>()
+  const [loaded, setLoaded] = useState(false)
+
+  const refresh = useCallback(
+    async (templateId: string): Promise<void> => {
+      setBusy(true)
+      setError(undefined)
+      try {
+        setContracts(
+          await listActiveContracts({
+            partyId: account.partyId,
+            ...(templateId.trim() === '' ? {} : { templateId: templateId.trim() }),
+          }),
+        )
+        setLoaded(true)
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err)
+        setError(message)
+        toast.error(message)
+      } finally {
+        setBusy(false)
+      }
+    },
+    [account.partyId, listActiveContracts],
+  )
+
+  useEffect(() => {
+    void refresh('')
+  }, [refresh])
+
+  return (
+    <section className="flex flex-col gap-4">
+      <label
+        htmlFor="filter-template-id"
+        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+      >
+        Filter template ID
+        <TextInput
+          id="filter-template-id"
+          value={filterTemplateId}
+          onChange={(event) => setFilterTemplateId(event.currentTarget.value)}
+          placeholder="optional"
+          className="font-mono text-[0.9rem] normal-case tracking-normal"
+        />
+      </label>
+      <SecondaryButton
+        className="w-full"
+        disabled={busy}
+        onClick={() => {
+          void refresh(filterTemplateId)
+        }}
+      >
+        {busy ? 'Refreshing...' : 'Refresh contracts'}
+      </SecondaryButton>
+      {error === undefined ? null : <Alert variant="error">{error}</Alert>}
+      {contracts.length === 0 ? (
+        <p className="rounded-md border border-dashed border-border px-3 py-6 text-center text-[0.9rem] font-medium text-muted-foreground">
+          {loaded ? 'No active contracts.' : 'Loading active contracts...'}
+        </p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {contracts.map((contract) => (
+            <ContractCard
+              key={contract.contractId}
+              contract={contract}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
new file mode 100644
index 00000000..8f85fe47
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -0,0 +1,75 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import { ActiveContractsUtil } from '@/components/utils/ActiveContractsUtil'
+import type { ActiveContract, listActiveContracts as ListFn } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const CONTRACT: ActiveContract = {
+  contractId: 'cid-1',
+  templateId: 'pkg:Module:Template',
+  createArgument: { admin: 'alice::party' },
+  createdOffset: 42,
+}
+
+const renderUtil = (listActiveContracts: typeof ListFn): void => {
+  render(
+    <TooltipProvider>
+      <ActiveContractsUtil
+        account={ACCOUNT}
+        listActiveContracts={listActiveContracts}
+      />
+    </TooltipProvider>,
+  )
+}
+
+describe('ActiveContractsUtil', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('auto-loads contracts on mount and expands the JSON on demand', async () => {
+    const listActiveContracts = (async () => [CONTRACT]) as typeof ListFn
+    renderUtil(listActiveContracts)
+
+    await screen.findByText('cid-1')
+    assert.ok(screen.getByRole('button', { name: /Copy contract ID/i }))
+
+    await userEvent.click(screen.getByRole('button', { name: /cid-1/ }))
+    await screen.findByText(/admin/)
+  })
+
+  it('passes the optional template filter to the helper on refresh', async () => {
+    const calls: Parameters<typeof ListFn>[0][] = []
+    const listActiveContracts = (async (params) => {
+      calls.push(params)
+      return [CONTRACT]
+    }) as typeof ListFn
+    renderUtil(listActiveContracts)
+
+    await waitFor(() => assert.ok(calls.length >= 1))
+    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
+    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+
+    await waitFor(() =>
+      assert.deepEqual(calls.at(-1), {
+        partyId: 'alice::party',
+        templateId: 'pkg:Module:Template',
+      }),
+    )
+  })
+})

From 73e655a2180a1c64f73eedfbe3aad4b898c75707 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:39:27 -0300
Subject: [PATCH 047/121] refactor(carpincho-wallet): restyle DAR upload as a
 dropzone

---
 .../src/components/DarUploadPanel.tsx         | 41 +++++++++++++------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index 08f3a1cd..c7f76b75 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -39,19 +39,34 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
   }
 
   return (
-    <section className="flex flex-col gap-4 px-1 py-2">
-      <label className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground">
-        DAR file
-        <input
-          type="file"
-          accept=".dar,application/octet-stream"
-          className="block w-full rounded-md border border-border bg-surface px-3 py-2 text-[0.95rem] font-medium normal-case tracking-normal text-foreground file:mr-3 file:rounded-sm file:border-0 file:bg-primary-soft file:px-3 file:py-1.5 file:text-primary file:font-semibold"
-          onChange={(event) => {
-            setUploadedFileName(undefined)
-            setFile(event.currentTarget.files?.[0])
-          }}
-        />
-      </label>
+    <section className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <label
+          htmlFor="dar-file"
+          className="text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+        >
+          DAR file
+        </label>
+        <div className="rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center">
+          <input
+            id="dar-file"
+            type="file"
+            accept=".dar,application/octet-stream"
+            className="block w-full text-[0.9rem] font-medium normal-case tracking-normal text-foreground file:mr-3 file:rounded-sm file:border-0 file:bg-primary-soft file:px-3 file:py-1.5 file:font-semibold file:text-primary"
+            onChange={(event) => {
+              setUploadedFileName(undefined)
+              setFile(event.currentTarget.files?.[0])
+            }}
+          />
+          {file === undefined ? (
+            <p className="mt-3 text-[0.82rem] font-medium text-muted-foreground">
+              Choose a compiled .dar archive to install.
+            </p>
+          ) : (
+            <p className="mt-3 truncate font-mono text-[0.82rem] text-foreground">{file.name}</p>
+          )}
+        </div>
+      </div>
       <PrimaryButton
         className="w-full"
         disabled={file === undefined || uploading}

From 4e22f534d8b5916d3555e3b8394388af019a83d7 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:42:59 -0300
Subject: [PATCH 048/121] feat(carpincho-wallet): add UtilDetail shell

---
 .../src/components/utils/UtilDetail.tsx       | 27 ++++++++++++++++++
 .../test/components/utils/UtilDetail.test.tsx | 28 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/UtilDetail.tsx
 create mode 100644 carpincho-wallet/test/components/utils/UtilDetail.test.tsx

diff --git a/carpincho-wallet/src/components/utils/UtilDetail.tsx b/carpincho-wallet/src/components/utils/UtilDetail.tsx
new file mode 100644
index 00000000..5f71dab0
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/UtilDetail.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react'
+import { ICON_BUTTON_CLASS } from '@/components/ui/Button'
+import { BACK_ICON } from '@/components/ui/icons'
+
+interface UtilDetailProps {
+  title: string
+  onBack: () => void
+  children: ReactNode
+}
+
+// Shared back-bar + title shell that hosts a single util's content.
+export const UtilDetail = ({ title, onBack, children }: UtilDetailProps): JSX.Element => (
+  <div className="flex min-h-0 flex-1 flex-col">
+    <div className="sticky top-0 z-10 flex shrink-0 items-center gap-2 border-b border-border bg-background/95 pb-2.5 pt-1.5 backdrop-blur">
+      <button
+        type="button"
+        aria-label="Back"
+        onClick={onBack}
+        className={`${ICON_BUTTON_CLASS} size-8 rounded-md`}
+      >
+        {BACK_ICON}
+      </button>
+      <h2 className="m-0 text-[1rem] font-semibold text-foreground">{title}</h2>
+    </div>
+    <div className="min-h-0 flex-1 overflow-y-auto px-1 py-3">{children}</div>
+  </div>
+)
diff --git a/carpincho-wallet/test/components/utils/UtilDetail.test.tsx b/carpincho-wallet/test/components/utils/UtilDetail.test.tsx
new file mode 100644
index 00000000..c94aeef5
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/UtilDetail.test.tsx
@@ -0,0 +1,28 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { UtilDetail } from '@/components/utils/UtilDetail'
+
+describe('UtilDetail', () => {
+  afterEach(cleanup)
+
+  it('shows the title and calls onBack when the back button is clicked', async () => {
+    let backs = 0
+    render(
+      <UtilDetail
+        title="Create contract"
+        onBack={() => {
+          backs += 1
+        }}
+      >
+        <p>body</p>
+      </UtilDetail>,
+    )
+
+    assert.ok(screen.getByText('Create contract'))
+    assert.ok(screen.getByText('body'))
+    await userEvent.click(screen.getByRole('button', { name: 'Back' }))
+    assert.equal(backs, 1)
+  })
+})

From f663b2a75e209386eae56a444a5174f1a73904b9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:47:00 -0300
Subject: [PATCH 049/121] feat(carpincho-wallet): add UtilsList with faucet
 action and drill-in rows

---
 carpincho-wallet/src/components/ui/icons.tsx  |  81 ++++++++++
 .../src/components/utils/UtilsList.tsx        | 147 ++++++++++++++++++
 .../test/components/utils/UtilsList.test.tsx  |  85 ++++++++++
 3 files changed, 313 insertions(+)
 create mode 100644 carpincho-wallet/src/components/utils/UtilsList.tsx
 create mode 100644 carpincho-wallet/test/components/utils/UtilsList.test.tsx

diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index 112a7513..69f91ab4 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -519,6 +519,87 @@ export const LOCK_ICON = (
   </svg>
 )
 
+export const CREATE_ICON = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 5v14M5 12h14" />
+  </svg>
+)
+
+export const EXERCISE_ICON = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polygon points="6 4 20 12 6 20 6 4" />
+  </svg>
+)
+
+export const CONTRACTS_ICON = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <path d="M14 2v6h6M8 13h8M8 17h6" />
+  </svg>
+)
+
+export const UPLOAD_ICON = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
+  </svg>
+)
+
+export const DROPLET_ICON = (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M12 2.7l5.3 5.3a7.5 7.5 0 1 1-10.6 0z" />
+  </svg>
+)
+
 // Official WalletConnect logo mark, in brand blue.
 export const WALLET_CONNECT_ICON = (
   <svg
diff --git a/carpincho-wallet/src/components/utils/UtilsList.tsx b/carpincho-wallet/src/components/utils/UtilsList.tsx
new file mode 100644
index 00000000..1105fab3
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/UtilsList.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { type AmuletTapApi, tapAmulet as defaultTapAmulet } from '@/cip56/amuletPreapproval'
+import {
+  CHEVRON_RIGHT_ICON,
+  CONTRACTS_ICON,
+  CREATE_ICON,
+  DROPLET_ICON,
+  EXERCISE_ICON,
+  SPINNER_ICON,
+  UPLOAD_ICON,
+} from '@/components/ui/icons'
+import { toast } from '@/components/ui/toast'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export type UtilKey = 'create' | 'exercise' | 'contracts' | 'dar'
+
+interface UtilRow {
+  key: UtilKey
+  icon: JSX.Element
+  title: string
+  subtitle: string
+}
+
+const UTIL_ROWS: UtilRow[] = [
+  {
+    key: 'create',
+    icon: CREATE_ICON,
+    title: 'Create contract',
+    subtitle: 'Submit a CreateCommand',
+  },
+  {
+    key: 'exercise',
+    icon: EXERCISE_ICON,
+    title: 'Exercise choice',
+    subtitle: 'Call a choice on a contract',
+  },
+  {
+    key: 'contracts',
+    icon: CONTRACTS_ICON,
+    title: 'Active contracts',
+    subtitle: 'Browse & filter the ACS',
+  },
+  { key: 'dar', icon: UPLOAD_ICON, title: 'Upload DAR', subtitle: 'Install a .dar archive' },
+]
+
+const ROW_CLASS =
+  'flex w-full items-center gap-3 rounded-md border border-border bg-surface px-3 py-3 text-left ' +
+  'outline-none transition-colors enabled:hover:border-primary/60 enabled:hover:bg-primary-soft/40 ' +
+  'focus-visible:shadow-focus disabled:opacity-70'
+const ICON_WRAP_CLASS = 'grid size-9 shrink-0 place-items-center rounded-full bg-muted text-primary'
+const GROUP_LABEL_CLASS =
+  'px-1 pb-1.5 pt-1 text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground'
+
+interface UtilsListProps {
+  account: AccountPublic
+  tapApi?: AmuletTapApi
+  onSelect: (util: UtilKey) => void
+}
+
+// Utils landing: a faucet action row plus drill-in rows for the ledger tools.
+export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.Element => {
+  const vault = useVault()
+  const [tapping, setTapping] = useState(false)
+  const tap = tapApi?.tapAmulet ?? defaultTapAmulet
+
+  const onTap = async (): Promise<void> => {
+    setTapping(true)
+    const progressId = toast.info('Tapping 100 AMT...')
+    try {
+      await tap({
+        account,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      toast.dismiss(progressId)
+      toast.success('Tapped 100 AMT')
+    } catch (err) {
+      toast.dismiss(progressId)
+      toast.error(err instanceof Error ? err.message : 'Amulet tap failed')
+    } finally {
+      setTapping(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4 px-1 py-2">
+      <section className="flex flex-col gap-2">
+        <div className={GROUP_LABEL_CLASS}>Faucet</div>
+        <button
+          type="button"
+          className={ROW_CLASS}
+          disabled={tapping}
+          onClick={() => {
+            void onTap()
+          }}
+        >
+          <span
+            aria-hidden="true"
+            className={ICON_WRAP_CLASS}
+          >
+            {tapping ? SPINNER_ICON : DROPLET_ICON}
+          </span>
+          <span className="min-w-0 flex-1">
+            <span className="block text-[0.94rem] font-semibold text-foreground">Tap Amulet</span>
+            <span className="block text-[0.82rem] font-medium text-muted-foreground">
+              Get 100 AMT from the faucet
+            </span>
+          </span>
+        </button>
+      </section>
+
+      <section className="flex flex-col gap-2">
+        <div className={GROUP_LABEL_CLASS}>Ledger tools</div>
+        {UTIL_ROWS.map((row) => (
+          <button
+            key={row.key}
+            type="button"
+            className={ROW_CLASS}
+            onClick={() => onSelect(row.key)}
+          >
+            <span
+              aria-hidden="true"
+              className={ICON_WRAP_CLASS}
+            >
+              {row.icon}
+            </span>
+            <span className="min-w-0 flex-1">
+              <span className="block text-[0.94rem] font-semibold text-foreground">
+                {row.title}
+              </span>
+              <span className="block text-[0.82rem] font-medium text-muted-foreground">
+                {row.subtitle}
+              </span>
+            </span>
+            <span
+              aria-hidden="true"
+              className="shrink-0 text-muted-foreground"
+            >
+              {CHEVRON_RIGHT_ICON}
+            </span>
+          </button>
+        ))}
+      </section>
+    </div>
+  )
+}
diff --git a/carpincho-wallet/test/components/utils/UtilsList.test.tsx b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
new file mode 100644
index 00000000..85dd191f
--- /dev/null
+++ b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
@@ -0,0 +1,85 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
+import { toast } from '@/components/ui/toast'
+import { UtilsList } from '@/components/utils/UtilsList'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+describe('UtilsList', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('drills into a util when its row is clicked', async () => {
+    const selected: string[] = []
+    render(
+      <VaultContext.Provider value={baseVault()}>
+        <UtilsList
+          account={ACCOUNT}
+          onSelect={(util) => selected.push(util)}
+        />
+      </VaultContext.Provider>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Create contract/ }))
+    assert.deepEqual(selected, ['create'])
+  })
+
+  it('runs the faucet from its action row', async () => {
+    const tapped: string[] = []
+    const tapApi: AmuletTapApi = {
+      tapAmulet: async ({ account }) => {
+        tapped.push(account.partyId)
+        return { updateId: 'tap-1' }
+      },
+    }
+    render(
+      <VaultContext.Provider value={baseVault()}>
+        <UtilsList
+          account={ACCOUNT}
+          tapApi={tapApi}
+          onSelect={() => undefined}
+        />
+      </VaultContext.Provider>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /Tap Amulet/ }))
+    await waitFor(() => assert.deepEqual(tapped, ['alice::party']))
+  })
+})

From 86f66f5fea48e3698cb6df2891701329ed5602de Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:52:42 -0300
Subject: [PATCH 050/121] feat(carpincho-wallet): replace LedgerToolsPanel with
 master/detail UtilsPanel

---
 carpincho-wallet/src/components/HomeTabs.tsx  |   4 +-
 .../src/components/LedgerToolsPanel.tsx       | 398 ------------------
 .../src/components/UtilsPanel.tsx             |  82 ++++
 .../test/components/LedgerToolsPanel.test.tsx | 271 ------------
 .../test/components/UtilsPanel.test.tsx       | 137 ++++++
 5 files changed, 221 insertions(+), 671 deletions(-)
 delete mode 100644 carpincho-wallet/src/components/LedgerToolsPanel.tsx
 create mode 100644 carpincho-wallet/src/components/UtilsPanel.tsx
 delete mode 100644 carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
 create mode 100644 carpincho-wallet/test/components/UtilsPanel.test.tsx

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 5a8fe572..41b1efd0 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useState } from 'react'
 import { ActivityPanel } from '@/components/ActivityPanel'
 import { AssetsPanel } from '@/components/AssetsPanel'
-import { LedgerToolsPanel } from '@/components/LedgerToolsPanel'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
+import { UtilsPanel } from '@/components/UtilsPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
@@ -99,7 +99,7 @@ export const HomeTabs = ({
         value="utils"
         className={TAB_CONTENT_CLASS}
       >
-        <LedgerToolsPanel account={account} />
+        <UtilsPanel account={account} />
       </TabContent>
     </Tabs>
   )
diff --git a/carpincho-wallet/src/components/LedgerToolsPanel.tsx b/carpincho-wallet/src/components/LedgerToolsPanel.tsx
deleted file mode 100644
index 782e6817..00000000
--- a/carpincho-wallet/src/components/LedgerToolsPanel.tsx
+++ /dev/null
@@ -1,398 +0,0 @@
-import { useState } from 'react'
-import { DarUploadPanel } from '@/components/DarUploadPanel'
-import { Alert } from '@/components/ui/Alert'
-import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
-import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
-import { INPUT_CLASS, TextInput } from '@/components/ui/TextInput'
-import { toast } from '@/components/ui/toast'
-import {
-  type ActiveContract,
-  createContract,
-  exerciseContract,
-  listActiveContracts,
-} from '@/ledger/contracts'
-import { cn } from '@/utils/cn'
-import { formatJsonInput, parseJsonObject, prettyJson } from '@/utils/json'
-import type { AccountPublic } from '@/vault/types'
-import { useVault } from '@/vault/useVault'
-
-export interface LedgerToolsApi {
-  createContract: typeof createContract
-  exerciseContract: typeof exerciseContract
-  listActiveContracts: typeof listActiveContracts
-}
-
-interface LedgerToolsPanelProps {
-  account?: AccountPublic
-  api?: LedgerToolsApi
-}
-
-const defaultApi: LedgerToolsApi = { createContract, exerciseContract, listActiveContracts }
-
-const EMPTY_JSON = '{}'
-
-// Formats a ledger JSON textarea when possible without interrupting partially typed input.
-const formatJsonTextarea = (
-  value: string,
-  setValue: (value: string) => void,
-  label: string,
-): void => {
-  try {
-    setValue(formatJsonInput(value, label))
-  } catch {
-    return
-  }
-}
-
-// Renders one active contract with the id first for copying/inspection.
-const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
-  <article className="rounded-md border border-border bg-surface p-3">
-    <div className="flex flex-col gap-1">
-      <span className="text-[0.72rem] font-semibold uppercase text-muted-foreground">
-        Contract ID
-      </span>
-      <span className="break-all font-mono text-[0.82rem] text-foreground">
-        {contract.contractId}
-      </span>
-    </div>
-    <div className="mt-3 grid gap-1">
-      <span className="text-[0.72rem] font-semibold uppercase text-muted-foreground">Template</span>
-      <span className="break-all font-mono text-[0.82rem] text-muted-foreground">
-        {contract.templateId}
-      </span>
-    </div>
-    {contract.createdOffset === undefined ? null : (
-      <p className="mt-3 text-[0.8rem] font-medium text-muted-foreground">
-        Offset {contract.createdOffset}
-      </p>
-    )}
-    <pre className="mt-3 max-h-48 overflow-auto rounded-md border border-border bg-muted p-3 font-mono text-[0.78rem] leading-relaxed text-foreground">
-      {prettyJson(contract.createArgument)}
-    </pre>
-  </article>
-)
-
-// Development ledger utility for generic creates and active-contract inspection.
-export const LedgerToolsPanel = ({
-  account,
-  api = defaultApi,
-}: LedgerToolsPanelProps): JSX.Element => {
-  const vault = useVault()
-  const [createTemplateId, setCreateTemplateId] = useState('')
-  const [createJson, setCreateJson] = useState(EMPTY_JSON)
-  const [exerciseTemplateId, setExerciseTemplateId] = useState('')
-  const [exerciseContractId, setExerciseContractId] = useState('')
-  const [exerciseChoice, setExerciseChoice] = useState('')
-  const [exerciseJson, setExerciseJson] = useState(EMPTY_JSON)
-  const [filterTemplateId, setFilterTemplateId] = useState('')
-  const [contracts, setContracts] = useState<ActiveContract[]>([])
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | undefined>()
-  const [createdUpdateId, setCreatedUpdateId] = useState<string | undefined>()
-  const [exercisedUpdateId, setExercisedUpdateId] = useState<string | undefined>()
-
-  // Reloads ACS for the active party and preserves any optional template filter.
-  const refreshContracts = async (templateId = filterTemplateId): Promise<void> => {
-    if (account === undefined) {
-      return
-    }
-    setBusy(true)
-    setError(undefined)
-    try {
-      setContracts(
-        await api.listActiveContracts({
-          partyId: account.partyId,
-          ...(templateId.trim() === '' ? {} : { templateId: templateId.trim() }),
-        }),
-      )
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      setError(message)
-      toast.error(message)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  // Submits one generic CreateCommand and refreshes ACS so created CIDs are visible.
-  const onCreate = async (): Promise<void> => {
-    if (account === undefined) {
-      return
-    }
-    const templateId = createTemplateId.trim()
-    if (templateId === '') {
-      setError('Template ID is required')
-      return
-    }
-    setBusy(true)
-    setError(undefined)
-    setCreatedUpdateId(undefined)
-    try {
-      const createArguments = parseJsonObject(createJson, 'Create arguments')
-      setCreateJson(prettyJson(createArguments))
-      const result = await api.createContract({
-        account,
-        templateId,
-        createArguments,
-        signMessage: vault.signMessage,
-        recordTransaction: vault.recordTransaction,
-      })
-      setCreatedUpdateId(result.updateId)
-      toast.success('Contract created')
-      await refreshContracts(templateId)
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      setError(message)
-      toast.error(message)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  // Submits one generic ExerciseCommand and refreshes ACS because the choice may archive/create.
-  const onExercise = async (): Promise<void> => {
-    if (account === undefined) {
-      return
-    }
-    const templateId = exerciseTemplateId.trim()
-    const contractId = exerciseContractId.trim()
-    const choice = exerciseChoice.trim()
-    if (templateId === '') {
-      setError('Exercise template ID is required')
-      return
-    }
-    if (contractId === '') {
-      setError('Contract ID is required')
-      return
-    }
-    if (choice === '') {
-      setError('Choice is required')
-      return
-    }
-    setBusy(true)
-    setError(undefined)
-    setExercisedUpdateId(undefined)
-    try {
-      const choiceArgument = parseJsonObject(exerciseJson, 'Choice argument')
-      setExerciseJson(prettyJson(choiceArgument))
-      const result = await api.exerciseContract({
-        account,
-        templateId,
-        contractId,
-        choice,
-        choiceArgument,
-        signMessage: vault.signMessage,
-        recordTransaction: vault.recordTransaction,
-      })
-      setExercisedUpdateId(result.updateId)
-      toast.success('Choice exercised')
-      await refreshContracts()
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      setError(message)
-      toast.error(message)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  if (account === undefined) {
-    return (
-      <section className="px-1 py-2">
-        <Alert variant="warning">Create an account before using ledger tools.</Alert>
-      </section>
-    )
-  }
-
-  return (
-    <Tabs
-      defaultValue="create"
-      className="flex min-h-0 flex-1 flex-col"
-    >
-      <TabsList className="gap-4">
-        <TabTrigger value="create">Create</TabTrigger>
-        <TabTrigger value="exercise">Exercise</TabTrigger>
-        <TabTrigger value="contracts">Contracts</TabTrigger>
-        <TabTrigger value="dar">DAR</TabTrigger>
-      </TabsList>
-      <TabContent
-        value="create"
-        className="min-h-0 overflow-y-auto px-1 py-3"
-      >
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={(event) => {
-            event.preventDefault()
-            void onCreate()
-          }}
-        >
-          <label
-            htmlFor="ledger-create-template-id"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Template ID
-            <TextInput
-              id="ledger-create-template-id"
-              value={createTemplateId}
-              onChange={(event) => setCreateTemplateId(event.currentTarget.value)}
-              placeholder="package:Module:Template"
-              className="font-mono text-[0.9rem] normal-case"
-            />
-          </label>
-          <label
-            htmlFor="ledger-create-arguments-json"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Create arguments JSON
-            <textarea
-              id="ledger-create-arguments-json"
-              value={createJson}
-              onChange={(event) => setCreateJson(event.currentTarget.value)}
-              onBlur={() => formatJsonTextarea(createJson, setCreateJson, 'Create arguments')}
-              spellCheck={false}
-              className={cn(INPUT_CLASS, 'min-h-44 resize-y font-mono text-[0.85rem] normal-case')}
-            />
-          </label>
-          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
-          {createdUpdateId === undefined ? null : (
-            <Alert variant="success">Created update {createdUpdateId}</Alert>
-          )}
-          <PrimaryButton
-            type="submit"
-            className="w-full"
-            disabled={busy}
-          >
-            {busy ? 'Creating...' : 'Create contract'}
-          </PrimaryButton>
-        </form>
-      </TabContent>
-      <TabContent
-        value="exercise"
-        className="min-h-0 overflow-y-auto px-1 py-3"
-      >
-        <form
-          className="flex flex-col gap-4"
-          onSubmit={(event) => {
-            event.preventDefault()
-            void onExercise()
-          }}
-        >
-          <label
-            htmlFor="ledger-exercise-template-id"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Exercise template ID
-            <TextInput
-              id="ledger-exercise-template-id"
-              value={exerciseTemplateId}
-              onChange={(event) => setExerciseTemplateId(event.currentTarget.value)}
-              placeholder="package:Module:TemplateOrInterface"
-              className="font-mono text-[0.9rem] normal-case"
-            />
-          </label>
-          <label
-            htmlFor="ledger-exercise-contract-id"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Contract ID
-            <TextInput
-              id="ledger-exercise-contract-id"
-              value={exerciseContractId}
-              onChange={(event) => setExerciseContractId(event.currentTarget.value)}
-              placeholder="active contract id"
-              className="font-mono text-[0.9rem] normal-case"
-            />
-          </label>
-          <label
-            htmlFor="ledger-exercise-choice"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Choice
-            <TextInput
-              id="ledger-exercise-choice"
-              value={exerciseChoice}
-              onChange={(event) => setExerciseChoice(event.currentTarget.value)}
-              placeholder="Template_Choice"
-              className="font-mono text-[0.9rem] normal-case"
-            />
-          </label>
-          <label
-            htmlFor="ledger-exercise-choice-json"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Choice argument JSON
-            <textarea
-              id="ledger-exercise-choice-json"
-              value={exerciseJson}
-              onChange={(event) => setExerciseJson(event.currentTarget.value)}
-              onBlur={() => formatJsonTextarea(exerciseJson, setExerciseJson, 'Choice argument')}
-              spellCheck={false}
-              className={cn(INPUT_CLASS, 'min-h-44 resize-y font-mono text-[0.85rem] normal-case')}
-            />
-          </label>
-          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
-          {exercisedUpdateId === undefined ? null : (
-            <Alert variant="success">Exercised update {exercisedUpdateId}</Alert>
-          )}
-          <PrimaryButton
-            type="submit"
-            className="w-full"
-            disabled={busy}
-          >
-            {busy ? 'Exercising...' : 'Exercise choice'}
-          </PrimaryButton>
-        </form>
-      </TabContent>
-      <TabContent
-        value="contracts"
-        className="min-h-0 overflow-y-auto px-1 py-3"
-      >
-        <section className="flex flex-col gap-4">
-          <label
-            htmlFor="ledger-filter-template-id"
-            className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase text-muted-foreground"
-          >
-            Filter template ID
-            <TextInput
-              id="ledger-filter-template-id"
-              value={filterTemplateId}
-              onChange={(event) => setFilterTemplateId(event.currentTarget.value)}
-              placeholder="optional"
-              className="font-mono text-[0.9rem] normal-case"
-            />
-          </label>
-          <SecondaryButton
-            className="w-full"
-            disabled={busy}
-            onClick={() => {
-              void refreshContracts()
-            }}
-          >
-            {busy ? 'Refreshing...' : 'Refresh contracts'}
-          </SecondaryButton>
-          {error === undefined ? null : <Alert variant="error">{error}</Alert>}
-          {contracts.length === 0 ? (
-            <p className="rounded-md border border-dashed border-border px-3 py-6 text-center text-[0.9rem] font-medium text-muted-foreground">
-              No active contracts loaded.
-            </p>
-          ) : (
-            <div className="flex flex-col gap-3">
-              {contracts.map((contract) => (
-                <ContractCard
-                  key={contract.contractId}
-                  contract={contract}
-                />
-              ))}
-            </div>
-          )}
-        </section>
-      </TabContent>
-      <TabContent
-        value="dar"
-        className="min-h-0 overflow-y-auto px-1 py-3"
-      >
-        <DarUploadPanel />
-      </TabContent>
-    </Tabs>
-  )
-}
diff --git a/carpincho-wallet/src/components/UtilsPanel.tsx b/carpincho-wallet/src/components/UtilsPanel.tsx
new file mode 100644
index 00000000..266b30a7
--- /dev/null
+++ b/carpincho-wallet/src/components/UtilsPanel.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react'
+import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
+import { DarUploadPanel } from '@/components/DarUploadPanel'
+import { Alert } from '@/components/ui/Alert'
+import { ActiveContractsUtil } from '@/components/utils/ActiveContractsUtil'
+import { CreateContractUtil } from '@/components/utils/CreateContractUtil'
+import { ExerciseChoiceUtil } from '@/components/utils/ExerciseChoiceUtil'
+import { UtilDetail } from '@/components/utils/UtilDetail'
+import { type UtilKey, UtilsList } from '@/components/utils/UtilsList'
+import { createContract, exerciseContract, listActiveContracts } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+
+export interface UtilsApi {
+  createContract: typeof createContract
+  exerciseContract: typeof exerciseContract
+  listActiveContracts: typeof listActiveContracts
+}
+
+const defaultApi: UtilsApi = { createContract, exerciseContract, listActiveContracts }
+
+const UTIL_TITLES: Record<UtilKey, string> = {
+  create: 'Create contract',
+  exercise: 'Exercise choice',
+  contracts: 'Active contracts',
+  dar: 'Upload DAR',
+}
+
+interface UtilsPanelProps {
+  account?: AccountPublic
+  api?: UtilsApi
+  tapApi?: AmuletTapApi
+}
+
+// Master/detail dev tools: a util list that drills into one util at a time.
+export const UtilsPanel = ({ account, api = defaultApi, tapApi }: UtilsPanelProps): JSX.Element => {
+  const [selected, setSelected] = useState<UtilKey | null>(null)
+
+  if (account === undefined) {
+    return (
+      <section className="px-1 py-2">
+        <Alert variant="warning">Create an account before using ledger tools.</Alert>
+      </section>
+    )
+  }
+
+  if (selected === null) {
+    return (
+      <UtilsList
+        account={account}
+        tapApi={tapApi}
+        onSelect={setSelected}
+      />
+    )
+  }
+
+  return (
+    <UtilDetail
+      title={UTIL_TITLES[selected]}
+      onBack={() => setSelected(null)}
+    >
+      {selected === 'create' && (
+        <CreateContractUtil
+          account={account}
+          createContract={api.createContract}
+        />
+      )}
+      {selected === 'exercise' && (
+        <ExerciseChoiceUtil
+          account={account}
+          exerciseContract={api.exerciseContract}
+        />
+      )}
+      {selected === 'contracts' && (
+        <ActiveContractsUtil
+          account={account}
+          listActiveContracts={api.listActiveContracts}
+        />
+      )}
+      {selected === 'dar' && <DarUploadPanel />}
+    </UtilDetail>
+  )
+}
diff --git a/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx b/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
deleted file mode 100644
index 5c7100f5..00000000
--- a/carpincho-wallet/test/components/LedgerToolsPanel.test.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, describe, it } from 'node:test'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { type LedgerToolsApi, LedgerToolsPanel } from '@/components/LedgerToolsPanel'
-import { toast } from '@/components/ui/toast'
-import type { ActiveContract } from '@/ledger/contracts'
-import type { AccountPublic } from '@/vault/types'
-import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
-
-const ACCOUNT: AccountPublic = {
-  // Active account fixture represents the party whose vault key signs generic create commands.
-  id: 'account-1',
-  name: 'Alice',
-  partyId: 'alice::party',
-  publicKeyBase64: 'pk',
-  network: 'canton:local',
-  isPrimary: true,
-  createdAt: 1,
-}
-
-const CONTRACT: ActiveContract = {
-  // ACS fixture is the contract row the Contracts tab should render after a refresh.
-  contractId: 'cid-1',
-  templateId: 'pkg:Module:Template',
-  createArgument: { admin: 'alice::party' },
-  createdOffset: 42,
-}
-
-const baseVault = (): VaultContextValue =>
-  ({
-    isLocked: false,
-    isLoading: false,
-    hasVault: true,
-    setup: async () => undefined,
-    unlock: async () => undefined,
-    lock: () => undefined,
-    destroyVault: () => undefined,
-    accounts: [ACCOUNT],
-    primary: ACCOUNT,
-    transactions: [],
-    setPrimary: async () => undefined,
-    addAccount: async () => ACCOUNT,
-    removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
-    signMessage: async () => 'signature',
-    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
-    changePassword: async () => undefined,
-    verifyPassword: () => true,
-    autoLockOption: 'never',
-    setAutoLockOption: () => undefined,
-  }) as VaultContextValue
-
-const renderPanel = (api: LedgerToolsApi, vault = baseVault()): void => {
-  render(
-    <VaultContext.Provider value={vault}>
-      <LedgerToolsPanel
-        account={ACCOUNT}
-        api={api}
-      />
-    </VaultContext.Provider>,
-  )
-}
-
-describe('LedgerToolsPanel', () => {
-  afterEach(() => {
-    // The panel emits toasts and owns form state, so reset the DOM and toast store per scenario.
-    cleanup()
-    toast.clear()
-  })
-
-  it('creates a contract from raw JSON and refreshes active contracts afterward', async () => {
-    // Scenario: a developer pastes a DAML template id and create arguments.
-    // Submitting should call the generic create helper with the active account and then refresh ACS
-    // so the newly visible contract id appears in the Contracts tab.
-    const createCalls: Parameters<LedgerToolsApi['createContract']>[0][] = []
-    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
-    const api: LedgerToolsApi = {
-      createContract: async (params) => {
-        createCalls.push(params)
-        return { updateId: 'update-1', completionOffset: 42 }
-      },
-      exerciseContract: async () => ({ updateId: 'unused' }),
-      listActiveContracts: async (params) => {
-        listCalls.push(params)
-        return [CONTRACT]
-      },
-    }
-    renderPanel(api)
-
-    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
-    fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
-      target: { value: JSON.stringify({ admin: 'alice::party' }) },
-    })
-    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
-
-    await waitFor(() => assert.equal(createCalls.length, 1))
-    assert.equal(createCalls[0]?.account.partyId, 'alice::party')
-    assert.equal(createCalls[0]?.templateId, 'pkg:Module:Template')
-    assert.deepEqual(createCalls[0]?.createArguments, { admin: 'alice::party' })
-    assert.equal(listCalls[0]?.partyId, 'alice::party')
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Contracts' }))
-
-    assert.equal(screen.getByText('cid-1').textContent, 'cid-1')
-    assert.ok(screen.getByText(/"admin": "alice::party"/))
-  })
-
-  it('formats loose create arguments before submitting the command', async () => {
-    // Scenario: create payloads are often copied from DAML-like notes, not strict JSON.
-    // The textarea should accept unquoted keys and newline-separated fields, normalize the
-    // text to strict formatted JSON, and submit the parsed object to the ledger helper.
-    const createCalls: Parameters<LedgerToolsApi['createContract']>[0][] = []
-    const api: LedgerToolsApi = {
-      createContract: async (params) => {
-        createCalls.push(params)
-        return { updateId: 'update-1', completionOffset: 42 }
-      },
-      exerciseContract: async () => ({ updateId: 'unused' }),
-      listActiveContracts: async () => [],
-    }
-    renderPanel(api)
-
-    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
-    const textarea = screen.getByLabelText('Create arguments JSON') as HTMLTextAreaElement
-    fireEvent.change(textarea, {
-      target: {
-        value: `{
-          owner: alice::party
-          instrumentId: {
-            admin: admin::party
-            id: BNT
-          }
-        }`,
-      },
-    })
-    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
-
-    await waitFor(() => assert.equal(createCalls.length, 1))
-    assert.deepEqual(createCalls[0]?.createArguments, {
-      owner: 'alice::party',
-      instrumentId: { admin: 'admin::party', id: 'BNT' },
-    })
-    assert.equal(
-      textarea.value,
-      JSON.stringify(
-        {
-          owner: 'alice::party',
-          instrumentId: { admin: 'admin::party', id: 'BNT' },
-        },
-        null,
-        2,
-      ),
-    )
-  })
-
-  it('refreshes active contracts with an optional template filter', async () => {
-    // Scenario: the active party can own many contracts, so the Contracts tab has an optional
-    // template-id filter. Refresh should pass that filter to the generic ACS helper.
-    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
-    const api: LedgerToolsApi = {
-      createContract: async () => ({ updateId: 'unused' }),
-      exerciseContract: async () => ({ updateId: 'unused' }),
-      listActiveContracts: async (params) => {
-        listCalls.push(params)
-        return [CONTRACT]
-      },
-    }
-    renderPanel(api)
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Contracts' }))
-    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
-
-    await waitFor(() =>
-      assert.deepEqual(listCalls.at(-1), {
-        partyId: 'alice::party',
-        templateId: 'pkg:Module:Template',
-      }),
-    )
-    assert.equal(screen.getByText('cid-1').textContent, 'cid-1')
-  })
-
-  it('exercises a choice from raw JSON and refreshes active contracts afterward', async () => {
-    // Scenario: a developer wants to call any known DAML choice by hand.
-    // Submitting should forward template id, contract id, choice name, and parsed JSON body
-    // to the generic exercise helper using the active account.
-    const exerciseCalls: Parameters<LedgerToolsApi['exerciseContract']>[0][] = []
-    const listCalls: Parameters<LedgerToolsApi['listActiveContracts']>[0][] = []
-    const api: LedgerToolsApi = {
-      createContract: async () => ({ updateId: 'unused' }),
-      exerciseContract: async (params) => {
-        exerciseCalls.push(params)
-        return { updateId: 'exercise-update-1', completionOffset: 43 }
-      },
-      listActiveContracts: async (params) => {
-        listCalls.push(params)
-        return [CONTRACT]
-      },
-    }
-    renderPanel(api)
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Exercise' }))
-    await userEvent.type(screen.getByLabelText('Exercise template ID'), 'pkg:Module:Template')
-    await userEvent.type(screen.getByLabelText('Contract ID'), 'cid-1')
-    await userEvent.type(screen.getByLabelText('Choice'), 'Template_DoThing')
-    fireEvent.change(screen.getByLabelText('Choice argument JSON'), {
-      target: { value: JSON.stringify({ receiver: 'bob::party', amount: '5.0' }) },
-    })
-    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
-
-    await waitFor(() => assert.equal(exerciseCalls.length, 1))
-    assert.equal(exerciseCalls[0]?.account.partyId, 'alice::party')
-    assert.equal(exerciseCalls[0]?.templateId, 'pkg:Module:Template')
-    assert.equal(exerciseCalls[0]?.contractId, 'cid-1')
-    assert.equal(exerciseCalls[0]?.choice, 'Template_DoThing')
-    assert.deepEqual(exerciseCalls[0]?.choiceArgument, { receiver: 'bob::party', amount: '5.0' })
-    assert.equal(listCalls.at(-1)?.partyId, 'alice::party')
-  })
-
-  it('formats loose choice arguments before exercising the choice', async () => {
-    // Scenario: choice payloads have the same raw-entry workflow as create payloads.
-    // The Exercise tab should normalize shorthand JSON before calling the generic choice
-    // helper so the ledger sees a real object, not pasted source text.
-    const exerciseCalls: Parameters<LedgerToolsApi['exerciseContract']>[0][] = []
-    const api: LedgerToolsApi = {
-      createContract: async () => ({ updateId: 'unused' }),
-      exerciseContract: async (params) => {
-        exerciseCalls.push(params)
-        return { updateId: 'exercise-update-1', completionOffset: 43 }
-      },
-      listActiveContracts: async () => [],
-    }
-    renderPanel(api)
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Exercise' }))
-    await userEvent.type(screen.getByLabelText('Exercise template ID'), 'pkg:Module:Template')
-    await userEvent.type(screen.getByLabelText('Contract ID'), 'cid-1')
-    await userEvent.type(screen.getByLabelText('Choice'), 'Template_DoThing')
-    const textarea = screen.getByLabelText('Choice argument JSON') as HTMLTextAreaElement
-    fireEvent.change(textarea, {
-      target: {
-        value: `{
-          receiver: bob::party
-          transfer: {
-            instrument: BNT
-            amount: 5.5
-          }
-        }`,
-      },
-    })
-    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
-
-    await waitFor(() => assert.equal(exerciseCalls.length, 1))
-    assert.deepEqual(exerciseCalls[0]?.choiceArgument, {
-      receiver: 'bob::party',
-      transfer: { instrument: 'BNT', amount: 5.5 },
-    })
-    assert.equal(
-      textarea.value,
-      JSON.stringify(
-        {
-          receiver: 'bob::party',
-          transfer: { instrument: 'BNT', amount: 5.5 },
-        },
-        null,
-        2,
-      ),
-    )
-  })
-})
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
new file mode 100644
index 00000000..01905271
--- /dev/null
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -0,0 +1,137 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { type UtilsApi, UtilsPanel } from '@/components/UtilsPanel'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { toast } from '@/components/ui/toast'
+import type { ActiveContract } from '@/ledger/contracts'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const CONTRACT: ActiveContract = {
+  contractId: 'cid-1',
+  templateId: 'pkg:Module:Template',
+  createArgument: { admin: 'alice::party' },
+  createdOffset: 42,
+}
+
+const baseVault = (): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: () => undefined,
+    accounts: [ACCOUNT],
+    primary: ACCOUNT,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ACCOUNT,
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderPanel = (api: UtilsApi): void => {
+  render(
+    <TooltipProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <UtilsPanel
+          account={ACCOUNT}
+          api={api}
+        />
+      </VaultContext.Provider>
+    </TooltipProvider>,
+  )
+}
+
+describe('UtilsPanel', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('drills into Create, submits, and returns to the list via back', async () => {
+    const createCalls: Parameters<UtilsApi['createContract']>[0][] = []
+    const api: UtilsApi = {
+      createContract: async (params) => {
+        createCalls.push(params)
+        return { updateId: 'update-1', completionOffset: 42 }
+      },
+      exerciseContract: async () => ({ updateId: 'unused' }),
+      listActiveContracts: async () => [],
+    }
+    renderPanel(api)
+
+    await userEvent.click(screen.getByRole('button', { name: /Create contract/ }))
+    await userEvent.type(screen.getByLabelText('Template ID'), 'pkg:Module:Template')
+    fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
+      target: { value: JSON.stringify({ admin: 'alice::party' }) },
+    })
+    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+    await waitFor(() => assert.equal(createCalls.length, 1))
+
+    await userEvent.click(screen.getByRole('button', { name: 'Back' }))
+    assert.ok(screen.getByRole('button', { name: /Active contracts/ }))
+  })
+
+  it('drills into Active contracts and applies the template filter', async () => {
+    const listCalls: Parameters<UtilsApi['listActiveContracts']>[0][] = []
+    const api: UtilsApi = {
+      createContract: async () => ({ updateId: 'unused' }),
+      exerciseContract: async () => ({ updateId: 'unused' }),
+      listActiveContracts: async (params) => {
+        listCalls.push(params)
+        return [CONTRACT]
+      },
+    }
+    renderPanel(api)
+
+    await userEvent.click(screen.getByRole('button', { name: /Active contracts/ }))
+    await screen.findByText('cid-1')
+    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
+    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+
+    await waitFor(() =>
+      assert.deepEqual(listCalls.at(-1), {
+        partyId: 'alice::party',
+        templateId: 'pkg:Module:Template',
+      }),
+    )
+  })
+
+  it('warns when there is no account', () => {
+    render(
+      <TooltipProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <UtilsPanel
+            api={{
+              createContract: async () => ({ updateId: 'x' }),
+              exerciseContract: async () => ({ updateId: 'x' }),
+              listActiveContracts: async () => [],
+            }}
+          />
+        </VaultContext.Provider>
+      </TooltipProvider>,
+    )
+    assert.ok(screen.getByText(/create an account/i))
+  })
+})

From 876cf45ef18f76d066f2ed4407bd8ca078ee1f07 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 18 Jun 2026 23:57:07 -0300
Subject: [PATCH 051/121] feat(carpincho-wallet): remove Tap Amulet from Assets
 tab

Tap Amulet now lives in UtilsList. Strip tapApi prop, AmuletTapApi/tapAmulet
imports, defaultTapApi, tapping state, activeTapApi, and onTapAmulet handler
from AssetsPanel. Remove PrimaryButton and toast imports (no longer used).
Remove the tap button div so AutoAcceptSetting is the first child.

Drop the corresponding test and unused AmuletTapApi import from AssetsPanel.test.tsx.
---
 .../src/components/AssetsPanel.tsx            | 39 -----------------
 .../test/components/AssetsPanel.test.tsx      | 43 -------------------
 2 files changed, 82 deletions(-)

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index f42a6dd5..bf6e25d1 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,13 +1,10 @@
 import { useState } from 'react'
-import { type AmuletTapApi, tapAmulet } from '@/cip56/amuletPreapproval'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { AutoAcceptSetting } from '@/components/AutoAcceptSetting'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
 import { TokenRow } from '@/components/TokenRow'
-import { PrimaryButton } from '@/components/ui/Button'
 import { LoadingState } from '@/components/ui/LoadingState'
-import { toast } from '@/components/ui/toast'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
@@ -18,26 +15,20 @@ export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
   sendApi?: Cip56SendApi
-  tapApi?: AmuletTapApi
   preapprovalApi?: AmuletPreapprovalApi
 }
 
-const defaultTapApi: AmuletTapApi = { tapAmulet }
-
 // Renders active CIP-56 token holdings as activity-style rows that open a detail modal.
 export const AssetsPanel = ({
   account,
   api,
   sendApi,
-  tapApi,
   preapprovalApi,
 }: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [selected, setSelected] = useState<TokenHoldingSummary | null>(null)
-  const [tapping, setTapping] = useState(false)
   const { summaries, loading, error, refresh } = useTokenHoldings(activeAccount, { api })
-  const activeTapApi = tapApi ?? defaultTapApi
 
   if (activeAccount === undefined) {
     return (
@@ -47,24 +38,6 @@ export const AssetsPanel = ({
     )
   }
 
-  // Runs the fixed faucet request and reloads balances once the ledger accepts it.
-  const onTapAmulet = async (): Promise<void> => {
-    setTapping(true)
-    try {
-      await activeTapApi.tapAmulet({
-        account: activeAccount,
-        signMessage: vault.signMessage,
-        recordTransaction: vault.recordTransaction,
-      })
-      await refresh()
-      toast.success('Tapped 100 AMT')
-    } catch (tapError) {
-      toast.error(tapError instanceof Error ? tapError.message : 'Amulet tap failed')
-    } finally {
-      setTapping(false)
-    }
-  }
-
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
       <AutoAcceptSetting
@@ -72,18 +45,6 @@ export const AssetsPanel = ({
         api={preapprovalApi}
       />
 
-      <div className="flex justify-end">
-        <PrimaryButton
-          className="px-3 py-1.5 text-[0.82rem]"
-          disabled={tapping}
-          onClick={() => {
-            void onTapAmulet()
-          }}
-        >
-          {tapping ? 'Tapping...' : 'Tap Amulet'}
-        </PrimaryButton>
-      </div>
-
       {error === undefined ? null : (
         <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
           {error}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 1cac0bd4..0af11cad 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -2,7 +2,6 @@ import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { toast } from '@/components/ui/toast'
@@ -52,7 +51,6 @@ const baseVault = (): VaultContextValue =>
 // Mounts the panel under vault + tooltip context so it can resolve the account and toggle.
 const renderAssets = (
   api: Cip56HoldingsApi,
-  tapApi?: AmuletTapApi,
   preapprovalApi: AmuletPreapprovalApi = inactivePreapprovalApi,
 ): void => {
   render(
@@ -61,7 +59,6 @@ const renderAssets = (
         <VaultContext.Provider value={baseVault()}>
           <AssetsPanel
             api={api}
-            tapApi={tapApi}
             preapprovalApi={preapprovalApi}
           />
         </VaultContext.Provider>
@@ -120,46 +117,6 @@ describe('AssetsPanel', () => {
     assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
   })
 
-  it('taps a fixed 100 AMT amount for the selected party and refreshes balances', async () => {
-    // Scenario: the faucet button belongs in the Assets tab because it changes
-    // balances. A successful tap should request the active account and reload holdings.
-    let listCalls = 0
-    const tappedAccounts: string[] = []
-    const api: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: async () => {
-        listCalls += 1
-        return []
-      },
-    }
-    const tapApi: AmuletTapApi = {
-      tapAmulet: async ({ account, signMessage, recordTransaction }) => {
-        tappedAccounts.push(account.partyId)
-        assert.equal(await signMessage(account.id, 'tap-hash'), 'signature')
-        await recordTransaction?.({
-          accountId: account.id,
-          accountName: account.name,
-          partyId: account.partyId,
-          network: account.network,
-          method: 'amulet.tap',
-          status: 'executed',
-          preparedTransaction: 'tap-tx',
-          preparedTransactionHash: 'tap-hash',
-          commands: [],
-          summary: 'Tap 100 AMT',
-          commandCount: 1,
-        })
-        return { updateId: 'tap-update-1' }
-      },
-    }
-
-    renderAssets(api, tapApi)
-
-    await userEvent.click(await screen.findByRole('button', { name: 'Tap Amulet' }))
-
-    assert.deepEqual(tappedAccounts, ['alice::party'])
-    assert.ok(listCalls >= 2)
-  })
-
   it('opens the token detail modal and fetches UTXOs on demand', async () => {
     // Scenario: clicking a token row opens the balance-first modal, which lazily
     // loads the raw UTXOs for the holdings list.

From 96e0b5f555d94115496622f8ddc77a5bb90c22a6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:02:58 -0300
Subject: [PATCH 052/121] feat(carpincho-wallet): make detail-sheet rows
 copyable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- DetailRow gains optional copyLabel prop; when set, renders a trailing
  Copyable beside the value — backward compatible for existing call sites.
- TransferDetailsSheet: sender, receiver, and contract-id rows now copyable.
- TokenHoldingDetail: contract-id row now copyable.
- Tests: new DetailRow.test.tsx; existing sheet tests wrapped in
  TooltipProvider and extended with copy-button assertions.
  ActivityPanel.test.tsx also wrapped in TooltipProvider.
---
 .../src/components/TokenHoldingDetail.tsx     |  1 +
 .../src/components/TransferDetailsSheet.tsx   |  3 ++
 .../src/components/ui/DetailRow.tsx           | 18 ++++++++--
 .../test/components/ActivityPanel.test.tsx    | 23 ++++++------
 .../components/TokenHoldingDetail.test.tsx    | 14 ++++++--
 .../components/TransferDetailsSheet.test.tsx  | 36 +++++++++++--------
 .../test/components/ui/DetailRow.test.tsx     | 36 +++++++++++++++++++
 7 files changed, 102 insertions(+), 29 deletions(-)
 create mode 100644 carpincho-wallet/test/components/ui/DetailRow.test.tsx

diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
index 6160ae63..413eded1 100644
--- a/carpincho-wallet/src/components/TokenHoldingDetail.tsx
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -26,6 +26,7 @@ export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.
       <DetailRow
         label="contract id"
         value={holding.contractId}
+        copyLabel="contract ID"
       />
     </dl>
   )
diff --git a/carpincho-wallet/src/components/TransferDetailsSheet.tsx b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
index ef319ada..27752bb5 100644
--- a/carpincho-wallet/src/components/TransferDetailsSheet.tsx
+++ b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
@@ -41,14 +41,17 @@ export const TransferDetailsSheet = ({
           <DetailRow
             label="sender"
             value={view?.sender ?? 'unknown'}
+            copyLabel="sender"
           />
           <DetailRow
             label="receiver"
             value={view?.receiver ?? 'unknown'}
+            copyLabel="receiver"
           />
           <DetailRow
             label="contract id"
             value={transfer.contractId}
+            copyLabel="contract ID"
           />
         </dl>
       )}
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
index 177bebd6..856bafe6 100644
--- a/carpincho-wallet/src/components/ui/DetailRow.tsx
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -1,12 +1,24 @@
+import { Copyable } from '@/components/ui/Copyable'
+
 interface DetailRowProps {
   label: string
   value: string
+  copyLabel?: string
 }
 
-// Label/value pair for the detail sheets; keeps long mono values readable.
-export const DetailRow = ({ label, value }: DetailRowProps): JSX.Element => (
+// Label/value pair for the detail sheets; keeps long mono values readable, optionally copyable.
+export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Element => (
   <div className="grid gap-1">
     <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
+    <dd className="m-0 flex items-start gap-1.5 break-all font-mono text-[0.74rem] leading-5 text-foreground">
+      <span className="min-w-0">{value}</span>
+      {copyLabel === undefined ? null : (
+        <Copyable
+          value={value}
+          label={copyLabel}
+          className="mt-0.5"
+        />
+      )}
+    </dd>
   </div>
 )
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index 6ccbc1f9..0ce81900 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ActivityPanel } from '@/components/ActivityPanel'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 import { getToastEntries, toast } from '@/components/ui/toast'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
@@ -62,16 +63,18 @@ const renderPanel = (
   onPendingCountChange?: (count: number) => void,
 ): void => {
   render(
-    <TestQueryClientProvider>
-      <VaultContext.Provider value={baseVault()}>
-        <ActivityPanel
-          account={ACCOUNT}
-          transactions={transactions}
-          api={api}
-          onPendingCountChange={onPendingCountChange}
-        />
-      </VaultContext.Provider>
-    </TestQueryClientProvider>,
+    <TooltipProvider>
+      <TestQueryClientProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <ActivityPanel
+            account={ACCOUNT}
+            transactions={transactions}
+            api={api}
+            onPendingCountChange={onPendingCountChange}
+          />
+        </VaultContext.Provider>
+      </TestQueryClientProvider>
+    </TooltipProvider>,
   )
 }
 
diff --git a/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
index 57c3726e..d2c79d0e 100644
--- a/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
+++ b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import type { TokenHolding } from '@/cip56/holdings'
 import { TokenHoldingDetail } from '@/components/TokenHoldingDetail'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 
 const UNLOCKED: TokenHolding = {
   contractId: 'holding-cid-1',
@@ -32,17 +33,26 @@ describe('TokenHoldingDetail', () => {
   it('shows amount, unlocked state, and contract id for an unlocked holding', () => {
     // Scenario: the per-UTXO detail relocates from the old inline expander; an
     // unlocked holding has no expiry row.
-    render(<TokenHoldingDetail holding={UNLOCKED} />)
+    render(
+      <TooltipProvider>
+        <TokenHoldingDetail holding={UNLOCKED} />
+      </TooltipProvider>,
+    )
 
     assert.equal(screen.getByText('12.50').textContent, '12.50')
     assert.equal(screen.getByText('unlocked').textContent, 'unlocked')
     assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
     assert.equal(screen.queryByText('expires'), null)
+    assert.ok(screen.getByRole('button', { name: 'Copy contract ID' }))
   })
 
   it('shows the locked state and expiry for a locked holding', () => {
     // Scenario: locked UTXOs surface their expiry as a human time label.
-    render(<TokenHoldingDetail holding={LOCKED} />)
+    render(
+      <TooltipProvider>
+        <TokenHoldingDetail holding={LOCKED} />
+      </TooltipProvider>,
+    )
 
     assert.equal(screen.getByText('locked').textContent, 'locked')
     assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
diff --git a/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
index f8ae1364..3b52958b 100644
--- a/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
+++ b/carpincho-wallet/test/components/TransferDetailsSheet.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { TransferDetailsSheet } from '@/components/TransferDetailsSheet'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 
 const TRANSFER: PendingTokenTransfer = {
   contractId: 'transfer-cid-1',
@@ -28,10 +29,12 @@ describe('TransferDetailsSheet', () => {
   it('shows full transfer metadata when a transfer is selected', () => {
     // Scenario: the eye button opens this sheet with parties, status, timestamps, and id.
     render(
-      <TransferDetailsSheet
-        transfer={TRANSFER}
-        onClose={() => undefined}
-      />,
+      <TooltipProvider>
+        <TransferDetailsSheet
+          transfer={TRANSFER}
+          onClose={() => undefined}
+        />
+      </TooltipProvider>,
     )
 
     assert.equal(
@@ -46,15 +49,18 @@ describe('TransferDetailsSheet', () => {
     assert.equal(screen.getByText('2026-06-09 20:41 UTC').textContent, '2026-06-09 20:41 UTC')
     assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
     assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1')
+    assert.ok(screen.getByRole('button', { name: 'Copy contract ID' }))
   })
 
   it('is closed when no transfer is selected', () => {
     // Scenario: a null selection renders nothing visible.
     render(
-      <TransferDetailsSheet
-        transfer={null}
-        onClose={() => undefined}
-      />,
+      <TooltipProvider>
+        <TransferDetailsSheet
+          transfer={null}
+          onClose={() => undefined}
+        />
+      </TooltipProvider>,
     )
 
     assert.equal(screen.queryByText('transfer-cid-1'), null)
@@ -64,12 +70,14 @@ describe('TransferDetailsSheet', () => {
     // Scenario: the sheet close button dismisses the details view.
     let closes = 0
     render(
-      <TransferDetailsSheet
-        transfer={TRANSFER}
-        onClose={() => {
-          closes += 1
-        }}
-      />,
+      <TooltipProvider>
+        <TransferDetailsSheet
+          transfer={TRANSFER}
+          onClose={() => {
+            closes += 1
+          }}
+        />
+      </TooltipProvider>,
     )
 
     await userEvent.click(screen.getByRole('button', { name: 'Close' }))
diff --git a/carpincho-wallet/test/components/ui/DetailRow.test.tsx b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
new file mode 100644
index 00000000..942b5f6e
--- /dev/null
+++ b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
@@ -0,0 +1,36 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { DetailRow } from '@/components/ui/DetailRow'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+
+describe('DetailRow', () => {
+  afterEach(cleanup)
+
+  it('shows a copy button only when copyLabel is set', () => {
+    const { rerender } = render(
+      <TooltipProvider>
+        <dl>
+          <DetailRow
+            label="party"
+            value="alice::party"
+          />
+        </dl>
+      </TooltipProvider>,
+    )
+    assert.equal(screen.queryByRole('button', { name: /Copy/i }), null)
+
+    rerender(
+      <TooltipProvider>
+        <dl>
+          <DetailRow
+            label="party"
+            value="alice::party"
+            copyLabel="party ID"
+          />
+        </dl>
+      </TooltipProvider>,
+    )
+    assert.ok(screen.getByRole('button', { name: 'Copy party ID' }))
+  })
+})

From 3fc13d18d2d939b4192ddb12609034c5b4875a09 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:05:04 -0300
Subject: [PATCH 053/121] feat(carpincho-wallet): make transaction details
 copyable and tree-rendered

- Mono metadata rows (party, hash, update id, command/submission ids) now
  each render a trailing Copyable.
- Command payload replaced from a raw <pre>/prettyJson block with JsonView,
  giving per-node copy and collapsible tree navigation.
- prettyJson import removed (no longer used in this file).
- ActivityList tests wrapped in TooltipProvider; new assertions cover copy
  buttons on mono rows and tree rendering of the command payload.
---
 .../src/components/ActivityList.tsx           | 18 +++++---
 .../test/components/ActivityList.test.tsx     | 42 +++++++++++++++++--
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index f94890b1..001f2310 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -1,8 +1,9 @@
 import { Fragment, useMemo, useState } from 'react'
+import { Copyable } from '@/components/ui/Copyable'
 import { CHEVRON_RIGHT_ICON, RECEIPT_ICON } from '@/components/ui/icons'
+import { JsonView } from '@/components/ui/JsonView'
 import { Sheet } from '@/components/ui/Sheet'
 import { cn } from '@/utils/cn'
-import { prettyJson } from '@/utils/json'
 import type { TransactionRecord } from '@/vault/types'
 import { CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT } from '@/wc/client'
 
@@ -97,11 +98,18 @@ const TransactionDetails = ({ tx }: { tx: TransactionRecord }): JSX.Element => (
           <dt className="font-semibold tracking-tight text-muted-foreground">{row.label}</dt>
           <dd
             className={cn(
-              'm-0 min-w-0 font-medium text-soft [overflow-wrap:anywhere]',
+              'm-0 flex min-w-0 items-start gap-1.5 font-medium text-soft [overflow-wrap:anywhere]',
               row.mono && 'font-mono text-[0.88rem]',
             )}
           >
-            {row.value}
+            <span className="min-w-0">{row.value}</span>
+            {row.mono && typeof row.value === 'string' ? (
+              <Copyable
+                value={row.value}
+                label={row.label}
+                className="mt-0.5"
+              />
+            ) : null}
           </dd>
         </Fragment>
       ))}
@@ -111,9 +119,7 @@ const TransactionDetails = ({ tx }: { tx: TransactionRecord }): JSX.Element => (
         <div className="mb-1.5 text-[0.92rem] font-semibold tracking-tight text-muted-foreground">
           Command payload
         </div>
-        <pre className="m-0 max-h-48 overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-background/60 p-3 font-mono text-[0.78rem] leading-relaxed text-soft">
-          {prettyJson(tx.commands)}
-        </pre>
+        <JsonView value={tx.commands} />
       </div>
     )}
   </div>
diff --git a/carpincho-wallet/test/components/ActivityList.test.tsx b/carpincho-wallet/test/components/ActivityList.test.tsx
index ba9752dd..0572732d 100644
--- a/carpincho-wallet/test/components/ActivityList.test.tsx
+++ b/carpincho-wallet/test/components/ActivityList.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ActivityList } from '@/components/ActivityList'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 import type { TransactionRecord } from '@/vault/types'
 
 const baseTransaction: TransactionRecord = {
@@ -28,7 +29,11 @@ describe('ActivityList', () => {
 
   it('shows an empty message when there is no activity', () => {
     // Scenario: a fresh account has executed nothing, so the tab states the empty condition plainly.
-    render(<ActivityList transactions={[]} />)
+    render(
+      <TooltipProvider>
+        <ActivityList transactions={[]} />
+      </TooltipProvider>,
+    )
     assert.ok(screen.getByText('No activity yet'))
   })
 
@@ -51,18 +56,47 @@ describe('ActivityList', () => {
     }
 
     // The collapsed row shows the summary as its title; clicking it opens the detail popup.
-    render(<ActivityList transactions={[transaction]} />)
+    render(
+      <TooltipProvider>
+        <ActivityList transactions={[transaction]} />
+      </TooltipProvider>,
+    )
     await user.click(screen.getByText('ExerciseCommand'))
 
     // The popup exposes the original command JSON so the user can inspect the called choice and values.
     assert.ok(screen.getByText('Command payload'))
-    assert.match(screen.getByText(/"choice": "Increment"/).textContent ?? '', /"by": 1/)
+    // Payload rendered as a JSON tree — the tree renders keys as individual text nodes.
+    assert.ok(screen.getAllByText('ExerciseCommand').length >= 1)
+  })
+
+  it('shows copy buttons for mono metadata rows', async () => {
+    // Scenario: update id, party id, and hash rows each have a trailing copy affordance.
+    const user = userEvent.setup()
+    const transaction: TransactionRecord = {
+      ...baseTransaction,
+      updateId: 'update-id-abc',
+    }
+
+    render(
+      <TooltipProvider>
+        <ActivityList transactions={[transaction]} />
+      </TooltipProvider>,
+    )
+    await user.click(screen.getByText('ExerciseCommand'))
+
+    await screen.findByText('Update ID')
+    assert.ok(screen.getByRole('button', { name: /Copy Update ID/i }))
+    assert.ok(screen.getByRole('button', { name: /Copy Party/i }))
   })
 
   it('shows the normalized wallet API method in the detail popup', async () => {
     // Scenario: a transaction recorded the internal prepare-and-execute method, but Activity shows the public name.
     const user = userEvent.setup()
-    render(<ActivityList transactions={[baseTransaction]} />)
+    render(
+      <TooltipProvider>
+        <ActivityList transactions={[baseTransaction]} />
+      </TooltipProvider>,
+    )
     await user.click(screen.getByText('ExerciseCommand'))
 
     // The detail view avoids leaking the internal prepare step; users recognize the execution as executeAndWait.

From e97a6116812df985fc10221850c7fd649fa9caf8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:06:39 -0300
Subject: [PATCH 054/121] feat(carpincho-wallet): copy counterparty party id
 from transfer cards

Both incoming (sender) and outgoing (receiver) cards now render a
Copyable beside the truncated counterparty line so the full party id
is accessible without opening the details sheet.
Tests wrapped in TooltipProvider; copy-button assertions added for
both directions.
---
 .../src/components/TransferCard.tsx           | 25 +++++--
 .../test/components/TransferCard.test.tsx     | 69 ++++++++++++++-----
 2 files changed, 73 insertions(+), 21 deletions(-)

diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index 92a4bc33..ad746419 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -3,6 +3,7 @@ import { formatTokenAmount } from '@/cip56/amount'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { tokenDisplayLabel, transferDescription } from '@/cip56/transfers'
 import { PrimaryButton } from '@/components/ui/Button'
+import { Copyable } from '@/components/ui/Copyable'
 import { EYE_ICON } from '@/components/ui/icons'
 import { shortMiddle } from '@/utils/account'
 
@@ -67,8 +68,16 @@ export const TransferCard = ({
       >
         <div className="min-w-0 flex-1">
           {amountRow}
-          <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
-            {counterpartyLabel}: {counterpartyText}
+          <p className="m-0 mt-1 flex items-center gap-1.5 font-mono text-[0.76rem] text-muted-foreground">
+            <span className="min-w-0 truncate">
+              {counterpartyLabel}: {counterpartyText}
+            </span>
+            {counterparty === undefined ? null : (
+              <Copyable
+                value={counterparty}
+                label={counterpartyLabel === 'from' ? 'sender' : 'receiver'}
+              />
+            )}
           </p>
         </div>
         <span className="shrink-0 rounded-full border border-warning/40 bg-warning-soft px-2.5 py-1 text-[0.72rem] font-semibold text-warning">
@@ -94,8 +103,16 @@ export const TransferCard = ({
           {description === undefined ? null : (
             <p className="m-0 mt-1 text-[0.83rem] leading-5 text-foreground">{description}</p>
           )}
-          <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
-            {counterpartyLabel}: {counterpartyText}
+          <p className="m-0 mt-1 flex items-center gap-1.5 font-mono text-[0.76rem] text-muted-foreground">
+            <span className="min-w-0 truncate">
+              {counterpartyLabel}: {counterpartyText}
+            </span>
+            {counterparty === undefined ? null : (
+              <Copyable
+                value={counterparty}
+                label={counterpartyLabel === 'from' ? 'sender' : 'receiver'}
+              />
+            )}
           </p>
         </div>
         <div className="flex shrink-0 items-center gap-2">
diff --git a/carpincho-wallet/test/components/TransferCard.test.tsx b/carpincho-wallet/test/components/TransferCard.test.tsx
index 1ca2382c..48f0e0a3 100644
--- a/carpincho-wallet/test/components/TransferCard.test.tsx
+++ b/carpincho-wallet/test/components/TransferCard.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { TransferCard } from '@/components/TransferCard'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 
 const INCOMING: PendingTokenTransfer = {
   contractId: 'incoming-cid-1',
@@ -41,16 +42,18 @@ describe('TransferCard', () => {
     let accepted = ''
     let opened: PendingTokenTransfer | undefined
     render(
-      <TransferCard
-        transfer={INCOMING}
-        direction="incoming"
-        onAccept={(cid) => {
-          accepted = cid
-        }}
-        onOpenDetails={(transfer) => {
-          opened = transfer
-        }}
-      />,
+      <TooltipProvider>
+        <TransferCard
+          transfer={INCOMING}
+          direction="incoming"
+          onAccept={(cid) => {
+            accepted = cid
+          }}
+          onOpenDetails={(transfer) => {
+            opened = transfer
+          }}
+        />
+      </TooltipProvider>,
     )
 
     assert.equal(screen.getByText('42.00 Amulet').textContent, '42.00 Amulet')
@@ -63,17 +66,34 @@ describe('TransferCard', () => {
     assert.equal(opened?.contractId, 'incoming-cid-1')
   })
 
+  it('shows a copy button for the sender on an incoming transfer', () => {
+    // Scenario: the full counterparty party id is copyable beside the truncated line.
+    render(
+      <TooltipProvider>
+        <TransferCard
+          transfer={INCOMING}
+          direction="incoming"
+          onOpenDetails={() => undefined}
+        />
+      </TooltipProvider>,
+    )
+
+    assert.ok(screen.getByRole('button', { name: 'Copy sender' }))
+  })
+
   it('renders an outgoing transfer as watch-only with a Pending pill and no Accept', async () => {
     // Scenario: the sender can only watch their outgoing transfer settle.
     let opened: PendingTokenTransfer | undefined
     render(
-      <TransferCard
-        transfer={OUTGOING}
-        direction="outgoing"
-        onOpenDetails={(transfer) => {
-          opened = transfer
-        }}
-      />,
+      <TooltipProvider>
+        <TransferCard
+          transfer={OUTGOING}
+          direction="outgoing"
+          onOpenDetails={(transfer) => {
+            opened = transfer
+          }}
+        />
+      </TooltipProvider>,
     )
 
     assert.equal(screen.getByText('10.00 Amulet').textContent, '10.00 Amulet')
@@ -83,4 +103,19 @@ describe('TransferCard', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Transfer details' }))
     assert.equal(opened?.contractId, 'outgoing-cid-1')
   })
+
+  it('shows a copy button for the receiver on an outgoing transfer', () => {
+    // Scenario: the full receiver party id is copyable beside the truncated line.
+    render(
+      <TooltipProvider>
+        <TransferCard
+          transfer={OUTGOING}
+          direction="outgoing"
+          onOpenDetails={() => undefined}
+        />
+      </TooltipProvider>,
+    )
+
+    assert.ok(screen.getByRole('button', { name: 'Copy receiver' }))
+  })
 })

From 367c903ee09b6e00af707eba79d9cd244e1f48ca Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:11:19 -0300
Subject: [PATCH 055/121] feat(carpincho-wallet): replace raw JSON <pre> blocks
 with JsonView tree
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SendConfirm "View data" expander and PendingActionCard payload block both
rendered JSON as a flat <pre> string. Both are now JsonView trees with
per-node copy and collapsible navigation.

HomeView source-inspection test updated to match the new JsonView usage
in PendingActionCard (the layout contract — scrollable framed payload —
is unchanged, just now provided by JsonView rather than a raw <pre>).

Skipped surfaces (intentionally not wrapped):
- AccountRow: party id already copyable via CopyPartyIdButton in addressTrailing.
- TokenRow: font-mono value is a formatted balance, not a ledger id.
- DangerConfirm identifier box: destructive-confirm echo; copy button would
  distract from the confirm/cancel decision.
- PasswordStrengthIndicator: passphrase example, not ledger data.
- ConnectionFooter network label: UI display string.
- DarUploadPanel filename: filesystem name, not a ledger identifier.
- Stepper step number: ordinal counter, not ledger data.
- ActiveContractsUtil, ExerciseChoiceUtil, CreateContractUtil: already have
  Copyable on every id/hash/offset.
- TokenReceive: already has CopyPartyIdButton.
---
 carpincho-wallet/src/components/SendConfirm.tsx        | 10 +++++++---
 .../src/components/ui/PendingActionCard.tsx            |  8 +++++---
 carpincho-wallet/test/components/SendConfirm.test.tsx  |  8 ++++++--
 carpincho-wallet/test/views/HomeView.test.ts           |  9 ++++-----
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/carpincho-wallet/src/components/SendConfirm.tsx b/carpincho-wallet/src/components/SendConfirm.tsx
index 4544a8e1..6d50ad87 100644
--- a/carpincho-wallet/src/components/SendConfirm.tsx
+++ b/carpincho-wallet/src/components/SendConfirm.tsx
@@ -9,6 +9,7 @@ import {
   transferDeadlineExpiration,
 } from '@/components/SendTokenForm'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { JsonView } from '@/components/ui/JsonView'
 import { toast } from '@/components/ui/toast'
 import { shortMiddle } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
@@ -108,9 +109,12 @@ export const SendConfirm = ({
         <summary className="cursor-pointer select-none px-3 py-2 text-[0.78rem] font-semibold text-muted-foreground">
           View data
         </summary>
-        <pre className="overflow-x-auto border-t border-border px-3 py-2 font-mono text-[0.72rem] leading-relaxed text-foreground">
-          {JSON.stringify(request, null, 2)}
-        </pre>
+        <div className="border-t border-border">
+          <JsonView
+            value={request}
+            className="rounded-none border-0"
+          />
+        </div>
       </details>
 
       <div className="grid grid-cols-2 gap-3">
diff --git a/carpincho-wallet/src/components/ui/PendingActionCard.tsx b/carpincho-wallet/src/components/ui/PendingActionCard.tsx
index a5b72230..ee7519da 100644
--- a/carpincho-wallet/src/components/ui/PendingActionCard.tsx
+++ b/carpincho-wallet/src/components/ui/PendingActionCard.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { JsonView } from '@/components/ui/JsonView'
 
 interface PendingActionCardProps {
   method: string
@@ -36,9 +37,10 @@ export const PendingActionCard = ({
     {payload !== undefined && (
       <div>
         <div className="font-mono text-[0.84rem] font-medium text-muted-foreground">payload:</div>
-        <pre className="mt-1.5 max-h-[40vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-border bg-background/60 p-3 font-mono text-[0.82rem] leading-relaxed text-soft">
-          {typeof payload.json === 'string' ? payload.json : JSON.stringify(payload.json, null, 2)}
-        </pre>
+        <JsonView
+          value={typeof payload.json === 'string' ? payload.json : payload.json}
+          className="mt-1.5 max-h-[40vh]"
+        />
       </div>
     )}
     <div className="grid grid-cols-2 gap-3">
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
index e8164dfb..8dbae060 100644
--- a/carpincho-wallet/test/components/SendConfirm.test.tsx
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -90,7 +90,7 @@ describe('SendConfirm', () => {
     }
     renderConfirm(sendApi, () => (sentCount += 1))
 
-    assert.ok(screen.getByText('lunch'))
+    assert.ok(screen.getAllByText('lunch').length >= 1)
     assert.ok(screen.getByText(/7\.50/))
     await userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
 
@@ -103,8 +103,12 @@ describe('SendConfirm', () => {
   })
 
   it('exposes the request JSON behind a View data expander', () => {
+    // The payload is now a JsonView tree; the key "recipient" and the party value are
+    // rendered as separate text nodes — confirm the key is visible in the tree.
     renderConfirm({ createTokenTransfer: async () => ({ updateId: 'u1' }) }, () => undefined)
-    assert.ok(screen.getByText(/"recipient": "bob::party"/))
+    // JsonView renders the key "recipient" and the party value as separate nodes.
+    assert.ok(screen.getAllByText('recipient').length >= 1)
+    assert.ok(screen.getAllByText('bob::party').length >= 1)
   })
 
   it('cancels back without submitting', async () => {
diff --git a/carpincho-wallet/test/views/HomeView.test.ts b/carpincho-wallet/test/views/HomeView.test.ts
index ddd9e62c..5edd2d31 100644
--- a/carpincho-wallet/test/views/HomeView.test.ts
+++ b/carpincho-wallet/test/views/HomeView.test.ts
@@ -64,17 +64,16 @@ describe('HomeView transaction activity recording', () => {
 
 describe('PendingActionCard approval layout', () => {
   // Scenario: pending Canton requests need a compact payload area with a label and one framed text box.
-  it('renders payload text directly under the payload label inside one text box', () => {
+  it('renders payload under the payload label in a scrollable tree view', () => {
     // The approval card source is inspected directly because this layout rule is component-local.
     const pendingActionCard = pendingActionCardSource()
 
     // Payload should not reuse JsonPreview because that primitive adds its own framed preview box.
     assert.doesNotMatch(pendingActionCard, /JsonPreview/)
 
-    // The payload label stays visually aligned with the method row while the JSON text itself scrolls.
+    // The payload label stays visually aligned with the method row; JsonView owns the scrollable frame.
     assert.match(pendingActionCard, /payload:/)
-    assert.match(pendingActionCard, /<pre/)
-    assert.match(pendingActionCard, /max-h-\[40vh\] overflow-auto/)
-    assert.match(pendingActionCard, /rounded-md border border-border bg-background\/60 p-3/)
+    assert.match(pendingActionCard, /JsonView/)
+    assert.match(pendingActionCard, /max-h-\[40vh\]/)
   })
 })

From 100f6044ea51d69e44d02921a216edfa8fe41511 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:20:26 -0300
Subject: [PATCH 056/121] fix(carpincho-wallet): remove dead ternary in
 PendingActionCard and strengthen ActivityList test
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the no-op `typeof payload.json === 'string' ? payload.json : payload.json`
ternary — both branches were identical, so pass `payload.json` directly.

Strengthen the ActivityList payload assertion: instead of checking
`getAllByText('ExerciseCommand').length >= 1` (which passes even before
the detail opens), scope the query inside the dialog and assert `>= 2`
occurrences — one in the dialog title, one in the JSON tree key — so the
assertion fails if the payload tree never rendered.
---
 carpincho-wallet/src/components/ui/PendingActionCard.tsx | 2 +-
 carpincho-wallet/test/components/ActivityList.test.tsx   | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/PendingActionCard.tsx b/carpincho-wallet/src/components/ui/PendingActionCard.tsx
index ee7519da..2f4c8bac 100644
--- a/carpincho-wallet/src/components/ui/PendingActionCard.tsx
+++ b/carpincho-wallet/src/components/ui/PendingActionCard.tsx
@@ -38,7 +38,7 @@ export const PendingActionCard = ({
       <div>
         <div className="font-mono text-[0.84rem] font-medium text-muted-foreground">payload:</div>
         <JsonView
-          value={typeof payload.json === 'string' ? payload.json : payload.json}
+          value={payload.json}
           className="mt-1.5 max-h-[40vh]"
         />
       </div>
diff --git a/carpincho-wallet/test/components/ActivityList.test.tsx b/carpincho-wallet/test/components/ActivityList.test.tsx
index 0572732d..4c8c5675 100644
--- a/carpincho-wallet/test/components/ActivityList.test.tsx
+++ b/carpincho-wallet/test/components/ActivityList.test.tsx
@@ -1,6 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { ActivityList } from '@/components/ActivityList'
 import { TooltipProvider } from '@/components/ui/Tooltip'
@@ -65,8 +65,10 @@ describe('ActivityList', () => {
 
     // The popup exposes the original command JSON so the user can inspect the called choice and values.
     assert.ok(screen.getByText('Command payload'))
-    // Payload rendered as a JSON tree — the tree renders keys as individual text nodes.
-    assert.ok(screen.getAllByText('ExerciseCommand').length >= 1)
+    // The dialog title accounts for one occurrence; the JSON tree key is a second.
+    // Asserting >= 2 inside the dialog fails if the payload tree never rendered.
+    const dialog = screen.getByRole('dialog')
+    assert.ok(within(dialog).getAllByText('ExerciseCommand').length >= 2)
   })
 
   it('shows copy buttons for mono metadata rows', async () => {

From a9018dbbb79af9e8a343228d0c42a33b115af93e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:35:39 -0300
Subject: [PATCH 057/121] style(carpincho-wallet): polish utils faucet row, DAR
 dropzone, and json validation copy

- Tap Amulet icon chip uses bg-primary/text-primary-foreground to signal
  immediate action vs muted nav rows
- DAR picker replaced with accessible dropzone (sr-only input + label card)
  showing instruction or selected filename pill
- JsonField validation strips redundant field-label prefix from error messages
---
 .../src/components/DarUploadPanel.tsx         | 41 ++++++++++---------
 .../src/components/utils/JsonField.tsx        |  5 ++-
 .../src/components/utils/UtilsList.tsx        |  2 +-
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index c7f76b75..9a5a25fd 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -41,31 +41,34 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
   return (
     <section className="flex flex-col gap-4">
       <div className="flex flex-col gap-2">
+        <span className="text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground">
+          DAR file
+        </span>
+        <input
+          id="dar-file"
+          type="file"
+          accept=".dar,application/octet-stream"
+          aria-label="DAR file"
+          className="sr-only"
+          onChange={(event) => {
+            setUploadedFileName(undefined)
+            setFile(event.currentTarget.files?.[0])
+          }}
+        />
         <label
           htmlFor="dar-file"
-          className="text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
+          className="cursor-pointer rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center hover:border-primary/60"
         >
-          DAR file
-        </label>
-        <div className="rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center">
-          <input
-            id="dar-file"
-            type="file"
-            accept=".dar,application/octet-stream"
-            className="block w-full text-[0.9rem] font-medium normal-case tracking-normal text-foreground file:mr-3 file:rounded-sm file:border-0 file:bg-primary-soft file:px-3 file:py-1.5 file:font-semibold file:text-primary"
-            onChange={(event) => {
-              setUploadedFileName(undefined)
-              setFile(event.currentTarget.files?.[0])
-            }}
-          />
           {file === undefined ? (
-            <p className="mt-3 text-[0.82rem] font-medium text-muted-foreground">
-              Choose a compiled .dar archive to install.
-            </p>
+            <span className="text-[0.82rem] font-medium text-muted-foreground">
+              Drop a .dar file or click to choose.
+            </span>
           ) : (
-            <p className="mt-3 truncate font-mono text-[0.82rem] text-foreground">{file.name}</p>
+            <span className="rounded-sm bg-muted px-2 py-1">
+              <span className="font-mono text-[0.82rem] text-foreground">{file.name}</span>
+            </span>
           )}
-        </div>
+        </label>
       </div>
       <PrimaryButton
         className="w-full"
diff --git a/carpincho-wallet/src/components/utils/JsonField.tsx b/carpincho-wallet/src/components/utils/JsonField.tsx
index cdc7bcea..adede285 100644
--- a/carpincho-wallet/src/components/utils/JsonField.tsx
+++ b/carpincho-wallet/src/components/utils/JsonField.tsx
@@ -18,7 +18,10 @@ const validate = (value: string, label: string): string | undefined => {
     parseJsonObject(value, label)
     return undefined
   } catch (err) {
-    return err instanceof Error ? err.message : 'Invalid JSON'
+    if (!(err instanceof Error)) return 'Invalid JSON'
+    const prefix = `${label}: `
+    const message = err.message.startsWith(prefix) ? err.message.slice(prefix.length) : err.message
+    return message
   }
 }
 
diff --git a/carpincho-wallet/src/components/utils/UtilsList.tsx b/carpincho-wallet/src/components/utils/UtilsList.tsx
index 1105fab3..bc4f85ca 100644
--- a/carpincho-wallet/src/components/utils/UtilsList.tsx
+++ b/carpincho-wallet/src/components/utils/UtilsList.tsx
@@ -97,7 +97,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
         >
           <span
             aria-hidden="true"
-            className={ICON_WRAP_CLASS}
+            className="grid size-9 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground"
           >
             {tapping ? SPINNER_ICON : DROPLET_ICON}
           </span>

From 4273d25effe5de1620e1b99e3fee84c2baecf554 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 00:44:34 -0300
Subject: [PATCH 058/121] fix(carpincho-wallet): render non-object JsonView
 payloads as plain text

Primitives (string, number, boolean, null) passed to JsonView were cast
to object, causing the library to produce a per-character index tree
({"0":"a","1":"G",...}).  Guard the branch: object/array values keep the
RjvJsonView tree; everything else renders verbatim in a <pre> inside the
same framed container.

Covers the WalletConnect sign-message path where payload.json is a
base64 string and the approval card was showing garbled character trees.
---
 .../src/components/ui/JsonView.tsx            | 46 ++++++++++++-------
 .../test/components/JsonView.test.tsx         | 15 ++++++
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/JsonView.tsx b/carpincho-wallet/src/components/ui/JsonView.tsx
index 2710e315..8d6e6436 100644
--- a/carpincho-wallet/src/components/ui/JsonView.tsx
+++ b/carpincho-wallet/src/components/ui/JsonView.tsx
@@ -25,20 +25,32 @@ interface JsonViewProps {
 }
 
 // Read-only JSON tree with per-node copy; used for contract args, results, and tx payloads.
-export const JsonView = ({ value, className }: JsonViewProps): JSX.Element => (
-  <div
-    className={cn(
-      'max-h-64 overflow-auto rounded-md border border-border bg-muted p-3 text-[0.78rem] leading-relaxed',
-      className,
-    )}
-  >
-    <RjvJsonView
-      value={value as object}
-      style={THEME_STYLE}
-      displayDataTypes={false}
-      displayObjectSize={false}
-      enableClipboard
-      collapsed={2}
-    />
-  </div>
-)
+// Non-object values (strings, numbers, booleans, null, undefined) render as plain monospace text
+// to avoid the per-character tree the library produces when given a primitive.
+export const JsonView = ({ value, className }: JsonViewProps): JSX.Element => {
+  const isObject = value !== null && typeof value === 'object'
+
+  return (
+    <div
+      className={cn(
+        'max-h-64 overflow-auto rounded-md border border-border bg-muted p-3 text-[0.78rem] leading-relaxed',
+        className,
+      )}
+    >
+      {isObject ? (
+        <RjvJsonView
+          value={value as object}
+          style={THEME_STYLE}
+          displayDataTypes={false}
+          displayObjectSize={false}
+          enableClipboard
+          collapsed={2}
+        />
+      ) : (
+        <pre className="m-0 whitespace-pre-wrap break-words font-mono text-foreground">
+          {value == null ? '' : String(value)}
+        </pre>
+      )}
+    </div>
+  )
+}
diff --git a/carpincho-wallet/test/components/JsonView.test.tsx b/carpincho-wallet/test/components/JsonView.test.tsx
index 5c83a541..3f9f3b2e 100644
--- a/carpincho-wallet/test/components/JsonView.test.tsx
+++ b/carpincho-wallet/test/components/JsonView.test.tsx
@@ -15,4 +15,19 @@ describe('JsonView', () => {
         .length > 0,
     )
   })
+
+  it('renders a plain string verbatim without splitting into per-character nodes', () => {
+    const b64 = 'aGVsbG8gd29ybGQ='
+    render(<JsonView value={b64} />)
+
+    // The full string must appear in a single node (the <pre>)
+    assert.ok(screen.getByText(b64))
+
+    // No per-character tree: there must be no element whose sole text content is exactly "a"
+    // followed by another whose sole text content is exactly "G" as separate index entries.
+    // Check by asserting no "0:" or "1:" index key labels exist in the DOM.
+    const allText = document.body.textContent ?? ''
+    assert.ok(!allText.includes('0:'), 'found index key "0:" — string was split into characters')
+    assert.ok(!allText.includes('1:'), 'found index key "1:" — string was split into characters')
+  })
 })

From be19e97d495a46d801c0d635fd5fa0e2090b5b89 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 01:12:04 -0300
Subject: [PATCH 059/121] style(carpincho-wallet): card rows, stacked tx
 details, copy-by-title, scrollable holdings

---
 .../src/components/ActivityList.tsx           | 104 +++++++++---------
 .../src/components/AssetsPanel.tsx            |   4 +-
 .../src/components/TokenDetailSheet.tsx       |  38 ++++---
 carpincho-wallet/src/components/TokenRow.tsx  |  42 ++++---
 .../src/components/ui/DetailRow.tsx           |  11 +-
 .../src/components/utils/UtilDetail.tsx       |   2 +-
 .../test/components/TokenRow.test.tsx         |   8 +-
 7 files changed, 108 insertions(+), 101 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 001f2310..69b3ecc8 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -1,9 +1,9 @@
-import { Fragment, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Copyable } from '@/components/ui/Copyable'
-import { CHEVRON_RIGHT_ICON, RECEIPT_ICON } from '@/components/ui/icons'
+import { DetailRow } from '@/components/ui/DetailRow'
+import { EYE_ICON, RECEIPT_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
 import { Sheet } from '@/components/ui/Sheet'
-import { cn } from '@/utils/cn'
 import type { TransactionRecord } from '@/vault/types'
 import { CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT } from '@/wc/client'
 
@@ -92,32 +92,26 @@ const groupByDate = (transactions: TransactionRecord[]): DateGroup[] => {
 // Detail body shown inside the popup opened from an activity row.
 const TransactionDetails = ({ tx }: { tx: TransactionRecord }): JSX.Element => (
   <div>
-    <dl className="m-0 grid grid-cols-[minmax(96px,auto)_1fr] gap-x-3 gap-y-2 text-[0.92rem]">
+    <dl className="m-0 grid gap-3">
       {txDetailRows(tx).map((row) => (
-        <Fragment key={row.label}>
-          <dt className="font-semibold tracking-tight text-muted-foreground">{row.label}</dt>
-          <dd
-            className={cn(
-              'm-0 flex min-w-0 items-start gap-1.5 font-medium text-soft [overflow-wrap:anywhere]',
-              row.mono && 'font-mono text-[0.88rem]',
-            )}
-          >
-            <span className="min-w-0">{row.value}</span>
-            {row.mono && typeof row.value === 'string' ? (
-              <Copyable
-                value={row.value}
-                label={row.label}
-                className="mt-0.5"
-              />
-            ) : null}
-          </dd>
-        </Fragment>
+        <DetailRow
+          key={row.label}
+          label={row.label}
+          value={String(row.value)}
+          copyLabel={row.mono ? row.label : undefined}
+        />
       ))}
     </dl>
     {hasCommandPayload(tx) && (
       <div className="mt-3">
-        <div className="mb-1.5 text-[0.92rem] font-semibold tracking-tight text-muted-foreground">
-          Command payload
+        <div className="mb-1.5 flex items-center gap-1.5">
+          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
+            Command payload
+          </span>
+          <Copyable
+            value={JSON.stringify(tx.commands, null, 2)}
+            label="command payload"
+          />
         </div>
         <JsonView value={tx.commands} />
       </div>
@@ -146,41 +140,43 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
     <div className="flex flex-col pb-2">
       {groups.map((group) => (
         <div key={group.label}>
-          <div className="px-1 pb-1 pt-3 text-[0.8rem] font-semibold tracking-tight text-muted-foreground">
+          <div className="px-1 pb-1.5 pt-3 text-[0.8rem] font-semibold tracking-tight text-muted-foreground">
             {group.label}
           </div>
-          {group.items.map((tx) => (
-            <button
-              key={tx.id}
-              type="button"
-              onClick={() => setSelected(tx)}
-              className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-1 py-2.5 text-left outline-none transition-colors hover:bg-primary-soft/40 focus-visible:bg-primary-soft/60"
-            >
-              <span
-                aria-hidden="true"
-                className="grid size-9 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground"
+          <div className="flex flex-col gap-2">
+            {group.items.map((tx) => (
+              <button
+                key={tx.id}
+                type="button"
+                onClick={() => setSelected(tx)}
+                className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left outline-none transition-colors hover:border-primary/60 hover:bg-primary-soft/40 focus-visible:shadow-focus"
               >
-                {RECEIPT_ICON}
-              </span>
-              <span className="min-w-0">
-                <span className="flex items-baseline gap-2">
-                  <span className="truncate text-[0.94rem] font-semibold text-foreground">
-                    {txTitle(tx)}
-                  </span>
-                  <span className="shrink-0 whitespace-nowrap text-[0.72rem] font-normal italic text-muted-foreground">
-                    {TIME_FMT.format(tx.createdAt)}
+                <span
+                  aria-hidden="true"
+                  className="grid size-9 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground"
+                >
+                  {RECEIPT_ICON}
+                </span>
+                <span className="min-w-0">
+                  <span className="flex items-baseline gap-2">
+                    <span className="truncate text-[0.94rem] font-semibold text-foreground">
+                      {txTitle(tx)}
+                    </span>
+                    <span className="shrink-0 whitespace-nowrap text-[0.72rem] font-normal italic text-muted-foreground">
+                      {TIME_FMT.format(tx.createdAt)}
+                    </span>
                   </span>
+                  <span className="block text-[0.84rem] font-medium text-success">Confirmed</span>
                 </span>
-                <span className="block text-[0.84rem] font-medium text-success">Confirmed</span>
-              </span>
-              <span
-                aria-hidden="true"
-                className="justify-self-end text-muted-foreground"
-              >
-                {CHEVRON_RIGHT_ICON}
-              </span>
-            </button>
-          ))}
+                <span
+                  aria-hidden="true"
+                  className="grid size-8 place-items-center justify-self-end text-muted-foreground [&_svg]:size-4"
+                >
+                  {EYE_ICON}
+                </span>
+              </button>
+            ))}
+          </div>
         </div>
       ))}
 
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index bf6e25d1..026d11d5 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -52,8 +52,8 @@ export const AssetsPanel = ({
       )}
 
       {summaries.length > 0 ? (
-        <div className="flex flex-col">
-          <div className="px-1 pb-1 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
+        <div className="flex flex-col gap-2">
+          <div className="px-1 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
             Holdings
           </div>
           {summaries.map((summary) => (
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index d4a66270..47924621 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -117,27 +117,29 @@ const DetailScreen = ({
       </SecondaryButton>
     </div>
 
-    <div className="flex flex-col gap-2">
+    <div className="flex min-h-0 flex-col gap-2">
       <div className="px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
         Holdings
       </div>
-      {loading && holdings.length === 0 ? (
-        <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
-      ) : error !== undefined ? (
-        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-          {error}
-        </div>
-      ) : holdings.length === 0 ? (
-        <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">No UTXO details</p>
-      ) : (
-        holdings.map((holding) => (
-          <HoldingListRow
-            key={holding.contractId}
-            holding={holding}
-            onOpen={() => onOpenHolding(holding)}
-          />
-        ))
-      )}
+      <div className="-mx-1 flex max-h-[50vh] flex-col gap-2 overflow-y-auto px-1">
+        {loading && holdings.length === 0 ? (
+          <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
+        ) : error !== undefined ? (
+          <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+            {error}
+          </div>
+        ) : holdings.length === 0 ? (
+          <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">No UTXO details</p>
+        ) : (
+          holdings.map((holding) => (
+            <HoldingListRow
+              key={holding.contractId}
+              holding={holding}
+              onOpen={() => onOpenHolding(holding)}
+            />
+          ))
+        )}
+      </div>
     </div>
   </div>
 )
diff --git a/carpincho-wallet/src/components/TokenRow.tsx b/carpincho-wallet/src/components/TokenRow.tsx
index 780458b8..4fe34817 100644
--- a/carpincho-wallet/src/components/TokenRow.tsx
+++ b/carpincho-wallet/src/components/TokenRow.tsx
@@ -1,21 +1,21 @@
 import cantonIcon from '@/assets/canton.png'
 import { formatTokenAmount } from '@/cip56/amount'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
-import { LOCK_ICON } from '@/components/ui/icons'
+import { CHEVRON_RIGHT_ICON, LOCK_ICON } from '@/components/ui/icons'
 
 interface TokenRowProps {
   summary: TokenHoldingSummary
   onOpen: () => void
 }
 
-// One token in the assets list: icon + name left, grouped balance right; opens the detail modal.
+// One token in the assets list: icon + amount with the token name beneath, chevron right; opens the detail modal.
 export const TokenRow = ({ summary, onOpen }: TokenRowProps): JSX.Element => {
   const hasLocked = (summary.lockedCount ?? 0) > 0
   return (
     <button
       type="button"
       onClick={onOpen}
-      className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md px-1 py-2.5 text-left outline-none transition-colors hover:bg-primary-soft/40 focus-visible:bg-primary-soft/60"
+      className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left outline-none transition-colors hover:border-primary/60 hover:bg-primary-soft/40 focus-visible:shadow-focus"
     >
       <img
         src={cantonIcon}
@@ -24,23 +24,31 @@ export const TokenRow = ({ summary, onOpen }: TokenRowProps): JSX.Element => {
         draggable={false}
         className="size-9 shrink-0 rounded-full"
       />
-      <span className="flex min-w-0 items-center gap-1.5">
-        <span className="truncate text-[0.94rem] font-semibold text-foreground">
-          {summary.tokenLabel}
+      <span className="flex min-w-0 flex-col">
+        <span className="font-mono text-[0.95rem] font-semibold text-foreground">
+          {formatTokenAmount(summary.totalAmount)}
         </span>
-        {hasLocked ? (
-          <span
-            role="img"
-            className="shrink-0 text-warning"
-            title="Some holdings are locked"
-            aria-label="Some holdings are locked"
-          >
-            {LOCK_ICON}
+        <span className="flex min-w-0 items-center gap-1.5">
+          <span className="truncate text-[0.82rem] font-medium text-muted-foreground">
+            {summary.tokenLabel}
           </span>
-        ) : null}
+          {hasLocked ? (
+            <span
+              role="img"
+              className="shrink-0 text-warning"
+              title="Some holdings are locked"
+              aria-label="Some holdings are locked"
+            >
+              {LOCK_ICON}
+            </span>
+          ) : null}
+        </span>
       </span>
-      <span className="justify-self-end font-mono text-[0.95rem] font-semibold text-foreground">
-        {formatTokenAmount(summary.totalAmount)}
+      <span
+        aria-hidden="true"
+        className="justify-self-end text-muted-foreground"
+      >
+        {CHEVRON_RIGHT_ICON}
       </span>
     </button>
   )
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
index 856bafe6..b19df50f 100644
--- a/carpincho-wallet/src/components/ui/DetailRow.tsx
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -6,19 +6,18 @@ interface DetailRowProps {
   copyLabel?: string
 }
 
-// Label/value pair for the detail sheets; keeps long mono values readable, optionally copyable.
+// Label/value pair for the detail sheets; the copy control sits next to the title, value below.
 export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Element => (
   <div className="grid gap-1">
-    <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-    <dd className="m-0 flex items-start gap-1.5 break-all font-mono text-[0.74rem] leading-5 text-foreground">
-      <span className="min-w-0">{value}</span>
+    <div className="flex items-center gap-1.5">
+      <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
       {copyLabel === undefined ? null : (
         <Copyable
           value={value}
           label={copyLabel}
-          className="mt-0.5"
         />
       )}
-    </dd>
+    </div>
+    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
   </div>
 )
diff --git a/carpincho-wallet/src/components/utils/UtilDetail.tsx b/carpincho-wallet/src/components/utils/UtilDetail.tsx
index 5f71dab0..98e7c11b 100644
--- a/carpincho-wallet/src/components/utils/UtilDetail.tsx
+++ b/carpincho-wallet/src/components/utils/UtilDetail.tsx
@@ -11,7 +11,7 @@ interface UtilDetailProps {
 // Shared back-bar + title shell that hosts a single util's content.
 export const UtilDetail = ({ title, onBack, children }: UtilDetailProps): JSX.Element => (
   <div className="flex min-h-0 flex-1 flex-col">
-    <div className="sticky top-0 z-10 flex shrink-0 items-center gap-2 border-b border-border bg-background/95 pb-2.5 pt-1.5 backdrop-blur">
+    <div className="flex shrink-0 items-center gap-2 pb-2.5 pt-1.5">
       <button
         type="button"
         aria-label="Back"
diff --git a/carpincho-wallet/test/components/TokenRow.test.tsx b/carpincho-wallet/test/components/TokenRow.test.tsx
index 39c509a7..656c3ca2 100644
--- a/carpincho-wallet/test/components/TokenRow.test.tsx
+++ b/carpincho-wallet/test/components/TokenRow.test.tsx
@@ -21,9 +21,10 @@ describe('TokenRow', () => {
     cleanup()
   })
 
-  it('shows the token name and formatted balance, no UTXO subtitle or chevron', () => {
-    // Scenario: the assets list is balance-first (MetaMask/Rabby-style): icon + name
-    // on the left, the grouped balance on the right. The UTXO count moved to the detail sheet.
+  it('shows the balance with the token name beneath and a chevron', () => {
+    // Scenario: the assets list is balance-first: icon + amount on the left with the token
+    // name beneath it, and a chevron on the right (the row opens the detail sheet). The UTXO
+    // count moved to the detail sheet.
     const { container } = render(
       <TokenRow
         summary={SUMMARY}
@@ -34,6 +35,7 @@ describe('TokenRow', () => {
     assert.equal(screen.getByText('Amulet').textContent, 'Amulet')
     assert.equal(screen.getByText('9,997.00').textContent, '9,997.00')
     assert.ok(container.querySelector('img'), 'the row should show the token icon')
+    assert.ok(container.querySelector('svg'), 'the row should show a chevron')
     assert.equal(screen.queryByText(/UTXO/i), null)
     assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
   })

From 0d0988e0e34c0fd131fd0ddee2cb5ae379bdc8a0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 01:52:59 -0300
Subject: [PATCH 060/121] style(carpincho-wallet): unify data rows, framed
 identifier values, no copy tooltip, gated forms

---
 .../src/components/TokenDetailSheet.tsx       |  2 +-
 .../src/components/TokenHoldingDetail.tsx     |  2 +-
 .../src/components/ui/Copyable.tsx            | 33 +++-----
 .../src/components/ui/DetailRow.tsx           | 11 ++-
 .../src/components/ui/JsonView.tsx            |  1 +
 .../components/utils/ActiveContractsUtil.tsx  | 76 +++++++++----------
 .../components/utils/CreateContractUtil.tsx   | 19 ++---
 .../components/utils/ExerciseChoiceUtil.tsx   | 38 +++-------
 .../utils/ActiveContractsUtil.test.tsx        |  2 +-
 9 files changed, 74 insertions(+), 110 deletions(-)

diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index 47924621..f02a508c 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -121,7 +121,7 @@ const DetailScreen = ({
       <div className="px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
         Holdings
       </div>
-      <div className="-mx-1 flex max-h-[50vh] flex-col gap-2 overflow-y-auto px-1">
+      <div className="-mx-1 flex max-h-60 flex-col gap-2 overflow-y-auto px-1">
         {loading && holdings.length === 0 ? (
           <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
         ) : error !== undefined ? (
diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
index 413eded1..4883f56b 100644
--- a/carpincho-wallet/src/components/TokenHoldingDetail.tsx
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -8,7 +8,7 @@ export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.
   const view = holding.interfaceViewValue
   const lock = view?.lock
   return (
-    <dl className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3">
+    <dl className="grid gap-3">
       <DetailRow
         label="amount"
         value={view?.amount === undefined ? 'unknown' : formatTokenAmount(view.amount)}
diff --git a/carpincho-wallet/src/components/ui/Copyable.tsx b/carpincho-wallet/src/components/ui/Copyable.tsx
index 2a015022..d25bdbe5 100644
--- a/carpincho-wallet/src/components/ui/Copyable.tsx
+++ b/carpincho-wallet/src/components/ui/Copyable.tsx
@@ -1,4 +1,3 @@
-import * as RadixTooltip from '@radix-ui/react-tooltip'
 import { useState } from 'react'
 import { PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
 import { CHECK_ICON, COPY_ICON } from '@/components/ui/icons'
@@ -31,28 +30,14 @@ export const Copyable = ({
     ;(handle as unknown as { unref?: () => void }).unref?.()
   }
   return (
-    <RadixTooltip.Root delayDuration={150}>
-      <RadixTooltip.Trigger asChild>
-        <button
-          type="button"
-          data-testid={testId}
-          aria-label={`Copy ${label}`}
-          onClick={onCopy}
-          className={cn(PLAIN_ICON_BUTTON_CLASS, 'pointer-events-auto size-6 shrink-0', className)}
-        >
-          {copied ? CHECK_ICON : COPY_ICON}
-        </button>
-      </RadixTooltip.Trigger>
-      <RadixTooltip.Portal>
-        <RadixTooltip.Content
-          side="top"
-          sideOffset={4}
-          className="z-50 rounded-md border border-border bg-surface px-2 py-1 text-[0.72rem] font-medium text-foreground shadow-[var(--shadow-popover)]"
-        >
-          {copied ? 'Copied' : `Copy ${label}`}
-          <RadixTooltip.Arrow className="fill-surface" />
-        </RadixTooltip.Content>
-      </RadixTooltip.Portal>
-    </RadixTooltip.Root>
+    <button
+      type="button"
+      data-testid={testId}
+      aria-label={`Copy ${label}`}
+      onClick={onCopy}
+      className={cn(PLAIN_ICON_BUTTON_CLASS, 'pointer-events-auto size-6 shrink-0', className)}
+    >
+      {copied ? CHECK_ICON : COPY_ICON}
+    </button>
   )
 }
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
index b19df50f..1035ed83 100644
--- a/carpincho-wallet/src/components/ui/DetailRow.tsx
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -1,4 +1,5 @@
 import { Copyable } from '@/components/ui/Copyable'
+import { cn } from '@/utils/cn'
 
 interface DetailRowProps {
   label: string
@@ -7,6 +8,7 @@ interface DetailRowProps {
 }
 
 // Label/value pair for the detail sheets; the copy control sits next to the title, value below.
+// Copyable identifier values (those with a copyLabel) get a framed code-block box.
 export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Element => (
   <div className="grid gap-1">
     <div className="flex items-center gap-1.5">
@@ -18,6 +20,13 @@ export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Elem
         />
       )}
     </div>
-    <dd className="m-0 break-all font-mono text-[0.74rem] leading-5 text-foreground">{value}</dd>
+    <dd
+      className={cn(
+        'm-0 break-all font-mono text-[0.74rem] leading-5 text-foreground',
+        copyLabel !== undefined && 'rounded-md border border-border bg-muted px-3 py-2',
+      )}
+    >
+      {value}
+    </dd>
   </div>
 )
diff --git a/carpincho-wallet/src/components/ui/JsonView.tsx b/carpincho-wallet/src/components/ui/JsonView.tsx
index 8d6e6436..389c703d 100644
--- a/carpincho-wallet/src/components/ui/JsonView.tsx
+++ b/carpincho-wallet/src/components/ui/JsonView.tsx
@@ -5,6 +5,7 @@ import { cn } from '@/utils/cn'
 // Map the json tree's CSS variables onto the wallet's existing token palette.
 const THEME_STYLE: CSSProperties = {
   '--w-rjv-font-family': 'var(--font-mono)',
+  '--w-rjv-font-size': '0.74rem',
   '--w-rjv-background-color': 'transparent',
   '--w-rjv-color': 'var(--color-foreground)',
   '--w-rjv-key-string': 'var(--color-accent)',
diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 3d83244a..eb3292c6 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -3,6 +3,7 @@ import { Alert } from '@/components/ui/Alert'
 import { SecondaryButton } from '@/components/ui/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
 import { Copyable } from '@/components/ui/Copyable'
+import { DetailRow } from '@/components/ui/DetailRow'
 import { CHEVRON_DOWN_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
 import { TextInput } from '@/components/ui/TextInput'
@@ -15,58 +16,49 @@ interface ActiveContractsUtilProps {
   listActiveContracts?: typeof defaultList
 }
 
-// One active contract as a collapsible card: id first, args behind an expander.
+// One active contract as a collapsible card: id + chevron, args behind an expander.
 const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
-  <Collapsible className="rounded-md border border-border bg-surface">
-    <div className="flex items-center gap-2 p-3">
-      <CollapsibleTrigger className="group min-w-0 flex-1 text-left">
-        <span className="grid size-5 shrink-0 place-items-center text-muted-foreground transition-transform group-data-[state=open]:rotate-180">
+  <Collapsible className="rounded-md border border-border bg-surface p-3">
+    <div className="flex items-start gap-2">
+      <div className="min-w-0 flex-1">
+        <DetailRow
+          label="Contract ID"
+          value={contract.contractId}
+          copyLabel="contract ID"
+        />
+      </div>
+      <CollapsibleTrigger className="group grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
+        <span className="sr-only">Toggle contract details</span>
+        <span className="transition-transform group-data-[state=open]:rotate-180">
           {CHEVRON_DOWN_ICON}
         </span>
-        <span className="min-w-0">
-          <span className="block text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
-            Contract ID
-          </span>
-          <span className="block truncate font-mono text-[0.82rem] text-foreground">
-            {contract.contractId}
-          </span>
-        </span>
       </CollapsibleTrigger>
-      <Copyable
-        value={contract.contractId}
-        label="contract ID"
-      />
     </div>
-    <CollapsibleContent className="border-t border-border px-3 pb-3 pt-2">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0">
-          <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
-            Template
-          </div>
-          <div className="break-all font-mono text-[0.82rem] text-muted-foreground">
-            {contract.templateId}
-          </div>
-        </div>
-        <Copyable
-          value={contract.templateId}
-          label="template ID"
-        />
-      </div>
+    <CollapsibleContent className="mt-3 flex flex-col gap-3 border-t border-border pt-3">
+      <DetailRow
+        label="Template"
+        value={contract.templateId}
+        copyLabel="template ID"
+      />
       {contract.createdOffset === undefined ? null : (
-        <div className="mt-2 flex items-center gap-2">
-          <span className="text-[0.8rem] font-medium text-muted-foreground">
-            Offset {contract.createdOffset}
+        <DetailRow
+          label="Offset"
+          value={String(contract.createdOffset)}
+          copyLabel="offset"
+        />
+      )}
+      <div>
+        <div className="mb-1.5 flex items-center gap-1.5">
+          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
+            Create arguments
           </span>
           <Copyable
-            value={String(contract.createdOffset)}
-            label="offset"
+            value={JSON.stringify(contract.createArgument, null, 2)}
+            label="create arguments"
           />
         </div>
-      )}
-      <JsonView
-        value={contract.createArgument}
-        className="mt-3"
-      />
+        <JsonView value={contract.createArgument} />
+      </div>
     </CollapsibleContent>
   </Collapsible>
 )
diff --git a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
index ea880940..d0441f54 100644
--- a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
+++ b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { Alert } from '@/components/ui/Alert'
 import { PrimaryButton } from '@/components/ui/Button'
 import { Copyable } from '@/components/ui/Copyable'
 import { TextInput } from '@/components/ui/TextInput'
@@ -25,23 +24,18 @@ export const CreateContractUtil = ({
   const [json, setJson] = useState('{}')
   const [jsonValid, setJsonValid] = useState(true)
   const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | undefined>()
   const [updateId, setUpdateId] = useState<string | undefined>()
 
+  const canSubmit = templateId.trim() !== '' && jsonValid && !busy
+
   const onSubmit = async (): Promise<void> => {
-    const trimmed = templateId.trim()
-    if (trimmed === '') {
-      setError('Template ID is required')
-      return
-    }
     setBusy(true)
-    setError(undefined)
     setUpdateId(undefined)
     try {
       const createArguments = parseJsonObject(json, 'Create arguments')
       const result = await createContract({
         account,
-        templateId: trimmed,
+        templateId: templateId.trim(),
         createArguments,
         signMessage: vault.signMessage,
         recordTransaction: vault.recordTransaction,
@@ -49,9 +43,7 @@ export const CreateContractUtil = ({
       setUpdateId(result.updateId)
       toast.success('Contract created')
     } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      setError(message)
-      toast.error(message)
+      toast.error(err instanceof Error ? err.message : String(err))
     } finally {
       setBusy(false)
     }
@@ -85,7 +77,6 @@ export const CreateContractUtil = ({
         onChange={setJson}
         onValidityChange={setJsonValid}
       />
-      {error === undefined ? null : <Alert variant="error">{error}</Alert>}
       {updateId === undefined ? null : (
         <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
           <div className="min-w-0">
@@ -103,7 +94,7 @@ export const CreateContractUtil = ({
       <PrimaryButton
         type="submit"
         className="w-full"
-        disabled={busy || !jsonValid}
+        disabled={!canSubmit}
       >
         {busy ? 'Creating...' : 'Create contract'}
       </PrimaryButton>
diff --git a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
index 3bb71d29..5d5d88cf 100644
--- a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import { Alert } from '@/components/ui/Alert'
 import { PrimaryButton } from '@/components/ui/Button'
 import { Copyable } from '@/components/ui/Copyable'
 import { TextInput } from '@/components/ui/TextInput'
@@ -27,35 +26,25 @@ export const ExerciseChoiceUtil = ({
   const [json, setJson] = useState('{}')
   const [jsonValid, setJsonValid] = useState(true)
   const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | undefined>()
   const [updateId, setUpdateId] = useState<string | undefined>()
 
+  const canSubmit =
+    templateId.trim() !== '' &&
+    contractId.trim() !== '' &&
+    choice.trim() !== '' &&
+    jsonValid &&
+    !busy
+
   const onSubmit = async (): Promise<void> => {
-    const trimmedTemplateId = templateId.trim()
-    const trimmedContractId = contractId.trim()
-    const trimmedChoice = choice.trim()
-    if (trimmedTemplateId === '') {
-      setError('Template ID is required')
-      return
-    }
-    if (trimmedContractId === '') {
-      setError('Contract ID is required')
-      return
-    }
-    if (trimmedChoice === '') {
-      setError('Choice is required')
-      return
-    }
     setBusy(true)
-    setError(undefined)
     setUpdateId(undefined)
     try {
       const choiceArgument = parseJsonObject(json, 'Choice argument')
       const result = await exerciseContract({
         account,
-        templateId: trimmedTemplateId,
-        contractId: trimmedContractId,
-        choice: trimmedChoice,
+        templateId: templateId.trim(),
+        contractId: contractId.trim(),
+        choice: choice.trim(),
         choiceArgument,
         signMessage: vault.signMessage,
         recordTransaction: vault.recordTransaction,
@@ -63,9 +52,7 @@ export const ExerciseChoiceUtil = ({
       setUpdateId(result.updateId)
       toast.success('Choice exercised')
     } catch (err) {
-      const message = err instanceof Error ? err.message : String(err)
-      setError(message)
-      toast.error(message)
+      toast.error(err instanceof Error ? err.message : String(err))
     } finally {
       setBusy(false)
     }
@@ -125,7 +112,6 @@ export const ExerciseChoiceUtil = ({
         onChange={setJson}
         onValidityChange={setJsonValid}
       />
-      {error === undefined ? null : <Alert variant="error">{error}</Alert>}
       {updateId === undefined ? null : (
         <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
           <div className="min-w-0">
@@ -143,7 +129,7 @@ export const ExerciseChoiceUtil = ({
       <PrimaryButton
         type="submit"
         className="w-full"
-        disabled={busy || !jsonValid}
+        disabled={!canSubmit}
       >
         {busy ? 'Exercising...' : 'Exercise choice'}
       </PrimaryButton>
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index 8f85fe47..bd5537cf 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -49,7 +49,7 @@ describe('ActiveContractsUtil', () => {
     await screen.findByText('cid-1')
     assert.ok(screen.getByRole('button', { name: /Copy contract ID/i }))
 
-    await userEvent.click(screen.getByRole('button', { name: /cid-1/ }))
+    await userEvent.click(screen.getByRole('button', { name: /toggle contract details/i }))
     await screen.findByText(/admin/)
   })
 

From 2ef2f92b64a466004c62d1b754414232d6e72518 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 01:55:36 -0300
Subject: [PATCH 061/121] refactor(carpincho-wallet): open utils in a modal
 instead of drill-in

---
 .../src/components/UtilsPanel.tsx             | 66 ++++++++++---------
 .../src/components/utils/UtilDetail.tsx       | 27 --------
 .../test/components/UtilsPanel.test.tsx       |  6 +-
 .../test/components/utils/UtilDetail.test.tsx | 28 --------
 4 files changed, 37 insertions(+), 90 deletions(-)
 delete mode 100644 carpincho-wallet/src/components/utils/UtilDetail.tsx
 delete mode 100644 carpincho-wallet/test/components/utils/UtilDetail.test.tsx

diff --git a/carpincho-wallet/src/components/UtilsPanel.tsx b/carpincho-wallet/src/components/UtilsPanel.tsx
index 266b30a7..eefc1aa3 100644
--- a/carpincho-wallet/src/components/UtilsPanel.tsx
+++ b/carpincho-wallet/src/components/UtilsPanel.tsx
@@ -2,10 +2,10 @@ import { useState } from 'react'
 import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
 import { DarUploadPanel } from '@/components/DarUploadPanel'
 import { Alert } from '@/components/ui/Alert'
+import { Sheet } from '@/components/ui/Sheet'
 import { ActiveContractsUtil } from '@/components/utils/ActiveContractsUtil'
 import { CreateContractUtil } from '@/components/utils/CreateContractUtil'
 import { ExerciseChoiceUtil } from '@/components/utils/ExerciseChoiceUtil'
-import { UtilDetail } from '@/components/utils/UtilDetail'
 import { type UtilKey, UtilsList } from '@/components/utils/UtilsList'
 import { createContract, exerciseContract, listActiveContracts } from '@/ledger/contracts'
 import type { AccountPublic } from '@/vault/types'
@@ -31,7 +31,7 @@ interface UtilsPanelProps {
   tapApi?: AmuletTapApi
 }
 
-// Master/detail dev tools: a util list that drills into one util at a time.
+// Dev tools: a util list where selecting a util opens it in a modal.
 export const UtilsPanel = ({ account, api = defaultApi, tapApi }: UtilsPanelProps): JSX.Element => {
   const [selected, setSelected] = useState<UtilKey | null>(null)
 
@@ -43,40 +43,42 @@ export const UtilsPanel = ({ account, api = defaultApi, tapApi }: UtilsPanelProp
     )
   }
 
-  if (selected === null) {
-    return (
+  return (
+    <>
       <UtilsList
         account={account}
         tapApi={tapApi}
         onSelect={setSelected}
       />
-    )
-  }
-
-  return (
-    <UtilDetail
-      title={UTIL_TITLES[selected]}
-      onBack={() => setSelected(null)}
-    >
-      {selected === 'create' && (
-        <CreateContractUtil
-          account={account}
-          createContract={api.createContract}
-        />
-      )}
-      {selected === 'exercise' && (
-        <ExerciseChoiceUtil
-          account={account}
-          exerciseContract={api.exerciseContract}
-        />
-      )}
-      {selected === 'contracts' && (
-        <ActiveContractsUtil
-          account={account}
-          listActiveContracts={api.listActiveContracts}
-        />
-      )}
-      {selected === 'dar' && <DarUploadPanel />}
-    </UtilDetail>
+      <Sheet
+        open={selected !== null}
+        onOpenChange={(open) => {
+          if (!open) setSelected(null)
+        }}
+        title={selected === null ? '' : UTIL_TITLES[selected]}
+        description="Ledger development tool."
+        side="center"
+      >
+        {selected === 'create' && (
+          <CreateContractUtil
+            account={account}
+            createContract={api.createContract}
+          />
+        )}
+        {selected === 'exercise' && (
+          <ExerciseChoiceUtil
+            account={account}
+            exerciseContract={api.exerciseContract}
+          />
+        )}
+        {selected === 'contracts' && (
+          <ActiveContractsUtil
+            account={account}
+            listActiveContracts={api.listActiveContracts}
+          />
+        )}
+        {selected === 'dar' && <DarUploadPanel />}
+      </Sheet>
+    </>
   )
 }
diff --git a/carpincho-wallet/src/components/utils/UtilDetail.tsx b/carpincho-wallet/src/components/utils/UtilDetail.tsx
deleted file mode 100644
index 98e7c11b..00000000
--- a/carpincho-wallet/src/components/utils/UtilDetail.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react'
-import { ICON_BUTTON_CLASS } from '@/components/ui/Button'
-import { BACK_ICON } from '@/components/ui/icons'
-
-interface UtilDetailProps {
-  title: string
-  onBack: () => void
-  children: ReactNode
-}
-
-// Shared back-bar + title shell that hosts a single util's content.
-export const UtilDetail = ({ title, onBack, children }: UtilDetailProps): JSX.Element => (
-  <div className="flex min-h-0 flex-1 flex-col">
-    <div className="flex shrink-0 items-center gap-2 pb-2.5 pt-1.5">
-      <button
-        type="button"
-        aria-label="Back"
-        onClick={onBack}
-        className={`${ICON_BUTTON_CLASS} size-8 rounded-md`}
-      >
-        {BACK_ICON}
-      </button>
-      <h2 className="m-0 text-[1rem] font-semibold text-foreground">{title}</h2>
-    </div>
-    <div className="min-h-0 flex-1 overflow-y-auto px-1 py-3">{children}</div>
-  </div>
-)
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 01905271..5153cf9a 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -69,7 +69,7 @@ describe('UtilsPanel', () => {
     toast.clear()
   })
 
-  it('drills into Create, submits, and returns to the list via back', async () => {
+  it('opens Create in a modal, submits, and closes', async () => {
     const createCalls: Parameters<UtilsApi['createContract']>[0][] = []
     const api: UtilsApi = {
       createContract: async (params) => {
@@ -89,8 +89,8 @@ describe('UtilsPanel', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
     await waitFor(() => assert.equal(createCalls.length, 1))
 
-    await userEvent.click(screen.getByRole('button', { name: 'Back' }))
-    assert.ok(screen.getByRole('button', { name: /Active contracts/ }))
+    await userEvent.click(screen.getByRole('button', { name: 'Close' }))
+    await waitFor(() => assert.equal(screen.queryByLabelText('Template ID'), null))
   })
 
   it('drills into Active contracts and applies the template filter', async () => {
diff --git a/carpincho-wallet/test/components/utils/UtilDetail.test.tsx b/carpincho-wallet/test/components/utils/UtilDetail.test.tsx
deleted file mode 100644
index c94aeef5..00000000
--- a/carpincho-wallet/test/components/utils/UtilDetail.test.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { UtilDetail } from '@/components/utils/UtilDetail'
-
-describe('UtilDetail', () => {
-  afterEach(cleanup)
-
-  it('shows the title and calls onBack when the back button is clicked', async () => {
-    let backs = 0
-    render(
-      <UtilDetail
-        title="Create contract"
-        onBack={() => {
-          backs += 1
-        }}
-      >
-        <p>body</p>
-      </UtilDetail>,
-    )
-
-    assert.ok(screen.getByText('Create contract'))
-    assert.ok(screen.getByText('body'))
-    await userEvent.click(screen.getByRole('button', { name: 'Back' }))
-    assert.equal(backs, 1)
-  })
-})

From 73577e09ce188907ae05999c9753e2e88f6eb4e8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:07:28 -0300
Subject: [PATCH 062/121] style(carpincho-wallet): frame+copy all data rows,
 account cards, contract-id shorten/expand

---
 .../src/components/AccountListRow.tsx         |  6 ++--
 .../src/components/AccountsDialog.tsx         |  2 +-
 .../src/components/TokenReceive.tsx           | 20 +++++------
 .../src/components/ui/DetailRow.tsx           | 22 ++++---------
 .../src/components/ui/JsonView.tsx            |  1 +
 .../components/utils/ActiveContractsUtil.tsx  | 33 ++++++++++++-------
 .../test/components/UtilsPanel.test.tsx       |  2 +-
 .../test/components/ui/DetailRow.test.tsx     | 12 ++++---
 .../utils/ActiveContractsUtil.test.tsx        |  2 +-
 9 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/carpincho-wallet/src/components/AccountListRow.tsx b/carpincho-wallet/src/components/AccountListRow.tsx
index 5e030f0d..35f9876b 100644
--- a/carpincho-wallet/src/components/AccountListRow.tsx
+++ b/carpincho-wallet/src/components/AccountListRow.tsx
@@ -22,8 +22,8 @@ export const AccountListRow = ({
 }: AccountListRowProps): JSX.Element => (
   <div
     className={cn(
-      'group/row relative flex w-full items-center gap-1 rounded-sm transition-colors',
-      account.isPrimary && 'bg-primary-soft/40',
+      'group/row relative flex w-full items-center gap-1 rounded-md border border-border bg-surface transition-colors',
+      account.isPrimary && 'border-primary/60 bg-primary-soft/40',
     )}
   >
     <button
@@ -33,7 +33,7 @@ export const AccountListRow = ({
       aria-current={account.isPrimary ? true : undefined}
       aria-label={account.name}
       onClick={onSelect}
-      className="absolute inset-0 z-0 rounded-sm outline-none transition-colors group-hover/row:bg-primary-soft focus-visible:shadow-focus"
+      className="absolute inset-0 z-0 rounded-md outline-none transition-colors group-hover/row:bg-primary-soft focus-visible:shadow-focus"
     />
     <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 p-2">
       <AccountRow
diff --git a/carpincho-wallet/src/components/AccountsDialog.tsx b/carpincho-wallet/src/components/AccountsDialog.tsx
index 4fad3445..63e7c4a6 100644
--- a/carpincho-wallet/src/components/AccountsDialog.tsx
+++ b/carpincho-wallet/src/components/AccountsDialog.tsx
@@ -142,7 +142,7 @@ export const AccountsDialog = ({ open, onOpenChange }: AccountsDialogProps): JSX
               </button>
             )}
           </div>
-          <div className="flex max-h-[300px] min-h-[300px] flex-col gap-1 overflow-y-auto">
+          <div className="flex max-h-[300px] min-h-[300px] flex-col gap-2 overflow-y-auto">
             {/* Fixed height hints there are more rows and avoids layout shift while filtering. */}
             {filtered.length === 0 ? (
               <p className="px-2 py-6 text-center text-[0.92rem] text-muted-foreground">
diff --git a/carpincho-wallet/src/components/TokenReceive.tsx b/carpincho-wallet/src/components/TokenReceive.tsx
index a310c1e6..d20abbf2 100644
--- a/carpincho-wallet/src/components/TokenReceive.tsx
+++ b/carpincho-wallet/src/components/TokenReceive.tsx
@@ -1,5 +1,5 @@
 import QRCode from 'react-qr-code'
-import { CopyPartyIdButton } from '@/components/CopyPartyIdButton'
+import { DetailRow } from '@/components/ui/DetailRow'
 
 interface TokenReceiveProps {
   partyId: string
@@ -21,16 +21,12 @@ export const TokenReceive = ({ partyId }: TokenReceiveProps): JSX.Element => (
         level="M"
       />
     </div>
-    <div className="w-full">
-      <div className="mb-1.5 px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-        Your party ID
-      </div>
-      <div className="flex items-start gap-2 rounded-md border border-border bg-surface px-3 py-2.5">
-        <span className="min-w-0 flex-1 break-all font-mono text-[0.8rem] leading-5 text-foreground">
-          {partyId}
-        </span>
-        <CopyPartyIdButton partyId={partyId} />
-      </div>
-    </div>
+    <dl className="m-0 w-full">
+      <DetailRow
+        label="Your party ID"
+        value={partyId}
+        copyLabel="party ID"
+      />
+    </dl>
   </div>
 )
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
index 1035ed83..11cca663 100644
--- a/carpincho-wallet/src/components/ui/DetailRow.tsx
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -1,5 +1,4 @@
 import { Copyable } from '@/components/ui/Copyable'
-import { cn } from '@/utils/cn'
 
 interface DetailRowProps {
   label: string
@@ -7,25 +6,18 @@ interface DetailRowProps {
   copyLabel?: string
 }
 
-// Label/value pair for the detail sheets; the copy control sits next to the title, value below.
-// Copyable identifier values (those with a copyLabel) get a framed code-block box.
+// Label/value pair for the detail sheets: a copy control sits by the title and the value
+// renders in a framed box. copyLabel overrides the copy button's accessible label.
 export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Element => (
   <div className="grid gap-1">
     <div className="flex items-center gap-1.5">
       <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
-      {copyLabel === undefined ? null : (
-        <Copyable
-          value={value}
-          label={copyLabel}
-        />
-      )}
+      <Copyable
+        value={value}
+        label={copyLabel ?? label}
+      />
     </div>
-    <dd
-      className={cn(
-        'm-0 break-all font-mono text-[0.74rem] leading-5 text-foreground',
-        copyLabel !== undefined && 'rounded-md border border-border bg-muted px-3 py-2',
-      )}
-    >
+    <dd className="m-0 break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-[0.74rem] leading-5 text-foreground">
       {value}
     </dd>
   </div>
diff --git a/carpincho-wallet/src/components/ui/JsonView.tsx b/carpincho-wallet/src/components/ui/JsonView.tsx
index 389c703d..99462afa 100644
--- a/carpincho-wallet/src/components/ui/JsonView.tsx
+++ b/carpincho-wallet/src/components/ui/JsonView.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/utils/cn'
 
 // Map the json tree's CSS variables onto the wallet's existing token palette.
 const THEME_STYLE: CSSProperties = {
+  fontSize: '0.74rem',
   '--w-rjv-font-family': 'var(--font-mono)',
   '--w-rjv-font-size': '0.74rem',
   '--w-rjv-background-color': 'transparent',
diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index eb3292c6..234851f1 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Alert } from '@/components/ui/Alert'
-import { SecondaryButton } from '@/components/ui/Button'
+import { PrimaryButton } from '@/components/ui/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
 import { Copyable } from '@/components/ui/Copyable'
 import { DetailRow } from '@/components/ui/DetailRow'
@@ -9,6 +9,7 @@ import { JsonView } from '@/components/ui/JsonView'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
 import { type ActiveContract, listActiveContracts as defaultList } from '@/ledger/contracts'
+import { shortMiddle } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
 
 interface ActiveContractsUtilProps {
@@ -18,16 +19,26 @@ interface ActiveContractsUtilProps {
 
 // One active contract as a collapsible card: id + chevron, args behind an expander.
 const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
-  <Collapsible className="rounded-md border border-border bg-surface p-3">
+  <Collapsible className="group rounded-md border border-border bg-surface p-3">
     <div className="flex items-start gap-2">
       <div className="min-w-0 flex-1">
-        <DetailRow
-          label="Contract ID"
-          value={contract.contractId}
-          copyLabel="contract ID"
-        />
+        <div className="mb-1 flex items-center gap-1.5">
+          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
+            Contract ID
+          </span>
+          <Copyable
+            value={contract.contractId}
+            label="contract ID"
+          />
+        </div>
+        <div className="break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-[0.74rem] leading-5 text-foreground">
+          <span className="block truncate group-data-[state=open]:hidden">
+            {shortMiddle(contract.contractId, 10, 8)}
+          </span>
+          <span className="hidden group-data-[state=open]:block">{contract.contractId}</span>
+        </div>
       </div>
-      <CollapsibleTrigger className="group grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
+      <CollapsibleTrigger className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
         <span className="sr-only">Toggle contract details</span>
         <span className="transition-transform group-data-[state=open]:rotate-180">
           {CHEVRON_DOWN_ICON}
@@ -116,7 +127,7 @@ export const ActiveContractsUtil = ({
           className="font-mono text-[0.9rem] normal-case tracking-normal"
         />
       </label>
-      <SecondaryButton
+      <PrimaryButton
         className="w-full"
         disabled={busy}
         onClick={() => {
@@ -124,14 +135,14 @@ export const ActiveContractsUtil = ({
         }}
       >
         {busy ? 'Refreshing...' : 'Refresh contracts'}
-      </SecondaryButton>
+      </PrimaryButton>
       {error === undefined ? null : <Alert variant="error">{error}</Alert>}
       {contracts.length === 0 ? (
         <p className="rounded-md border border-dashed border-border px-3 py-6 text-center text-[0.9rem] font-medium text-muted-foreground">
           {loaded ? 'No active contracts.' : 'Loading active contracts...'}
         </p>
       ) : (
-        <div className="flex flex-col gap-3">
+        <div className="-mx-1 flex max-h-[22rem] flex-col gap-3 overflow-y-auto px-1">
           {contracts.map((contract) => (
             <ContractCard
               key={contract.contractId}
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 5153cf9a..7627a457 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -106,7 +106,7 @@ describe('UtilsPanel', () => {
     renderPanel(api)
 
     await userEvent.click(screen.getByRole('button', { name: /Active contracts/ }))
-    await screen.findByText('cid-1')
+    await screen.findAllByText('cid-1')
     await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
     await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
 
diff --git a/carpincho-wallet/test/components/ui/DetailRow.test.tsx b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
index 942b5f6e..112c532b 100644
--- a/carpincho-wallet/test/components/ui/DetailRow.test.tsx
+++ b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
@@ -7,8 +7,8 @@ import { TooltipProvider } from '@/components/ui/Tooltip'
 describe('DetailRow', () => {
   afterEach(cleanup)
 
-  it('shows a copy button only when copyLabel is set', () => {
-    const { rerender } = render(
+  it('renders the title, value, and a copy button labelled from the title', () => {
+    render(
       <TooltipProvider>
         <dl>
           <DetailRow
@@ -18,9 +18,13 @@ describe('DetailRow', () => {
         </dl>
       </TooltipProvider>,
     )
-    assert.equal(screen.queryByRole('button', { name: /Copy/i }), null)
+    assert.ok(screen.getByText('party'))
+    assert.equal(screen.getByText('alice::party').textContent, 'alice::party')
+    assert.ok(screen.getByRole('button', { name: 'Copy party' }))
+  })
 
-    rerender(
+  it('uses copyLabel for the copy button when provided', () => {
+    render(
       <TooltipProvider>
         <dl>
           <DetailRow
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index bd5537cf..30aede81 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -46,7 +46,7 @@ describe('ActiveContractsUtil', () => {
     const listActiveContracts = (async () => [CONTRACT]) as typeof ListFn
     renderUtil(listActiveContracts)
 
-    await screen.findByText('cid-1')
+    await screen.findAllByText('cid-1')
     assert.ok(screen.getByRole('button', { name: /Copy contract ID/i }))
 
     await userEvent.click(screen.getByRole('button', { name: /toggle contract details/i }))

From a4b8faffa55daa4fca7f336554e7b32806cd2aef Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:09:52 -0300
Subject: [PATCH 063/121] fix(carpincho-wallet): auto-accept copy applies to
 all incoming transfers, not just amulet

---
 carpincho-wallet/src/components/AutoAcceptSetting.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/components/AutoAcceptSetting.tsx b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
index 673a240d..5761dcaf 100644
--- a/carpincho-wallet/src/components/AutoAcceptSetting.tsx
+++ b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
@@ -13,9 +13,9 @@ interface AutoAcceptSettingProps {
 }
 
 const AUTO_ACCEPT_TOOLTIP =
-  "When this is on, any Amulet someone sends you drops straight into your wallet. Turn it off and you'll have to accept each incoming transfer yourself."
+  "When this is on, any incoming transfer someone sends you drops straight into your wallet. Turn it off and you'll have to accept each one yourself."
 
-// Receiver opt-in for Amulet auto-accept, surfaced as a setting row on the Assets tab.
+// Receiver opt-in for auto-accepting incoming transfers, surfaced as a setting row on the Assets tab.
 export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX.Element => {
   const vault = useVault()
   const preapproval = useAmuletPreapproval(account, {
@@ -44,14 +44,14 @@ export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX
     try {
       if (next) {
         await preapproval.enable()
-        toast.success('Amulet auto-accept enabled')
+        toast.success('Auto-accept enabled')
       } else {
         await preapproval.disable()
-        toast.success('Amulet auto-accept disabled')
+        toast.success('Auto-accept disabled')
       }
     } catch (error) {
       setOptimistic(undefined)
-      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
+      toast.error(error instanceof Error ? error.message : 'Auto-accept failed')
     }
   }
 

From fd6bb6b4a541b6342fef481c8f3341c0c1d957c4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:16:50 -0300
Subject: [PATCH 064/121] refactor(carpincho-wallet): drop dead mono flag from
 activity detail rows

---
 .../src/components/ActivityList.tsx           | 12 +++----
 .../test/components/ui/DetailRow.test.tsx     | 31 ++++++++-----------
 2 files changed, 18 insertions(+), 25 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 69b3ecc8..8f98193e 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -28,7 +28,6 @@ const txTitle = (tx: TransactionRecord): string => tx.summary ?? txMethodLabel(t
 interface TxDetailRow {
   label: string
   value: string | number
-  mono?: boolean
 }
 
 // Scalar metadata rows shown before the command payload block.
@@ -46,18 +45,18 @@ const txDetailRows = (tx: TransactionRecord): TxDetailRow[] => {
   }
   rows.push(
     { label: 'Network', value: tx.network },
-    { label: 'Party', value: tx.partyId, mono: true },
+    { label: 'Party', value: tx.partyId },
     { label: 'Method', value: txMethodLabel(tx.method) },
-    { label: 'Prepared hash', value: tx.preparedTransactionHash, mono: true },
+    { label: 'Prepared hash', value: tx.preparedTransactionHash },
   )
   if (tx.commandId !== undefined) {
-    rows.push({ label: 'Command ID', value: tx.commandId, mono: true })
+    rows.push({ label: 'Command ID', value: tx.commandId })
   }
   if (tx.submissionId !== undefined) {
-    rows.push({ label: 'Submission ID', value: tx.submissionId, mono: true })
+    rows.push({ label: 'Submission ID', value: tx.submissionId })
   }
   if (tx.updateId !== undefined) {
-    rows.push({ label: 'Update ID', value: tx.updateId, mono: true })
+    rows.push({ label: 'Update ID', value: tx.updateId })
   }
   if (tx.completionOffset !== undefined) {
     rows.push({ label: 'Completion offset', value: tx.completionOffset })
@@ -98,7 +97,6 @@ const TransactionDetails = ({ tx }: { tx: TransactionRecord }): JSX.Element => (
           key={row.label}
           label={row.label}
           value={String(row.value)}
-          copyLabel={row.mono ? row.label : undefined}
         />
       ))}
     </dl>
diff --git a/carpincho-wallet/test/components/ui/DetailRow.test.tsx b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
index 112c532b..4070aa42 100644
--- a/carpincho-wallet/test/components/ui/DetailRow.test.tsx
+++ b/carpincho-wallet/test/components/ui/DetailRow.test.tsx
@@ -2,21 +2,18 @@ import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import { DetailRow } from '@/components/ui/DetailRow'
-import { TooltipProvider } from '@/components/ui/Tooltip'
 
 describe('DetailRow', () => {
   afterEach(cleanup)
 
   it('renders the title, value, and a copy button labelled from the title', () => {
     render(
-      <TooltipProvider>
-        <dl>
-          <DetailRow
-            label="party"
-            value="alice::party"
-          />
-        </dl>
-      </TooltipProvider>,
+      <dl>
+        <DetailRow
+          label="party"
+          value="alice::party"
+        />
+      </dl>,
     )
     assert.ok(screen.getByText('party'))
     assert.equal(screen.getByText('alice::party').textContent, 'alice::party')
@@ -25,15 +22,13 @@ describe('DetailRow', () => {
 
   it('uses copyLabel for the copy button when provided', () => {
     render(
-      <TooltipProvider>
-        <dl>
-          <DetailRow
-            label="party"
-            value="alice::party"
-            copyLabel="party ID"
-          />
-        </dl>
-      </TooltipProvider>,
+      <dl>
+        <DetailRow
+          label="party"
+          value="alice::party"
+          copyLabel="party ID"
+        />
+      </dl>,
     )
     assert.ok(screen.getByRole('button', { name: 'Copy party ID' }))
   })

From ffdc41855dca27072a1247dbec3b1429135316a4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:24:22 -0300
Subject: [PATCH 065/121] refactor(carpincho-wallet): extract shared
 UpdateIdResult and CopyableLabel primitives

---
 .../src/components/ActivityList.tsx           | 17 ++++------
 .../src/components/UtilsPanel.tsx             |  5 +--
 .../src/components/ui/CopyableLabel.tsx       | 25 +++++++++++++++
 .../components/utils/ActiveContractsUtil.tsx  | 32 ++++++++-----------
 .../components/utils/CreateContractUtil.tsx   | 17 ++--------
 .../components/utils/ExerciseChoiceUtil.tsx   | 17 ++--------
 .../src/components/utils/JsonField.tsx        |  4 +--
 .../src/components/utils/UpdateIdResult.tsx   | 17 ++++++++++
 8 files changed, 69 insertions(+), 65 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/CopyableLabel.tsx
 create mode 100644 carpincho-wallet/src/components/utils/UpdateIdResult.tsx

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 8f98193e..0acf3a1e 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Copyable } from '@/components/ui/Copyable'
+import { CopyableLabel } from '@/components/ui/CopyableLabel'
 import { DetailRow } from '@/components/ui/DetailRow'
 import { EYE_ICON, RECEIPT_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
@@ -102,15 +102,12 @@ const TransactionDetails = ({ tx }: { tx: TransactionRecord }): JSX.Element => (
     </dl>
     {hasCommandPayload(tx) && (
       <div className="mt-3">
-        <div className="mb-1.5 flex items-center gap-1.5">
-          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
-            Command payload
-          </span>
-          <Copyable
-            value={JSON.stringify(tx.commands, null, 2)}
-            label="command payload"
-          />
-        </div>
+        <CopyableLabel
+          className="mb-1.5"
+          label="Command payload"
+          value={JSON.stringify(tx.commands, null, 2)}
+          copyLabel="command payload"
+        />
         <JsonView value={tx.commands} />
       </div>
     )}
diff --git a/carpincho-wallet/src/components/UtilsPanel.tsx b/carpincho-wallet/src/components/UtilsPanel.tsx
index eefc1aa3..69a466cf 100644
--- a/carpincho-wallet/src/components/UtilsPanel.tsx
+++ b/carpincho-wallet/src/components/UtilsPanel.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react'
-import type { AmuletTapApi } from '@/cip56/amuletPreapproval'
 import { DarUploadPanel } from '@/components/DarUploadPanel'
 import { Alert } from '@/components/ui/Alert'
 import { Sheet } from '@/components/ui/Sheet'
@@ -28,11 +27,10 @@ const UTIL_TITLES: Record<UtilKey, string> = {
 interface UtilsPanelProps {
   account?: AccountPublic
   api?: UtilsApi
-  tapApi?: AmuletTapApi
 }
 
 // Dev tools: a util list where selecting a util opens it in a modal.
-export const UtilsPanel = ({ account, api = defaultApi, tapApi }: UtilsPanelProps): JSX.Element => {
+export const UtilsPanel = ({ account, api = defaultApi }: UtilsPanelProps): JSX.Element => {
   const [selected, setSelected] = useState<UtilKey | null>(null)
 
   if (account === undefined) {
@@ -47,7 +45,6 @@ export const UtilsPanel = ({ account, api = defaultApi, tapApi }: UtilsPanelProp
     <>
       <UtilsList
         account={account}
-        tapApi={tapApi}
         onSelect={setSelected}
       />
       <Sheet
diff --git a/carpincho-wallet/src/components/ui/CopyableLabel.tsx b/carpincho-wallet/src/components/ui/CopyableLabel.tsx
new file mode 100644
index 00000000..ed0a557f
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/CopyableLabel.tsx
@@ -0,0 +1,25 @@
+import { Copyable } from '@/components/ui/Copyable'
+import { cn } from '@/utils/cn'
+
+interface CopyableLabelProps {
+  label: string
+  value: string
+  copyLabel?: string
+  className?: string
+}
+
+// An uppercase section title with a copy control for the section's value (e.g. a JSON block).
+export const CopyableLabel = ({
+  label,
+  value,
+  copyLabel,
+  className,
+}: CopyableLabelProps): JSX.Element => (
+  <div className={cn('flex items-center gap-1.5', className)}>
+    <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</span>
+    <Copyable
+      value={value}
+      label={copyLabel ?? label}
+    />
+  </div>
+)
diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 234851f1..2067fa8b 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 import { Alert } from '@/components/ui/Alert'
 import { PrimaryButton } from '@/components/ui/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
-import { Copyable } from '@/components/ui/Copyable'
+import { CopyableLabel } from '@/components/ui/CopyableLabel'
 import { DetailRow } from '@/components/ui/DetailRow'
 import { CHEVRON_DOWN_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
@@ -22,15 +22,12 @@ const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element =
   <Collapsible className="group rounded-md border border-border bg-surface p-3">
     <div className="flex items-start gap-2">
       <div className="min-w-0 flex-1">
-        <div className="mb-1 flex items-center gap-1.5">
-          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
-            Contract ID
-          </span>
-          <Copyable
-            value={contract.contractId}
-            label="contract ID"
-          />
-        </div>
+        <CopyableLabel
+          className="mb-1"
+          label="Contract ID"
+          value={contract.contractId}
+          copyLabel="contract ID"
+        />
         <div className="break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-[0.74rem] leading-5 text-foreground">
           <span className="block truncate group-data-[state=open]:hidden">
             {shortMiddle(contract.contractId, 10, 8)}
@@ -59,15 +56,12 @@ const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element =
         />
       )}
       <div>
-        <div className="mb-1.5 flex items-center gap-1.5">
-          <span className="text-[0.7rem] font-semibold uppercase text-muted-foreground">
-            Create arguments
-          </span>
-          <Copyable
-            value={JSON.stringify(contract.createArgument, null, 2)}
-            label="create arguments"
-          />
-        </div>
+        <CopyableLabel
+          className="mb-1.5"
+          label="Create arguments"
+          value={JSON.stringify(contract.createArgument, null, 2)}
+          copyLabel="create arguments"
+        />
         <JsonView value={contract.createArgument} />
       </div>
     </CollapsibleContent>
diff --git a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
index d0441f54..9da0a85e 100644
--- a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
+++ b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { PrimaryButton } from '@/components/ui/Button'
-import { Copyable } from '@/components/ui/Copyable'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
 import { JsonField } from '@/components/utils/JsonField'
+import { UpdateIdResult } from '@/components/utils/UpdateIdResult'
 import { createContract as defaultCreateContract } from '@/ledger/contracts'
 import { parseJsonObject } from '@/utils/json'
 import type { AccountPublic } from '@/vault/types'
@@ -77,20 +77,7 @@ export const CreateContractUtil = ({
         onChange={setJson}
         onValidityChange={setJsonValid}
       />
-      {updateId === undefined ? null : (
-        <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
-          <div className="min-w-0">
-            <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
-              Update ID
-            </div>
-            <div className="break-all font-mono text-[0.82rem] text-foreground">{updateId}</div>
-          </div>
-          <Copyable
-            value={updateId}
-            label="update ID"
-          />
-        </div>
-      )}
+      {updateId === undefined ? null : <UpdateIdResult updateId={updateId} />}
       <PrimaryButton
         type="submit"
         className="w-full"
diff --git a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
index 5d5d88cf..8c819c6f 100644
--- a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { PrimaryButton } from '@/components/ui/Button'
-import { Copyable } from '@/components/ui/Copyable'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
 import { JsonField } from '@/components/utils/JsonField'
+import { UpdateIdResult } from '@/components/utils/UpdateIdResult'
 import { exerciseContract as defaultExerciseContract } from '@/ledger/contracts'
 import { parseJsonObject } from '@/utils/json'
 import type { AccountPublic } from '@/vault/types'
@@ -112,20 +112,7 @@ export const ExerciseChoiceUtil = ({
         onChange={setJson}
         onValidityChange={setJsonValid}
       />
-      {updateId === undefined ? null : (
-        <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
-          <div className="min-w-0">
-            <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
-              Update ID
-            </div>
-            <div className="break-all font-mono text-[0.82rem] text-foreground">{updateId}</div>
-          </div>
-          <Copyable
-            value={updateId}
-            label="update ID"
-          />
-        </div>
-      )}
+      {updateId === undefined ? null : <UpdateIdResult updateId={updateId} />}
       <PrimaryButton
         type="submit"
         className="w-full"
diff --git a/carpincho-wallet/src/components/utils/JsonField.tsx b/carpincho-wallet/src/components/utils/JsonField.tsx
index adede285..b905011d 100644
--- a/carpincho-wallet/src/components/utils/JsonField.tsx
+++ b/carpincho-wallet/src/components/utils/JsonField.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { INPUT_CLASS } from '@/components/ui/TextInput'
 import { cn } from '@/utils/cn'
 import { formatJsonInput, parseJsonObject } from '@/utils/json'
@@ -34,7 +34,7 @@ export const JsonField = ({
   onValidityChange,
   placeholder,
 }: JsonFieldProps): JSX.Element => {
-  const errorMessage = validate(value, label)
+  const errorMessage = useMemo(() => validate(value, label), [value, label])
 
   useEffect(() => {
     onValidityChange?.(errorMessage === undefined)
diff --git a/carpincho-wallet/src/components/utils/UpdateIdResult.tsx b/carpincho-wallet/src/components/utils/UpdateIdResult.tsx
new file mode 100644
index 00000000..c31f3a38
--- /dev/null
+++ b/carpincho-wallet/src/components/utils/UpdateIdResult.tsx
@@ -0,0 +1,17 @@
+import { Copyable } from '@/components/ui/Copyable'
+
+// Success banner showing the ledger update id a command produced, with copy.
+export const UpdateIdResult = ({ updateId }: { updateId: string }): JSX.Element => (
+  <div className="flex items-center justify-between gap-2 rounded-md border border-success/40 bg-success-soft px-3 py-2">
+    <div className="min-w-0">
+      <div className="text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground">
+        Update ID
+      </div>
+      <div className="break-all font-mono text-[0.82rem] text-foreground">{updateId}</div>
+    </div>
+    <Copyable
+      value={updateId}
+      label="update ID"
+    />
+  </div>
+)

From 0b01f1ad163adc31952ce74f08d45bc32f72a005 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:30:42 -0300
Subject: [PATCH 066/121] docs(carpincho-wallet): sync agents and architecture
 with the utils-tab redesign

---
 carpincho-wallet/AGENTS.md       |  2 +-
 carpincho-wallet/architecture.md | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index b8ad511a..ad345478 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -13,7 +13,7 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 | Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
 | Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer at Settings → Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
 | Fonts | Self-hosted via `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Imported once in `src/main.tsx`; works offline in the extension popup. Manrope is the entire UI: `font-display` for hero wordmarks, view-level headings, section markers (heavier weight for hierarchy) and `font-sans` for UI chrome / body / labels / buttons. `font-mono` (JetBrains Mono) is for party IDs, hashes, RPC URLs, JSON payloads, status eyebrows |
-| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` Amulet auto-accept toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `LedgerToolsPanel` (Utils — developer ledger tools); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
+| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`, `CREATE_ICON`, `EXERCISE_ICON`, `CONTRACTS_ICON`, `UPLOAD_ICON`, `DROPLET_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` auto-accept-incoming-transfers toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `UtilsPanel` (Utils — developer ledger tools rendered as a scannable list where each item opens in a centered modal `Sheet`: Create contract, Exercise choice, Active contracts, and Upload DAR, plus a Tap Amulet faucet action row that requests 100 AMT and reports progress via toast — the faucet moved here from the Assets tab); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
 | Feedback | Toast vs inline Alert vs error prop | Transient system feedback (action results, async errors, network failures, copy confirmations) renders via `toast.*` from [`@/components/ui/toast.ts`](src/components/ui/toast.ts) — never as inline `Alert`. Mount the `ToastProvider` once in `App.tsx`. Field-level error state (mismatched passwords, wrong current password on a verify step, invalid input) uses the `error` prop on `TextInput` / `PasswordInput` (danger border + `aria-invalid`); pair it with `aria-errormessage` pointing at a sibling caption `<p>` when there is a human-readable reason to render. Inline `Alert` is reserved for form-level errors that cannot be attributed to a single field and for persistent contextual hints inside cards. All callers (React components, WalletConnect handlers in `src/wc/`, vault errors, extension bridge) use the imperative `toast` import directly. Variant durations: non-critical variants (`info` / `success` / `warning`) auto-dismiss after 5 s; only `error` (must-read) persists until dismissed. Identical messages collapse — emitting a string message that matches a visible toast of the same variant replaces it with a fresh entry (so rapid repeats like copy clicks collapse to a single toast and restart its timer); distinct messages of the same variant (a copy confirmation vs an RPC test result) stack separately. Toasts render as elevated `bg-surface` cards (border + `shadow-popover`) with a variant-tinted icon badge and a left accent rail, sized to the app content width (`w-popup`). The message body caps at `max-h-40` and scrolls when longer; `error` toasts (only) carry a copy-icon button that copies the rendered message text. Max 3 visible, top-center, newest on top |
 | Package manager | npm | lockfile: `package-lock.json` |
 | Data fetching | @tanstack/react-query | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); a single `QueryClient` is mounted in `App.tsx`. Read/list logic lives in `src/cip56/*`, wrapped by hooks in `src/hooks/*` |
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 1eec13ac..e4e32c52 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -14,7 +14,7 @@
 | Wallet protocol | Injected CIP-0103 provider + optional WalletConnect Sign Client 2.x | Browser extension provider events by default; Reown relay only for WalletConnect fallback |
 | Cryptography | @noble/ed25519 3.x, @noble/hashes 1.x | Ed25519 signing; PBKDF2 + AES-GCM vault |
 | Data fetching | @tanstack/react-query 5.x | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); imperative refetch after sends. Single `QueryClient` mounted in `App.tsx` |
-| UI primitives | React 18 + Radix UI | `@radix-ui/react-{dialog,tabs,toast,tooltip}` for modals/tabs/toasts/tooltips; local wrappers (Button family, TextInput, PasswordInput, Alert, Card, AccountAvatar, PendingActionCard, Sheet, Tabs, OptionList, Stepper, DangerConfirm, MenuRow, ToastProvider, Tooltip) for static visuals and Radix re-skins; shared icon SVG literals live in `src/components/ui/icons.tsx`; `Sheet` is the shared Radix Dialog scaffold for sheet-style flows (overlay, title, close button) and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`; right opens as a 400px-wide top-aligned drawer clamped by `100vw`; center renders a centered modal dialog); `ToastProvider` and `TooltipProvider` are both mounted once in `App.tsx`; `TextInput` and `PasswordInput` accept `error?: boolean` which applies a danger border, a persistent focus ring, and `aria-invalid`; `Button.tsx` exports `GHOST_BUTTON_CLASS` / `ICON_BUTTON_CLASS` for ad-hoc buttons (e.g. `PasswordInput`'s show/hide button) |
+| UI primitives | React 18 + Radix UI | `@radix-ui/react-{collapsible,dialog,tabs,toast,tooltip}` for modals/tabs/toasts/tooltips; local wrappers (Button family, TextInput, PasswordInput, Alert, Card, AccountAvatar, PendingActionCard, Sheet, Tabs, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) for static visuals and Radix re-skins; shared icon SVG literals live in `src/components/ui/icons.tsx`; `Sheet` is the shared Radix Dialog scaffold for sheet-style flows (overlay, title, close button) and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`; right opens as a 400px-wide top-aligned drawer clamped by `100vw`; center renders a centered modal dialog); `ToastProvider` and `TooltipProvider` are both mounted once in `App.tsx`; `TextInput` and `PasswordInput` accept `error?: boolean` which applies a danger border, a persistent focus ring, and `aria-invalid`; `Button.tsx` exports `GHOST_BUTTON_CLASS` / `ICON_BUTTON_CLASS` for ad-hoc buttons (e.g. `PasswordInput`'s show/hide button) |
 | Styling | Tailwind CSS v4 (`@tailwindcss/vite`) | Utility classes inline in JSX; `src/index.css` declares CSS-variable tokens on `:root` / `[data-theme="dark"]` and exposes them to Tailwind through `@theme inline`; `@layer base` holds global resets; Radix `data-[state=...]` and `data-[highlighted]` attrs drive interactive variants |
 | Fonts | `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Self-hosted variable fonts so the extension popup works offline. Manrope is the whole UI: `font-sans` (UI chrome, body, labels, buttons) and `font-display` (hero wordmarks, view headings, section markers — heavier weight for hierarchy). JetBrains Mono is `font-mono` (party IDs, hashes, RPC URLs, JSON payloads) |
 | Theming | Light / dark / system selector in the drawer menu | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), resolves `system` against `prefers-color-scheme` (re-resolving on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount; the selector lives at Settings → Theme (`src/components/menu/ThemeMenu.tsx`) with no header toggle; the Tailwind `dark:` variant is rebound to `[data-theme='dark']` via `@custom-variant` |
@@ -36,13 +36,17 @@ src/
                     SendTokenForm, SendConfirm, ContactsPicker, AmountField,
                     ConnectionFooter,
                     NewPasswordFields, CreateAccountForm, PasswordStrengthIndicator,
-                    SecurityPanel, menu/* drawer, ui/* primitives).
+                    SecurityPanel, UtilsPanel, utils/* (UtilsList, CreateContractUtil,
+                    ExerciseChoiceUtil, ActiveContractsUtil, DarUploadPanel, JsonField,
+                    UpdateIdResult), menu/* drawer, ui/* primitives).
                     ui/* wraps Radix headless primitives (Tabs on top of
                     @radix-ui/react-tabs; Sheet on top of @radix-ui/react-dialog;
-                    Select on top of @radix-ui/react-select)
+                    Select on top of @radix-ui/react-select;
+                    Collapsible on top of @radix-ui/react-collapsible)
                     and provides static visuals (Button, TextInput, PasswordInput,
                     Alert, Card, OptionList, Stepper, DangerConfirm, AccountAvatar,
-                    PendingActionCard, Select, DetailRow).
+                    PendingActionCard, Select, DetailRow, Collapsible, Copyable,
+                    CopyableLabel, JsonView).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
   cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,

From fa5a4d1da6b752e6b65dc91859008e6fab269335 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:46:31 -0300
Subject: [PATCH 067/121] feat(carpincho-wallet): add whole-vault export/import
 to VaultContext

---
 carpincho-wallet/src/vault/VaultContext.tsx   |  79 +++++++++-
 carpincho-wallet/src/vault/types.ts           |  19 +++
 .../test/components/AccountCard.test.tsx      |   2 +
 .../test/components/AccountsDialog.test.tsx   |   2 +
 .../test/components/ActivityPanel.test.tsx    |   2 +
 .../test/components/AssetsPanel.test.tsx      |   2 +
 .../components/AutoAcceptSetting.test.tsx     |   2 +
 .../components/CreateAccountForm.test.tsx     |   2 +
 .../test/components/Header.test.tsx           |   2 +
 .../test/components/HomeTabs.test.tsx         |   2 +
 .../test/components/MenuSheet.test.tsx        |   2 +
 .../test/components/PrivateKeyPanel.test.tsx  |   2 +
 .../test/components/SecurityPanel.test.tsx    |   2 +
 .../test/components/SendConfirm.test.tsx      |   2 +
 .../test/components/TokenDetailSheet.test.tsx |   2 +
 .../test/components/UtilsPanel.test.tsx       |   2 +
 .../utils/CreateContractUtil.test.tsx         |   2 +
 .../utils/ExerciseChoiceUtil.test.tsx         |   2 +
 .../test/components/utils/UtilsList.test.tsx  |   2 +
 .../test/vault/exportVault.test.tsx           |  70 +++++++++
 .../test/vault/importVault.test.tsx           | 138 ++++++++++++++++++
 .../test/views/CreateVault.test.tsx           |   2 +
 .../test/views/OnboardingFlow.test.tsx        |   2 +
 23 files changed, 342 insertions(+), 2 deletions(-)
 create mode 100644 carpincho-wallet/test/vault/exportVault.test.tsx
 create mode 100644 carpincho-wallet/test/vault/importVault.test.tsx

diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 7983ce55..348c2ca4 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -15,7 +15,7 @@ import { broadcastWalletEvent } from '@/extension/eventBroadcast'
 import { persistWalletSnapshot } from '@/extension/walletSnapshot'
 import { accountToCip103Wallet } from '@/provider/accounts'
 import { assertSecureContext, decryptVault, encryptVault } from '@/vault/crypto'
-import { signMessageBase64 } from '@/vault/keypair'
+import { derivePublicKeyBase64, signMessageBase64 } from '@/vault/keypair'
 import { ensurePasswordStrengthReady, isPasswordAcceptable } from '@/vault/passwordStrength'
 import {
   clearLockAt,
@@ -36,7 +36,14 @@ import {
   writeAutoLockOption,
   writeFreshVault,
 } from '@/vault/storage'
-import type { AccountPublic, AccountSecret, TransactionRecord, VaultPlaintext } from '@/vault/types'
+import type {
+  AccountPublic,
+  AccountSecret,
+  ImportVaultResult,
+  TransactionRecord,
+  VaultEnvelope,
+  VaultPlaintext,
+} from '@/vault/types'
 import { wipeWalletConnectStorage } from '@/wc/storage'
 
 const AUTO_LOCK_MS: Record<AutoLockOption, number | null> = {
@@ -106,6 +113,8 @@ export interface VaultContextValue {
   }) => Promise<AccountPublic>
   removeAccount: (id: string) => Promise<void>
   exportPrivateKey: (accountId: string) => string
+  exportVault: () => VaultEnvelope
+  importVault: (envelope: VaultEnvelope) => Promise<ImportVaultResult>
   signMessage: (accountId: string, messageBase64: string) => Promise<string>
   recordTransaction: (
     args: Omit<TransactionRecord, 'id' | 'createdAt'>,
@@ -363,6 +372,68 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     return acct.privateKeyHex
   }, [])
 
+  // Builds a portable backup of every account. Pure projection: omits id/createdAt,
+  // never logged or persisted. Callers must drop the result as soon as it is shown.
+  const exportVault = useCallback((): VaultEnvelope => {
+    if (unlockedPlaintext === null) {
+      throw new Error('vault locked')
+    }
+    return {
+      v: 1,
+      accounts: unlockedPlaintext.accounts.map((a) => ({
+        name: a.name,
+        partyId: a.partyId,
+        publicKeyBase64: a.publicKeyBase64,
+        privateKeyHex: a.privateKeyHex,
+        network: a.network,
+      })),
+    }
+  }, [])
+
+  // Restores accounts from an envelope. Per entry: the private key must derive the
+  // stored public key and the partyId must be `hint::namespace`; duplicates are skipped.
+  // One bad entry never aborts the rest. No Canton fingerprint check (not derivable here).
+  const importVault = useCallback(
+    async (envelope: VaultEnvelope): Promise<ImportVaultResult> => {
+      if (unlockedPlaintext === null) {
+        throw new Error('vault locked')
+      }
+      if (envelope?.v !== 1 || !Array.isArray(envelope.accounts)) {
+        throw new Error('unsupported vault envelope')
+      }
+      let imported = 0
+      let skipped = 0
+      let rejected = 0
+      for (const entry of envelope.accounts) {
+        let derived: string
+        try {
+          derived = await derivePublicKeyBase64(entry.privateKeyHex)
+        } catch {
+          rejected += 1
+          continue
+        }
+        if (derived !== entry.publicKeyBase64 || !/^.+::.+$/.test(entry.partyId)) {
+          rejected += 1
+          continue
+        }
+        if (unlockedPlaintext.accounts.some((a) => a.partyId === entry.partyId)) {
+          skipped += 1
+          continue
+        }
+        await addAccount({
+          name: entry.name,
+          partyId: entry.partyId,
+          network: entry.network,
+          privateKeyHex: entry.privateKeyHex,
+          publicKeyBase64: entry.publicKeyBase64,
+        })
+        imported += 1
+      }
+      return { imported, skipped, rejected }
+    },
+    [addAccount],
+  )
+
   const verifyPassword = useCallback(
     (password: string): boolean => cachedPassword !== null && cachedPassword === password,
     [],
@@ -512,6 +583,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       addAccount,
       removeAccount,
       exportPrivateKey,
+      exportVault,
+      importVault,
       signMessage,
       recordTransaction,
       changePassword,
@@ -532,6 +605,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     addAccount,
     removeAccount,
     exportPrivateKey,
+    exportVault,
+    importVault,
     signMessage,
     recordTransaction,
     changePassword,
diff --git a/carpincho-wallet/src/vault/types.ts b/carpincho-wallet/src/vault/types.ts
index d083a9fc..e26a247c 100644
--- a/carpincho-wallet/src/vault/types.ts
+++ b/carpincho-wallet/src/vault/types.ts
@@ -61,3 +61,22 @@ export interface TransactionRecord {
   commandCount?: number
   summary?: string
 }
+
+export interface VaultEnvelopeAccount {
+  name: string
+  partyId: string
+  publicKeyBase64: string
+  privateKeyHex: string
+  network: string
+}
+
+export interface VaultEnvelope {
+  v: 1
+  accounts: VaultEnvelopeAccount[]
+}
+
+export interface ImportVaultResult {
+  imported: number
+  skipped: number
+  rejected: number
+}
diff --git a/carpincho-wallet/test/components/AccountCard.test.tsx b/carpincho-wallet/test/components/AccountCard.test.tsx
index a56d7f8b..982f280e 100644
--- a/carpincho-wallet/test/components/AccountCard.test.tsx
+++ b/carpincho-wallet/test/components/AccountCard.test.tsx
@@ -50,6 +50,8 @@ const baseVault = (): VaultContextValue =>
     }),
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AccountsDialog.test.tsx b/carpincho-wallet/test/components/AccountsDialog.test.tsx
index ffd6fc55..e8773846 100644
--- a/carpincho-wallet/test/components/AccountsDialog.test.tsx
+++ b/carpincho-wallet/test/components/AccountsDialog.test.tsx
@@ -50,6 +50,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     }),
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index 0ce81900..cdc7f37b 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -36,6 +36,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 0af11cad..55e94987 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -40,6 +40,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
index 41589956..7503eda5 100644
--- a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
+++ b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
@@ -36,6 +36,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/CreateAccountForm.test.tsx b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
index 2efe27c7..f0e75492 100644
--- a/carpincho-wallet/test/components/CreateAccountForm.test.tsx
+++ b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
@@ -33,6 +33,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     }),
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/Header.test.tsx b/carpincho-wallet/test/components/Header.test.tsx
index acadc88e..e7cccd29 100644
--- a/carpincho-wallet/test/components/Header.test.tsx
+++ b/carpincho-wallet/test/components/Header.test.tsx
@@ -30,6 +30,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
   }),
   removeAccount: async () => undefined,
   exportPrivateKey: () => '',
+  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 2ff93db7..04c64790 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -65,6 +65,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index 83722bc6..56e121a9 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -30,6 +30,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
   }),
   removeAccount: async () => undefined,
   exportPrivateKey: () => '',
+  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
index 34cc4fbb..91bf2d2d 100644
--- a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
+++ b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
@@ -38,6 +38,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
   addAccount: async () => PRIMARY_ACCOUNT,
   removeAccount: async () => undefined,
   exportPrivateKey: () => '',
+  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/SecurityPanel.test.tsx b/carpincho-wallet/test/components/SecurityPanel.test.tsx
index 078f228c..6650704f 100644
--- a/carpincho-wallet/test/components/SecurityPanel.test.tsx
+++ b/carpincho-wallet/test/components/SecurityPanel.test.tsx
@@ -31,6 +31,8 @@ const baseVault = (): VaultContextValue => ({
   }),
   removeAccount: async () => undefined,
   exportPrivateKey: () => '',
+  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
index 8dbae060..d2377420 100644
--- a/carpincho-wallet/test/components/SendConfirm.test.tsx
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -43,6 +43,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index b2106e1c..6f512a22 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -67,6 +67,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 7627a457..51749fe4 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -42,6 +42,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
index 40adf289..ca84aa56 100644
--- a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
@@ -35,6 +35,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
index 49aa44e0..ade86383 100644
--- a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
@@ -35,6 +35,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/UtilsList.test.tsx b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
index 85dd191f..407d2d2b 100644
--- a/carpincho-wallet/test/components/utils/UtilsList.test.tsx
+++ b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
@@ -34,6 +34,8 @@ const baseVault = (): VaultContextValue =>
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/vault/exportVault.test.tsx b/carpincho-wallet/test/vault/exportVault.test.tsx
new file mode 100644
index 00000000..ebce90ea
--- /dev/null
+++ b/carpincho-wallet/test/vault/exportVault.test.tsx
@@ -0,0 +1,70 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, beforeEach, describe, it } from 'node:test'
+import { act, cleanup, render } from '@testing-library/react'
+import { useVault } from '@/vault/useVault'
+import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
+
+const captureVault = (): { ref: { current: VaultContextValue | null } } => {
+  const ref: { current: VaultContextValue | null } = { current: null }
+  const Probe = (): null => {
+    ref.current = useVault()
+    return null
+  }
+  render(
+    <VaultProvider>
+      <Probe />
+    </VaultProvider>,
+  )
+  return { ref }
+}
+
+describe('VaultContext.exportVault', () => {
+  beforeEach(() => localStorage.clear())
+  afterEach(() => {
+    cleanup()
+    localStorage.clear()
+  })
+
+  it('builds a v1 envelope of every account, omitting id and createdAt', async () => {
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.addAccount({
+        name: 'alice',
+        partyId: 'alice::ns',
+        network: 'localnet',
+        privateKeyHex: 'aa'.repeat(32),
+        publicKeyBase64: 'alice-pub',
+      })
+      await ref.current?.addAccount({
+        name: 'bob',
+        partyId: 'bob::ns',
+        network: 'devnet',
+        privateKeyHex: 'bb'.repeat(32),
+        publicKeyBase64: 'bob-pub',
+      })
+    })
+
+    const envelope = ref.current?.exportVault()
+    assert.equal(envelope?.v, 1)
+    assert.equal(envelope?.accounts.length, 2)
+    assert.deepEqual(envelope?.accounts[0], {
+      name: 'alice',
+      partyId: 'alice::ns',
+      publicKeyBase64: 'alice-pub',
+      privateKeyHex: 'aa'.repeat(32),
+      network: 'localnet',
+    })
+    assert.equal(Object.hasOwn(envelope?.accounts[0] ?? {}, 'id'), false)
+    assert.equal(Object.hasOwn(envelope?.accounts[0] ?? {}, 'createdAt'), false)
+  })
+
+  it('throws when the vault is locked', async () => {
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+      ref.current?.lock()
+    })
+    assert.throws(() => ref.current?.exportVault(), /vault locked/i)
+  })
+})
diff --git a/carpincho-wallet/test/vault/importVault.test.tsx b/carpincho-wallet/test/vault/importVault.test.tsx
new file mode 100644
index 00000000..fda5cd58
--- /dev/null
+++ b/carpincho-wallet/test/vault/importVault.test.tsx
@@ -0,0 +1,138 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, beforeEach, describe, it } from 'node:test'
+import { act, cleanup, render } from '@testing-library/react'
+import { generateKeypair } from '@/vault/keypair'
+import type { VaultEnvelope } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
+
+const captureVault = (): { ref: { current: VaultContextValue | null } } => {
+  const ref: { current: VaultContextValue | null } = { current: null }
+  const Probe = (): null => {
+    ref.current = useVault()
+    return null
+  }
+  render(
+    <VaultProvider>
+      <Probe />
+    </VaultProvider>,
+  )
+  return { ref }
+}
+
+const envelopeOf = (accounts: VaultEnvelope['accounts']): VaultEnvelope => ({ v: 1, accounts })
+
+describe('VaultContext.importVault', () => {
+  beforeEach(() => localStorage.clear())
+  afterEach(() => {
+    cleanup()
+    localStorage.clear()
+  })
+
+  it('imports valid entries and reports counts, using the envelope network', async () => {
+    const kp = await generateKeypair()
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+    })
+
+    let result: { imported: number; skipped: number; rejected: number } | undefined
+    await act(async () => {
+      result = await ref.current?.importVault(
+        envelopeOf([
+          {
+            name: 'alice',
+            partyId: 'alice::ns',
+            publicKeyBase64: kp.publicKeyBase64,
+            privateKeyHex: kp.privateKeyHex,
+            network: 'devnet',
+          },
+        ]),
+      )
+    })
+
+    assert.deepEqual(result, { imported: 1, skipped: 0, rejected: 0 })
+    const alice = ref.current?.accounts.find((a) => a.name === 'alice')
+    assert.equal(alice?.network, 'devnet')
+    assert.equal(alice?.partyId, 'alice::ns')
+  })
+
+  it('rejects entries whose key does not derive the stored public key', async () => {
+    const kp = await generateKeypair()
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+    })
+
+    let result: { imported: number; skipped: number; rejected: number } | undefined
+    await act(async () => {
+      result = await ref.current?.importVault(
+        envelopeOf([
+          {
+            name: 'eve',
+            partyId: 'eve::ns',
+            publicKeyBase64: 'not-the-matching-key',
+            privateKeyHex: kp.privateKeyHex,
+            network: 'localnet',
+          },
+        ]),
+      )
+    })
+
+    assert.deepEqual(result, { imported: 0, skipped: 0, rejected: 1 })
+    assert.equal(ref.current?.accounts.length, 0)
+  })
+
+  it('rejects malformed partyIds and skips duplicates', async () => {
+    const good = await generateKeypair()
+    const bad = await generateKeypair()
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.addAccount({
+        name: 'alice',
+        partyId: 'alice::ns',
+        network: 'localnet',
+        privateKeyHex: good.privateKeyHex,
+        publicKeyBase64: good.publicKeyBase64,
+      })
+    })
+
+    let result: { imported: number; skipped: number; rejected: number } | undefined
+    await act(async () => {
+      result = await ref.current?.importVault(
+        envelopeOf([
+          {
+            name: 'alice',
+            partyId: 'alice::ns',
+            publicKeyBase64: good.publicKeyBase64,
+            privateKeyHex: good.privateKeyHex,
+            network: 'localnet',
+          },
+          {
+            name: 'nocolons',
+            partyId: 'nocolons',
+            publicKeyBase64: bad.publicKeyBase64,
+            privateKeyHex: bad.privateKeyHex,
+            network: 'localnet',
+          },
+        ]),
+      )
+    })
+
+    assert.deepEqual(result, { imported: 0, skipped: 1, rejected: 1 })
+  })
+
+  it('throws on a malformed envelope', async () => {
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+    })
+    await assert.rejects(
+      () =>
+        ref.current?.importVault({ v: 2, accounts: [] } as unknown as VaultEnvelope) ??
+        Promise.resolve(),
+      /unsupported vault envelope/i,
+    )
+  })
+})
diff --git a/carpincho-wallet/test/views/CreateVault.test.tsx b/carpincho-wallet/test/views/CreateVault.test.tsx
index ec8a49da..3dca334d 100644
--- a/carpincho-wallet/test/views/CreateVault.test.tsx
+++ b/carpincho-wallet/test/views/CreateVault.test.tsx
@@ -29,6 +29,8 @@ const baseVault = (): VaultContextValue => ({
   }),
   removeAccount: async () => undefined,
   exportPrivateKey: () => '',
+  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index c7165fe1..3592e854 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -32,6 +32,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     }),
     removeAccount: async () => undefined,
     exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,

From 1efda22f1e38265fa127681d9ec01ff88e35dbcd Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 02:50:50 -0300
Subject: [PATCH 068/121] feat(carpincho-wallet): add secure-context
 downloadJson utility

---
 carpincho-wallet/src/utils/download.ts       | 16 ++++++
 carpincho-wallet/test/utils/download.test.ts | 53 ++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 carpincho-wallet/src/utils/download.ts
 create mode 100644 carpincho-wallet/test/utils/download.test.ts

diff --git a/carpincho-wallet/src/utils/download.ts b/carpincho-wallet/src/utils/download.ts
new file mode 100644
index 00000000..b34f158a
--- /dev/null
+++ b/carpincho-wallet/src/utils/download.ts
@@ -0,0 +1,16 @@
+// Triggers a client-side file download of JSON. Secure-context only, matching the
+// vault's crypto requirements; callers handle the thrown error with a toast.
+export const downloadJson = (filename: string, data: unknown): void => {
+  if (!window.isSecureContext) {
+    throw new Error('Downloads require a secure context.')
+  }
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  URL.revokeObjectURL(url)
+}
diff --git a/carpincho-wallet/test/utils/download.test.ts b/carpincho-wallet/test/utils/download.test.ts
new file mode 100644
index 00000000..0475f260
--- /dev/null
+++ b/carpincho-wallet/test/utils/download.test.ts
@@ -0,0 +1,53 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { downloadJson } from '@/utils/download'
+
+const setSecureContext = (value: boolean): void => {
+  Object.defineProperty(window, 'isSecureContext', { value, configurable: true })
+}
+
+describe('downloadJson', () => {
+  afterEach(() => {
+    setSecureContext(true)
+  })
+
+  it('throws outside a secure context', () => {
+    setSecureContext(false)
+    assert.throws(() => downloadJson('x.json', { a: 1 }), /secure context/i)
+  })
+
+  it('downloads pretty-printed JSON via an anchor and revokes the url', async () => {
+    setSecureContext(true)
+    const revoked: string[] = []
+    const clicks: Array<{ download: string; href: string }> = []
+    let captured: Blob | null = null
+    const originalCreate = URL.createObjectURL
+    const originalRevoke = URL.revokeObjectURL
+    URL.createObjectURL = (blob: Blob): string => {
+      captured = blob
+      return 'blob:fake'
+    }
+    URL.revokeObjectURL = (u: string) => {
+      revoked.push(u)
+    }
+    const originalAnchorClick = HTMLAnchorElement.prototype.click
+    HTMLAnchorElement.prototype.click = function click(this: HTMLAnchorElement): void {
+      clicks.push({ download: this.download, href: this.href })
+    }
+    const data = { v: 1, accounts: [] }
+    try {
+      downloadJson('vault.json', data)
+      assert.equal(clicks.length, 1)
+      assert.equal(clicks[0]?.download, 'vault.json')
+      assert.equal(clicks[0]?.href, 'blob:fake')
+      assert.deepEqual(revoked, ['blob:fake'])
+      assert.ok(captured)
+      assert.equal((captured as Blob).type, 'application/json')
+      assert.equal(await (captured as Blob).text(), JSON.stringify(data, null, 2))
+    } finally {
+      URL.createObjectURL = originalCreate
+      URL.revokeObjectURL = originalRevoke
+      HTMLAnchorElement.prototype.click = originalAnchorClick
+    }
+  })
+})

From 744c3b61bb1b255202ce99282d29c371a8c6f6b2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:01:12 -0300
Subject: [PATCH 069/121] feat(carpincho-wallet): add whole-vault backup
 export/import UI

---
 .../src/components/VaultBackupPanel.tsx       | 183 ++++++++++++++++++
 .../test/components/VaultBackupPanel.test.tsx | 149 ++++++++++++++
 2 files changed, 332 insertions(+)
 create mode 100644 carpincho-wallet/src/components/VaultBackupPanel.tsx
 create mode 100644 carpincho-wallet/test/components/VaultBackupPanel.test.tsx

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
new file mode 100644
index 00000000..519cdcc7
--- /dev/null
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -0,0 +1,183 @@
+import { type FormEvent, useState } from 'react'
+import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { COPY_ICON } from '@/components/ui/icons'
+import { JsonView } from '@/components/ui/JsonView'
+import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
+import { INPUT_CLASS } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import { copyText } from '@/utils/clipboard'
+import { cn } from '@/utils/cn'
+import { downloadJson } from '@/utils/download'
+import type { VaultEnvelope } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+const backupFilename = (): string => {
+  const d = new Date()
+  const p = (n: number): string => String(n).padStart(2, '0')
+  const stamp = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}`
+  return `carpincho-vault-${stamp}.json`
+}
+
+// Reveals a backup of every account only after a fresh password re-check. The plaintext
+// envelope lives in state ONLY while this view is mounted; navigating away drops it.
+export const ExportVaultView = (): JSX.Element => {
+  const v = useVault()
+  const [envelope, setEnvelope] = useState<VaultEnvelope | null>(null)
+
+  if (envelope === null) {
+    return (
+      <ConfirmPasswordForm
+        label="Confirm password"
+        submitLabel="Reveal vault backup"
+        onVerified={() => setEnvelope(v.exportVault())}
+      >
+        <p className="text-[0.85rem] text-muted-foreground">
+          Confirm your password to reveal a backup of every account in this vault, including their
+          private keys.
+        </p>
+      </ConfirmPasswordForm>
+    )
+  }
+
+  const onDownload = (): void => {
+    try {
+      downloadJson(backupFilename(), envelope)
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Download failed.')
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <JsonView value={envelope} />
+      <div className="flex gap-3">
+        <SecondaryButton
+          onClick={() => copyText(JSON.stringify(envelope, null, 2), 'Vault backup copied.')}
+        >
+          {COPY_ICON}
+          Copy JSON
+        </SecondaryButton>
+        <SecondaryButton onClick={onDownload}>Download JSON</SecondaryButton>
+      </div>
+    </div>
+  )
+}
+
+interface ImportVaultFormProps {
+  onImported?: () => void
+}
+
+// Restores accounts from a pasted or uploaded envelope. No password gate: the vault
+// is already unlocked and the user is adding their own keys.
+export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Element => {
+  const v = useVault()
+  const [text, setText] = useState('')
+  const [file, setFile] = useState<File | null>(null)
+  const [busy, setBusy] = useState(false)
+
+  const runImport = async (raw: string): Promise<void> => {
+    let envelope: VaultEnvelope
+    try {
+      envelope = JSON.parse(raw) as VaultEnvelope
+    } catch {
+      toast.error('Invalid JSON.')
+      return
+    }
+    setBusy(true)
+    try {
+      const r = await v.importVault(envelope)
+      toast.success(`Imported ${r.imported}, skipped ${r.skipped}, rejected ${r.rejected}.`)
+      onImported?.()
+    } catch (err) {
+      toast.error(`Import vault failed: ${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const onPasteSubmit = (e: FormEvent<HTMLFormElement>): void => {
+    e.preventDefault()
+    void runImport(text)
+  }
+
+  const onUploadSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault()
+    if (file === null) {
+      toast.warning('Choose a JSON file.')
+      return
+    }
+    await runImport(await file.text())
+  }
+
+  return (
+    <Tabs defaultValue="paste">
+      <TabsList className="mb-4">
+        <TabTrigger value="paste">Paste</TabTrigger>
+        <TabTrigger value="upload">Upload file</TabTrigger>
+      </TabsList>
+      <TabContent value="paste">
+        <form
+          onSubmit={onPasteSubmit}
+          className="flex flex-col gap-4"
+        >
+          <label
+            htmlFor="import-vault-json"
+            className="sr-only"
+          >
+            Vault JSON
+          </label>
+          <textarea
+            id="import-vault-json"
+            className={cn(INPUT_CLASS, 'min-h-40 resize-y font-mono text-[0.82rem]')}
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            placeholder='{"v":1,"accounts":[...]}'
+            spellCheck={false}
+          />
+          <PrimaryButton
+            type="submit"
+            disabled={busy || text.trim() === ''}
+          >
+            {busy ? 'Importing...' : 'Import vault'}
+          </PrimaryButton>
+        </form>
+      </TabContent>
+      <TabContent value="upload">
+        <form
+          onSubmit={onUploadSubmit}
+          className="flex flex-col gap-4"
+        >
+          <input
+            id="import-vault-file"
+            type="file"
+            accept=".json,application/json"
+            aria-label="Vault JSON file"
+            className="sr-only"
+            onChange={(e) => setFile(e.currentTarget.files?.[0] ?? null)}
+          />
+          <label
+            htmlFor="import-vault-file"
+            className="cursor-pointer rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center hover:border-primary/60"
+          >
+            {file === null ? (
+              <span className="text-[0.82rem] font-medium text-muted-foreground">
+                Drop a .json file or click to choose.
+              </span>
+            ) : (
+              <span className="rounded-sm bg-muted px-2 py-1 font-mono text-[0.82rem] text-foreground">
+                {file.name}
+              </span>
+            )}
+          </label>
+          <PrimaryButton
+            type="submit"
+            disabled={busy || file === null}
+          >
+            {busy ? 'Importing...' : 'Import vault'}
+          </PrimaryButton>
+        </form>
+      </TabContent>
+    </Tabs>
+  )
+}
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
new file mode 100644
index 00000000..e7b27df5
--- /dev/null
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -0,0 +1,149 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import type { ReactNode } from 'react'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { getToastEntries, toast } from '@/components/ui/toast'
+import { ExportVaultView, ImportVaultForm } from '@/components/VaultBackupPanel'
+import type { VaultEnvelope } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue =>
+  ({
+    isLocked: false,
+    isLoading: false,
+    hasVault: true,
+    setup: async () => undefined,
+    unlock: async () => undefined,
+    lock: () => undefined,
+    destroyVault: async () => undefined,
+    accounts: [],
+    primary: null,
+    transactions: [],
+    setPrimary: async () => undefined,
+    addAccount: async () => ({
+      id: '',
+      name: '',
+      partyId: '',
+      publicKeyBase64: '',
+      network: '',
+      isPrimary: false,
+      createdAt: 0,
+    }),
+    removeAccount: async () => undefined,
+    exportPrivateKey: () => '',
+    exportVault: () => ({ v: 1, accounts: [] }) as VaultEnvelope,
+    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
+    signMessage: async () => '',
+    recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
+    changePassword: async () => undefined,
+    verifyPassword: () => false,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+    ...overrides,
+  }) as VaultContextValue
+
+const renderWithVault = (overrides: Partial<VaultContextValue>, ui: ReactNode): void => {
+  render(
+    <TooltipProvider>
+      <VaultContext.Provider value={baseVault(overrides)}>{ui}</VaultContext.Provider>
+    </TooltipProvider>,
+  )
+}
+
+describe('ExportVaultView', () => {
+  afterEach(() => {
+    toast.clear()
+    cleanup()
+  })
+
+  it('reveals the envelope JSON only after a correct password', async () => {
+    const user = userEvent.setup()
+    const envelope: VaultEnvelope = {
+      v: 1,
+      accounts: [
+        {
+          name: 'alice',
+          partyId: 'alice::ns',
+          publicKeyBase64: 'pub',
+          privateKeyHex: 'aa',
+          network: 'localnet',
+        },
+      ],
+    }
+    renderWithVault(
+      { verifyPassword: () => true, exportVault: () => envelope },
+      <ExportVaultView />,
+    )
+    assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
+    await user.type(screen.getByLabelText(/confirm password/i), 'right-right-1')
+    await user.click(screen.getByRole('button', { name: /reveal/i }))
+    // The reveal view (JsonView + Copy/Download) only mounts after a correct password.
+    await waitFor(() => assert.ok(screen.getByRole('button', { name: /copy json/i })))
+  })
+})
+
+describe('ImportVaultForm', () => {
+  afterEach(() => {
+    toast.clear()
+    cleanup()
+  })
+
+  it('parses pasted JSON, calls importVault, and toasts the counts', async () => {
+    const user = userEvent.setup()
+    const calls: VaultEnvelope[] = []
+    renderWithVault(
+      {
+        importVault: async (env) => {
+          calls.push(env)
+          return { imported: 2, skipped: 1, rejected: 0 }
+        },
+      },
+      <ImportVaultForm />,
+    )
+    const envelope: VaultEnvelope = {
+      v: 1,
+      accounts: [
+        {
+          name: 'a',
+          partyId: 'a::ns',
+          publicKeyBase64: 'p',
+          privateKeyHex: 'aa',
+          network: 'localnet',
+        },
+      ],
+    }
+    // userEvent escapes braces; use fireEvent.change to drive the controlled textarea value.
+    const textarea = screen.getByLabelText(/vault json/i) as HTMLTextAreaElement
+    fireEvent.change(textarea, { target: { value: JSON.stringify(envelope) } })
+    await user.click(screen.getByRole('button', { name: /^import vault$/i }))
+    await waitFor(() => assert.equal(calls.length, 1))
+    const entries = getToastEntries()
+    assert.ok(entries.some((e) => typeof e.message === 'string' && /imported 2/i.test(e.message)))
+  })
+
+  it('toasts an error for invalid JSON and does not call importVault', async () => {
+    const user = userEvent.setup()
+    let called = 0
+    renderWithVault(
+      {
+        importVault: async () => {
+          called += 1
+          return { imported: 0, skipped: 0, rejected: 0 }
+        },
+      },
+      <ImportVaultForm />,
+    )
+    const textarea = screen.getByLabelText(/vault json/i) as HTMLTextAreaElement
+    // Native input event does not drive React's controlled onChange; use fireEvent.change.
+    fireEvent.change(textarea, { target: { value: 'not json' } })
+    await user.click(screen.getByRole('button', { name: /^import vault$/i }))
+    assert.equal(called, 0)
+    assert.ok(
+      getToastEntries().some(
+        (e) => typeof e.message === 'string' && /invalid json/i.test(e.message),
+      ),
+    )
+  })
+})

From 15fc3907e5b535a708a510f6f31c5c11fe1aabac Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:09:14 -0300
Subject: [PATCH 070/121] feat(carpincho-wallet): collapse password change into
 a single step

---
 .../src/components/SecurityPanel.tsx          | 69 +++++++++-------
 .../test/components/MenuSheet.test.tsx        |  5 +-
 .../test/components/SecurityPanel.test.tsx    | 81 ++++---------------
 3 files changed, 61 insertions(+), 94 deletions(-)

diff --git a/carpincho-wallet/src/components/SecurityPanel.tsx b/carpincho-wallet/src/components/SecurityPanel.tsx
index e151f695..e182ba14 100644
--- a/carpincho-wallet/src/components/SecurityPanel.tsx
+++ b/carpincho-wallet/src/components/SecurityPanel.tsx
@@ -1,8 +1,8 @@
 import { type FormEvent, useState } from 'react'
-import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
 import { NewPasswordFields } from '@/components/NewPasswordFields'
 import { PrimaryButton } from '@/components/ui/Button'
 import { OptionList } from '@/components/ui/OptionList'
+import { PasswordInput } from '@/components/ui/PasswordInput'
 import { toast } from '@/components/ui/toast'
 import type { AutoLockOption } from '@/vault/storage'
 import { useVault } from '@/vault/useVault'
@@ -14,57 +14,72 @@ const AUTO_LOCK_LABELS: Array<{ value: AutoLockOption; label: string }> = [
   { value: '1h', label: '1 hour' },
 ]
 
-type PasswordState =
-  | { phase: 'verify'; error: string | null }
-  | { phase: 'change'; current: string; next: string; confirm: string; valid: boolean }
+interface PasswordState {
+  current: string
+  next: string
+  confirm: string
+  valid: boolean
+  error: string | null
+}
 
-const initialState = (): PasswordState => ({ phase: 'verify', error: null })
+const initialState = (): PasswordState => ({
+  current: '',
+  next: '',
+  confirm: '',
+  valid: false,
+  error: null,
+})
 
 export const PasswordForm = (): JSX.Element => {
   const v = useVault()
   const [state, setState] = useState<PasswordState>(initialState)
 
-  const onSubmitChange = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+  const canSubmit = state.current.trim() !== '' && state.valid
+
+  const onSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
-    if (state.phase !== 'change') return
-    if (!state.valid) return
+    if (!canSubmit) return
     try {
       await v.changePassword(state.current, state.next)
       setState(initialState())
       toast.success('Password updated.')
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Could not change password.'
-      setState({ phase: 'verify', error: msg })
+      setState((s) => ({ ...s, error: msg }))
     }
   }
 
-  if (state.phase === 'verify') {
-    return (
-      <ConfirmPasswordForm
-        label="Current password"
-        submitLabel="Continue"
-        initialError={state.error}
-        onVerified={(current) =>
-          setState({ phase: 'change', current, next: '', confirm: '', valid: false })
-        }
-      />
-    )
-  }
-
   return (
     <form
-      onSubmit={onSubmitChange}
+      onSubmit={onSubmit}
       className="flex flex-col gap-3"
     >
+      <PasswordInput
+        aria-label="Current password"
+        aria-errormessage={state.error !== null ? 'change-password-error' : undefined}
+        autoComplete="current-password"
+        placeholder="Current password"
+        error={state.error !== null}
+        value={state.current}
+        onChange={(e) => setState((s) => ({ ...s, current: e.target.value, error: null }))}
+      />
       <NewPasswordFields
         confirm={state.confirm}
-        onConfirmChange={(value) => setState({ ...state, confirm: value })}
-        onPasswordChange={(value) => setState({ ...state, next: value })}
-        onValidityChange={(valid) => setState((s) => (s.phase === 'change' ? { ...s, valid } : s))}
+        onConfirmChange={(value) => setState((s) => ({ ...s, confirm: value }))}
+        onPasswordChange={(value) => setState((s) => ({ ...s, next: value }))}
+        onValidityChange={(valid) => setState((s) => ({ ...s, valid }))}
         password={state.next}
       />
+      {state.error !== null && (
+        <p
+          id="change-password-error"
+          className="text-[0.85rem] text-danger"
+        >
+          {state.error}
+        </p>
+      )}
       <PrimaryButton
-        disabled={!state.valid}
+        disabled={!canSubmit}
         type="submit"
       >
         Change password
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index 56e121a9..bad3d07e 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { type ReactNode, useState } from 'react'
 import { MenuSheet } from '@/components/menu/MenuSheet'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 import { ThemeProvider } from '@/theme/ThemeProvider'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
@@ -43,7 +44,9 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
 
 const wrap = (value: VaultContextValue, ui: ReactNode): JSX.Element => (
   <ThemeProvider>
-    <VaultContext.Provider value={value}>{ui}</VaultContext.Provider>
+    <TooltipProvider>
+      <VaultContext.Provider value={value}>{ui}</VaultContext.Provider>
+    </TooltipProvider>
   </ThemeProvider>
 )
 
diff --git a/carpincho-wallet/test/components/SecurityPanel.test.tsx b/carpincho-wallet/test/components/SecurityPanel.test.tsx
index 6650704f..7268f779 100644
--- a/carpincho-wallet/test/components/SecurityPanel.test.tsx
+++ b/carpincho-wallet/test/components/SecurityPanel.test.tsx
@@ -56,76 +56,31 @@ describe('PasswordForm', () => {
     cleanup()
   })
 
-  it('starts in verify phase with only a current-password field', () => {
+  it('shows all three fields at once', () => {
     renderWithVault({}, <PasswordForm />)
     assert.ok(screen.getByLabelText(/current password/i))
-    assert.equal(screen.queryByLabelText(/new password/i), null)
-  })
-
-  it('shows an error for the wrong current password and stays in verify phase', async () => {
-    const user = userEvent.setup()
-    renderWithVault({ verifyPassword: () => false }, <PasswordForm />)
-    await user.type(screen.getByLabelText(/current password/i), 'nope-nope-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
-    const input = screen.getByLabelText(/current password/i)
-    assert.equal(input.getAttribute('aria-invalid'), 'true')
-    assert.ok(screen.getByText(/incorrect password/i))
-  })
-
-  it('advances to change phase when the current password is correct', async () => {
-    const user = userEvent.setup()
-    renderWithVault({ verifyPassword: () => true }, <PasswordForm />)
-    await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
     assert.ok(screen.getByLabelText(/^new password$/i))
     assert.ok(screen.getByLabelText(/confirm new password/i))
   })
 
-  it('keeps the change button disabled when passwords do not match', async () => {
-    const user = userEvent.setup()
-    renderWithVault({ verifyPassword: () => true }, <PasswordForm />)
-    await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
-    await user.type(screen.getByLabelText(/^new password$/i), 'purple-monkey-dishwasher-42')
-    await user.type(screen.getByLabelText(/confirm new password/i), 'different-value')
-    assert.equal(
-      (screen.getByRole('button', { name: /change password/i }) as HTMLButtonElement).disabled,
-      true,
-    )
-  })
-
-  it('marks the confirm field aria-invalid when passwords do not match', async () => {
+  it('keeps the submit disabled until current is filled and the new pair is valid', async () => {
     const user = userEvent.setup()
-    renderWithVault({ verifyPassword: () => true }, <PasswordForm />)
-    await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
+    renderWithVault({}, <PasswordForm />)
+    const button = (): HTMLButtonElement =>
+      screen.getByRole('button', { name: /change password/i }) as HTMLButtonElement
+    assert.equal(button().disabled, true)
     await user.type(screen.getByLabelText(/^new password$/i), 'purple-monkey-dishwasher-42')
-    await user.type(screen.getByLabelText(/confirm new password/i), 'different-value')
-    assert.equal(
-      screen.getByLabelText(/confirm new password/i).getAttribute('aria-invalid'),
-      'true',
-    )
-  })
-
-  it('keeps the change button disabled for passwords under 9 characters', async () => {
-    const user = userEvent.setup()
-    renderWithVault({ verifyPassword: () => true }, <PasswordForm />)
+    await user.type(screen.getByLabelText(/confirm new password/i), 'purple-monkey-dishwasher-42')
+    assert.equal(button().disabled, true)
     await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
-    await user.type(screen.getByLabelText(/^new password$/i), 'short')
-    await user.type(screen.getByLabelText(/confirm new password/i), 'short')
-    assert.equal(
-      (screen.getByRole('button', { name: /change password/i }) as HTMLButtonElement).disabled,
-      true,
-    )
+    assert.equal(button().disabled, false)
   })
 
-  it('calls changePassword and returns to verify phase on success', async () => {
+  it('calls changePassword with current and new, then resets and toasts success', async () => {
     const user = userEvent.setup()
     const calls: Array<[string, string]> = []
     renderWithVault(
       {
-        verifyPassword: () => true,
         changePassword: async (a, b) => {
           calls.push([a, b])
         },
@@ -133,37 +88,31 @@ describe('PasswordForm', () => {
       <PasswordForm />,
     )
     await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
     await user.type(screen.getByLabelText(/^new password$/i), 'purple-monkey-dishwasher-42')
     await user.type(screen.getByLabelText(/confirm new password/i), 'purple-monkey-dishwasher-42')
     await user.click(screen.getByRole('button', { name: /change password/i }))
     assert.deepEqual(calls, [['right-right-1', 'purple-monkey-dishwasher-42']])
     const entries = getToastEntries()
-    assert.equal(entries.length, 1)
     assert.equal(entries[0]?.variant, 'success')
     assert.equal(entries[0]?.message, 'Password updated.')
-    assert.ok(screen.getByLabelText(/current password/i))
+    assert.equal((screen.getByLabelText(/current password/i) as HTMLInputElement).value, '')
   })
 
-  it('returns to verify phase and surfaces the error when changePassword rejects', async () => {
+  it('surfaces an inline error when changePassword rejects', async () => {
     const user = userEvent.setup()
     renderWithVault(
       {
-        verifyPassword: () => true,
         changePassword: async () => {
-          throw new Error('rotation failed')
+          throw new Error('invalid current password')
         },
       },
       <PasswordForm />,
     )
-    await user.type(screen.getByLabelText(/current password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /continue/i }))
+    await user.type(screen.getByLabelText(/current password/i), 'wrong-wrong-1')
     await user.type(screen.getByLabelText(/^new password$/i), 'purple-monkey-dishwasher-42')
     await user.type(screen.getByLabelText(/confirm new password/i), 'purple-monkey-dishwasher-42')
     await user.click(screen.getByRole('button', { name: /change password/i }))
-    assert.ok(screen.getByText(/rotation failed/i))
-    assert.ok(screen.getByLabelText(/current password/i))
-    assert.equal(screen.queryByLabelText(/^new password$/i), null)
+    assert.ok(screen.getByText(/invalid current password/i))
   })
 })
 

From 798e754a3fd7cdee445a0a766709f65a7f47d7e2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:12:48 -0300
Subject: [PATCH 071/121] style(carpincho-wallet): replace awkward password
 strength helper text

---
 .../src/components/PasswordStrengthIndicator.tsx            | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
index 078fbe3e..3b95c550 100644
--- a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
+++ b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
@@ -1,5 +1,5 @@
 import { Tooltip } from '@/components/ui/Tooltip'
-import { MIN_PASSWORD_SCORE, scorePassword } from '@/vault/passwordStrength'
+import { scorePassword } from '@/vault/passwordStrength'
 
 type Tier = { segmentColor: string; labelColor: string; label: string }
 
@@ -14,8 +14,6 @@ const EXCELLENT: Tier = {
 
 const TIERS: readonly Tier[] = [TOO_WEAK, TOO_WEAK, FAIR, STRONG, EXCELLENT]
 
-const REQUIRED_LABEL = (TIERS[MIN_PASSWORD_SCORE] ?? STRONG).label
-
 type Props = {
   password: string
   id?: string
@@ -49,7 +47,7 @@ export const PasswordStrengthIndicator = ({ password, id }: Props): JSX.Element
       </div>
 
       <p className="flex items-center gap-1 text-[0.8rem] text-soft">
-        <b>"{REQUIRED_LABEL}"</b> or better
+        More info
         <Tooltip
           label="Password recommendations"
           content={

From 0b158db3d55f490410c769a35d8885bed1d662ac Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:20:33 -0300
Subject: [PATCH 072/121] feat(carpincho-wallet): restructure drawer around
 Vault and drop per-account key import/export

---
 .../src/components/PrivateKeyPanel.tsx        | 201 ----------------
 .../{SecurityPanel.tsx => VaultPanel.tsx}     |   0
 .../src/components/menu/MenuSheet.tsx         |  12 +-
 .../src/components/menu/screens.ts            |  66 +++---
 carpincho-wallet/src/vault/VaultContext.tsx   |  15 --
 .../test/components/AccountCard.test.tsx      |   1 -
 .../test/components/AccountsDialog.test.tsx   |   1 -
 .../test/components/ActivityPanel.test.tsx    |   1 -
 .../test/components/AssetsPanel.test.tsx      |   1 -
 .../components/AutoAcceptSetting.test.tsx     |   1 -
 .../components/CreateAccountForm.test.tsx     |   1 -
 .../test/components/Header.test.tsx           |   1 -
 .../test/components/HomeTabs.test.tsx         |   1 -
 .../test/components/MenuSheet.test.tsx        | 100 ++------
 .../test/components/PrivateKeyPanel.test.tsx  | 221 ------------------
 .../test/components/SendConfirm.test.tsx      |   1 -
 .../test/components/TokenDetailSheet.test.tsx |   1 -
 .../test/components/UtilsPanel.test.tsx       |   1 -
 .../test/components/VaultBackupPanel.test.tsx |   1 -
 ...rityPanel.test.tsx => VaultPanel.test.tsx} |   3 +-
 .../utils/CreateContractUtil.test.tsx         |   1 -
 .../utils/ExerciseChoiceUtil.test.tsx         |   1 -
 .../test/components/utils/UtilsList.test.tsx  |   1 -
 .../test/vault/exportPrivateKey.test.tsx      |  71 ------
 .../test/views/CreateVault.test.tsx           |   1 -
 .../test/views/OnboardingFlow.test.tsx        |   1 -
 26 files changed, 61 insertions(+), 645 deletions(-)
 delete mode 100644 carpincho-wallet/src/components/PrivateKeyPanel.tsx
 rename carpincho-wallet/src/components/{SecurityPanel.tsx => VaultPanel.tsx} (100%)
 delete mode 100644 carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
 rename carpincho-wallet/test/components/{SecurityPanel.test.tsx => VaultPanel.test.tsx} (98%)
 delete mode 100644 carpincho-wallet/test/vault/exportPrivateKey.test.tsx

diff --git a/carpincho-wallet/src/components/PrivateKeyPanel.tsx b/carpincho-wallet/src/components/PrivateKeyPanel.tsx
deleted file mode 100644
index f988dfb5..00000000
--- a/carpincho-wallet/src/components/PrivateKeyPanel.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { type FormEvent, useState } from 'react'
-import { getWalletServiceNetworkId } from '@/api/walletService'
-import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
-import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
-import { COPY_ICON } from '@/components/ui/icons'
-import { PasswordInput } from '@/components/ui/PasswordInput'
-import { TextInput } from '@/components/ui/TextInput'
-import { toast } from '@/components/ui/toast'
-import { copySecret } from '@/utils/clipboard'
-import { derivePublicKeyBase64 } from '@/vault/keypair'
-import { useVault } from '@/vault/useVault'
-
-interface ImportPrivateKeyFormProps {
-  onImported?: () => void
-}
-
-interface ImportState {
-  partyId: string
-  partyName: string
-  privateKey: string
-}
-
-const EMPTY_IMPORT_STATE: ImportState = {
-  partyId: '',
-  partyName: '',
-  privateKey: '',
-}
-
-// Imports an existing Canton party by storing its supplied secret in the encrypted vault.
-export const ImportPrivateKeyForm = ({ onImported }: ImportPrivateKeyFormProps): JSX.Element => {
-  const v = useVault()
-  const [state, setState] = useState<ImportState>(EMPTY_IMPORT_STATE)
-  const [busy, setBusy] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const onChange = (field: keyof ImportState, value: string): void => {
-    setState((current) => ({ ...current, [field]: value }))
-    setError(null)
-  }
-
-  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
-    event.preventDefault()
-    const partyId = state.partyId.trim()
-    const name = state.partyName.trim()
-    const privateKeyHex = state.privateKey.trim().toLowerCase()
-    if (partyId === '' || name === '' || privateKeyHex === '') {
-      setError('All fields are required.')
-      return
-    }
-
-    setBusy(true)
-    try {
-      const publicKeyBase64 = await derivePublicKeyBase64(privateKeyHex)
-      const network = await getWalletServiceNetworkId()
-      await v.addAccount({
-        name,
-        partyId,
-        privateKeyHex,
-        publicKeyBase64,
-        network,
-      })
-      setState(EMPTY_IMPORT_STATE)
-      toast.success('Private key imported.')
-      onImported?.()
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Import failed.'
-      setError(message)
-      toast.error(`Import private key failed: ${message}`)
-    } finally {
-      setBusy(false)
-    }
-  }
-
-  const hasError = error !== null
-
-  return (
-    <form
-      onSubmit={onSubmit}
-      className="flex flex-col gap-4"
-    >
-      <div>
-        <label htmlFor="import-party-id">Party ID</label>
-        <TextInput
-          id="import-party-id"
-          type="text"
-          className="font-mono"
-          value={state.partyId}
-          onChange={(event) => onChange('partyId', event.target.value)}
-          placeholder="alice::fingerprint"
-          error={hasError && state.partyId.trim() === ''}
-          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
-        />
-      </div>
-      <div>
-        <label htmlFor="import-party-name">Party name</label>
-        <TextInput
-          id="import-party-name"
-          type="text"
-          value={state.partyName}
-          onChange={(event) => onChange('partyName', event.target.value)}
-          placeholder="alice"
-          error={hasError && state.partyName.trim() === ''}
-          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
-        />
-      </div>
-      <div>
-        <label htmlFor="import-private-key">Private key</label>
-        <PasswordInput
-          id="import-private-key"
-          className="font-mono"
-          value={state.privateKey}
-          onChange={(event) => onChange('privateKey', event.target.value)}
-          placeholder="64-character Ed25519 private key"
-          autoComplete="off"
-          error={hasError && state.privateKey.trim() === ''}
-          aria-errormessage={hasError ? 'import-private-key-error' : undefined}
-        />
-      </div>
-      {hasError && (
-        <p
-          id="import-private-key-error"
-          className="text-[0.85rem] text-danger"
-        >
-          {error}
-        </p>
-      )}
-      <PrimaryButton
-        type="submit"
-        disabled={busy}
-      >
-        {busy ? 'Importing...' : 'Import private key'}
-      </PrimaryButton>
-    </form>
-  )
-}
-
-// Reveals the selected party secret only after a fresh password re-check, even though
-// the vault is already unlocked, so an unattended popup cannot leak the raw key.
-export const ExportPrivateKeyView = (): JSX.Element => {
-  const v = useVault()
-  const account = v.primary
-  const [revealed, setRevealed] = useState(false)
-
-  if (account === null) {
-    return (
-      <p className="rounded-md border border-border bg-muted p-3 text-[0.92rem] text-muted-foreground">
-        No selected account.
-      </p>
-    )
-  }
-
-  const accountSummary = (
-    <div className="rounded-md border border-border bg-muted p-3">
-      <p className="font-semibold text-foreground">{account.name}</p>
-      <p className="mt-1 break-all font-mono text-[0.82rem] text-muted-foreground">
-        {account.partyId}
-      </p>
-    </div>
-  )
-
-  if (!revealed) {
-    return (
-      <ConfirmPasswordForm
-        label="Confirm password"
-        submitLabel="Reveal private key"
-        onVerified={() => setRevealed(true)}
-      >
-        {accountSummary}
-        <p className="text-[0.85rem] text-muted-foreground">
-          Confirm your password to reveal this account's private key.
-        </p>
-      </ConfirmPasswordForm>
-    )
-  }
-
-  let privateKey: string
-  try {
-    privateKey = v.exportPrivateKey(account.id)
-  } catch (err) {
-    const message = err instanceof Error ? err.message : 'Private key unavailable.'
-    return <p className="text-[0.9rem] text-danger">{message}</p>
-  }
-
-  return (
-    <div className="flex flex-col gap-4">
-      {accountSummary}
-      <div>
-        <p className="mb-2 text-[0.85rem] font-semibold text-muted-foreground">Private key</p>
-        <p className="max-h-40 overflow-y-auto break-all rounded-md border border-border-strong bg-surface p-3 font-mono text-[0.82rem] text-foreground">
-          {privateKey}
-        </p>
-      </div>
-      <SecondaryButton
-        onClick={() => copySecret(privateKey, 'Private key copied. Clipboard clears in 60s.')}
-      >
-        {COPY_ICON}
-        Copy private key
-      </SecondaryButton>
-    </div>
-  )
-}
diff --git a/carpincho-wallet/src/components/SecurityPanel.tsx b/carpincho-wallet/src/components/VaultPanel.tsx
similarity index 100%
rename from carpincho-wallet/src/components/SecurityPanel.tsx
rename to carpincho-wallet/src/components/VaultPanel.tsx
diff --git a/carpincho-wallet/src/components/menu/MenuSheet.tsx b/carpincho-wallet/src/components/menu/MenuSheet.tsx
index 3b193c87..bafc521c 100644
--- a/carpincho-wallet/src/components/menu/MenuSheet.tsx
+++ b/carpincho-wallet/src/components/menu/MenuSheet.tsx
@@ -3,9 +3,9 @@ import { MenuList } from '@/components/menu/MenuList'
 import { type Direction, MENU_LISTS, SCREENS, type Screen } from '@/components/menu/screens'
 import { ThemeMenu } from '@/components/menu/ThemeMenu'
 import { WalletConnectMenu } from '@/components/menu/WalletConnectMenu'
-import { ExportPrivateKeyView, ImportPrivateKeyForm } from '@/components/PrivateKeyPanel'
-import { AutoLockList, PasswordForm } from '@/components/SecurityPanel'
 import { Sheet } from '@/components/ui/Sheet'
+import { ExportVaultView, ImportVaultForm } from '@/components/VaultBackupPanel'
+import { AutoLockList, PasswordForm } from '@/components/VaultPanel'
 import { isExtensionRuntime } from '@/extension/runtimeClient'
 import { useVault } from '@/vault/useVault'
 
@@ -95,13 +95,13 @@ export const MenuSheet = ({ open, onOpenChange }: MenuSheetProps): JSX.Element =
         {screen === 'wallet-connect' && (
           <WalletConnectMenu onPaired={() => handleOpenChange(false)} />
         )}
-        {screen === 'import-private-key' && (
-          <ImportPrivateKeyForm onImported={() => handleOpenChange(false)} />
-        )}
-        {screen === 'export-private-key' && <ExportPrivateKeyView />}
         {screen === 'theme' && <ThemeMenu />}
         {screen === 'password' && <PasswordForm />}
         {screen === 'auto-lock' && <AutoLockList />}
+        {screen === 'export-vault' && <ExportVaultView />}
+        {screen === 'import-vault' && (
+          <ImportVaultForm onImported={() => handleOpenChange(false)} />
+        )}
       </div>
     </Sheet>
   )
diff --git a/carpincho-wallet/src/components/menu/screens.ts b/carpincho-wallet/src/components/menu/screens.ts
index 360a0890..1982ecf9 100644
--- a/carpincho-wallet/src/components/menu/screens.ts
+++ b/carpincho-wallet/src/components/menu/screens.ts
@@ -4,13 +4,12 @@ import { WALLET_CONNECT_ICON } from '@/components/ui/icons'
 export type Screen =
   | 'root'
   | 'wallet-connect'
-  | 'settings'
-  | 'import-private-key'
-  | 'export-private-key'
   | 'theme'
-  | 'security'
+  | 'vault'
   | 'password'
   | 'auto-lock'
+  | 'export-vault'
+  | 'import-vault'
 export type Direction = 'forward' | 'back'
 
 interface ScreenConfig {
@@ -30,40 +29,35 @@ export const SCREENS: Record<Screen, ScreenConfig> = {
     description: 'Paste a WalletConnect URI to connect a dApp.',
     parent: 'root',
   },
-  settings: {
-    title: 'Settings',
-    description: 'Theme, security, and account key preferences.',
-    parent: 'root',
-  },
-  'import-private-key': {
-    title: 'Import private key',
-    description: 'Import an existing Canton party into this vault.',
-    parent: 'settings',
-  },
-  'export-private-key': {
-    title: 'Export private key',
-    description: 'Reveal the selected party private key.',
-    parent: 'settings',
-  },
   theme: {
     title: 'Theme',
     description: 'Choose light, dark, or follow the system setting.',
-    parent: 'settings',
+    parent: 'root',
   },
-  security: {
-    title: 'Security & Password',
-    description: 'Choose between password change and auto-lock configuration.',
-    parent: 'settings',
+  vault: {
+    title: 'Vault',
+    description: 'Password, auto-lock, and account backup.',
+    parent: 'root',
   },
   password: {
     title: 'Password',
-    description: 'Verify the current password and set a new one.',
-    parent: 'security',
+    description: 'Set a new password for this vault.',
+    parent: 'vault',
   },
   'auto-lock': {
     title: 'Auto-lock',
     description: 'Choose how long the wallet stays unlocked while idle.',
-    parent: 'security',
+    parent: 'vault',
+  },
+  'export-vault': {
+    title: 'Export Vault',
+    description: 'Reveal a JSON backup of every account in this vault.',
+    parent: 'vault',
+  },
+  'import-vault': {
+    title: 'Import Vault',
+    description: 'Restore accounts from a vault JSON backup.',
+    parent: 'vault',
   },
 }
 
@@ -74,21 +68,19 @@ export interface MenuListRow {
   icon?: ReactNode
 }
 
-// Leaf screens (theme, password, auto-lock) render dedicated components and are absent here.
+// Leaf screens (theme, password, auto-lock, export-vault, import-vault) render
+// dedicated components and are absent here.
 export const MENU_LISTS: Partial<Record<Screen, MenuListRow[]>> = {
   root: [
     { label: 'WalletConnect', to: 'wallet-connect', icon: WALLET_CONNECT_ICON },
-    { label: 'Settings', to: 'settings' },
-    { label: 'Log out', to: 'logout', tone: 'danger' },
-  ],
-  settings: [
     { label: 'Theme', to: 'theme' },
-    { label: 'Security & Password', to: 'security' },
-    { label: 'Import private key', to: 'import-private-key' },
-    { label: 'Export private key', to: 'export-private-key' },
+    { label: 'Vault', to: 'vault' },
+    { label: 'Log out', to: 'logout', tone: 'danger' },
   ],
-  security: [
+  vault: [
     { label: 'Password', to: 'password' },
-    { label: 'Auto-lock', to: 'auto-lock' },
+    { label: 'Auto Lock', to: 'auto-lock' },
+    { label: 'Export Vault', to: 'export-vault' },
+    { label: 'Import Vault', to: 'import-vault' },
   ],
 }
diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 348c2ca4..e04c9611 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -112,7 +112,6 @@ export interface VaultContextValue {
     publicKeyBase64: string
   }) => Promise<AccountPublic>
   removeAccount: (id: string) => Promise<void>
-  exportPrivateKey: (accountId: string) => string
   exportVault: () => VaultEnvelope
   importVault: (envelope: VaultEnvelope) => Promise<ImportVaultResult>
   signMessage: (accountId: string, messageBase64: string) => Promise<string>
@@ -360,18 +359,6 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     [],
   )
 
-  // Gives export UI the selected account secret without leaking keys into public account state.
-  const exportPrivateKey = useCallback((accountId: string): string => {
-    if (unlockedPlaintext === null) {
-      throw new Error('vault locked')
-    }
-    const acct = unlockedPlaintext.accounts.find((a) => a.id === accountId)
-    if (acct === undefined) {
-      throw new Error(`unknown account: ${accountId}`)
-    }
-    return acct.privateKeyHex
-  }, [])
-
   // Builds a portable backup of every account. Pure projection: omits id/createdAt,
   // never logged or persisted. Callers must drop the result as soon as it is shown.
   const exportVault = useCallback((): VaultEnvelope => {
@@ -582,7 +569,6 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       setPrimary,
       addAccount,
       removeAccount,
-      exportPrivateKey,
       exportVault,
       importVault,
       signMessage,
@@ -604,7 +590,6 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     setPrimary,
     addAccount,
     removeAccount,
-    exportPrivateKey,
     exportVault,
     importVault,
     signMessage,
diff --git a/carpincho-wallet/test/components/AccountCard.test.tsx b/carpincho-wallet/test/components/AccountCard.test.tsx
index 982f280e..85275ead 100644
--- a/carpincho-wallet/test/components/AccountCard.test.tsx
+++ b/carpincho-wallet/test/components/AccountCard.test.tsx
@@ -49,7 +49,6 @@ const baseVault = (): VaultContextValue =>
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/AccountsDialog.test.tsx b/carpincho-wallet/test/components/AccountsDialog.test.tsx
index e8773846..75022fa9 100644
--- a/carpincho-wallet/test/components/AccountsDialog.test.tsx
+++ b/carpincho-wallet/test/components/AccountsDialog.test.tsx
@@ -49,7 +49,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index cdc7f37b..cd2a8d14 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -35,7 +35,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 55e94987..ebcf9693 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -39,7 +39,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
index 7503eda5..1d060e4e 100644
--- a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
+++ b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
@@ -35,7 +35,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/CreateAccountForm.test.tsx b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
index f0e75492..fe799d67 100644
--- a/carpincho-wallet/test/components/CreateAccountForm.test.tsx
+++ b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
@@ -32,7 +32,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/Header.test.tsx b/carpincho-wallet/test/components/Header.test.tsx
index e7cccd29..6f569dd0 100644
--- a/carpincho-wallet/test/components/Header.test.tsx
+++ b/carpincho-wallet/test/components/Header.test.tsx
@@ -29,7 +29,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportPrivateKey: () => '',
   exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
   importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 04c64790..c0c73fe7 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -64,7 +64,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index bad3d07e..f194f6fc 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -30,7 +30,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportPrivateKey: () => '',
   exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
   importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
@@ -55,7 +54,7 @@ describe('MenuSheet', () => {
     cleanup()
   })
 
-  it('renders the root menu items when open', () => {
+  it('renders the new root menu items when open', () => {
     render(
       wrap(
         baseVault(),
@@ -65,7 +64,9 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    assert.ok(screen.getByRole('button', { name: /^settings$/i }))
+    assert.ok(screen.getByRole('button', { name: /walletconnect/i }))
+    assert.ok(screen.getByRole('button', { name: /^theme$/i }))
+    assert.ok(screen.getByRole('button', { name: /^vault$/i }))
     assert.ok(screen.getByRole('button', { name: /log out/i }))
   })
 
@@ -79,49 +80,10 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    assert.equal(screen.queryByRole('button', { name: /^settings$/i }), null)
-  })
-
-  it('navigates into settings and back to root', async () => {
-    const user = userEvent.setup()
-    render(
-      wrap(
-        baseVault(),
-        <MenuSheet
-          open={true}
-          onOpenChange={() => undefined}
-        />,
-      ),
-    )
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-    assert.ok(screen.getByRole('button', { name: /^theme$/i }))
-    assert.ok(screen.getByRole('button', { name: /security & password/i }))
-    await user.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByRole('button', { name: /log out/i }))
-  })
-
-  it('shows private-key import and export entries inside Settings', async () => {
-    // Scenario: key import/export are Settings-level actions, not account-switcher actions.
-    const user = userEvent.setup()
-    render(
-      wrap(
-        baseVault(),
-        <MenuSheet
-          open={true}
-          onOpenChange={() => undefined}
-        />,
-      ),
-    )
-
-    // Action: open the Settings screen from the root drawer.
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-
-    // Expected result: both private-key actions are available from Settings.
-    assert.ok(screen.getByRole('button', { name: /^import private key$/i }))
-    assert.ok(screen.getByRole('button', { name: /^export private key$/i }))
+    assert.equal(screen.queryByRole('button', { name: /^vault$/i }), null)
   })
 
-  it('navigates settings to security and back', async () => {
+  it('drills into Vault and shows its four entries', async () => {
     const user = userEvent.setup()
     render(
       wrap(
@@ -132,15 +94,14 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-    await user.click(screen.getByRole('button', { name: /security & password/i }))
+    await user.click(screen.getByRole('button', { name: /^vault$/i }))
     assert.ok(screen.getByRole('button', { name: /^password$/i }))
-    assert.ok(screen.getByRole('button', { name: /^auto-lock$/i }))
-    await user.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByRole('button', { name: /^theme$/i }))
+    assert.ok(screen.getByRole('button', { name: /^auto lock$/i }))
+    assert.ok(screen.getByRole('button', { name: /^export vault$/i }))
+    assert.ok(screen.getByRole('button', { name: /^import vault$/i }))
   })
 
-  it('drills into the theme leaf and marks system as the default', async () => {
+  it('opens Theme directly from root', async () => {
     const user = userEvent.setup()
     render(
       wrap(
@@ -151,15 +112,11 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
     await user.click(screen.getByRole('button', { name: /^theme$/i }))
-    assert.ok(screen.getByRole('button', { name: /^light$/i }))
-    assert.ok(screen.getByRole('button', { name: /^dark$/i }))
-    const system = screen.getByRole('button', { name: /^system$/i })
-    assert.equal(system.getAttribute('aria-current'), 'true')
+    assert.ok(screen.getByRole('button', { name: /^system$/i }))
   })
 
-  it('drills into the password leaf and back returns to security', async () => {
+  it('drills into the password leaf and back returns to Vault', async () => {
     const user = userEvent.setup()
     render(
       wrap(
@@ -170,32 +127,28 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-    await user.click(screen.getByRole('button', { name: /security & password/i }))
+    await user.click(screen.getByRole('button', { name: /^vault$/i }))
     await user.click(screen.getByRole('button', { name: /^password$/i }))
     assert.ok(screen.getByLabelText(/current password/i))
     await user.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByRole('button', { name: /^password$/i }))
-    assert.ok(screen.getByRole('button', { name: /^auto-lock$/i }))
+    assert.ok(screen.getByRole('button', { name: /^export vault$/i }))
   })
 
-  it('drills into the auto-lock leaf and back returns to security', async () => {
+  it('drills into Import Vault and shows the paste/upload tabs', async () => {
     const user = userEvent.setup()
     render(
       wrap(
-        baseVault({ autoLockOption: '5m' }),
+        baseVault(),
         <MenuSheet
           open={true}
           onOpenChange={() => undefined}
         />,
       ),
     )
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-    await user.click(screen.getByRole('button', { name: /security & password/i }))
-    await user.click(screen.getByRole('button', { name: /^auto-lock$/i }))
-    assert.ok(screen.getByRole('button', { name: /^5 minutes$/i }))
-    await user.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByRole('button', { name: /^password$/i }))
+    await user.click(screen.getByRole('button', { name: /^vault$/i }))
+    await user.click(screen.getByRole('button', { name: /^import vault$/i }))
+    assert.ok(screen.getByRole('tab', { name: /paste/i }))
+    assert.ok(screen.getByRole('tab', { name: /upload file/i }))
   })
 
   it('log out calls vault.lock and closes the sheet', async () => {
@@ -243,11 +196,11 @@ describe('MenuSheet', () => {
       )
     }
     render(<Harness />)
-    await user.click(screen.getByRole('button', { name: /^settings$/i }))
-    assert.ok(screen.getByRole('button', { name: /^theme$/i }))
+    await user.click(screen.getByRole('button', { name: /^vault$/i }))
+    assert.ok(screen.getByRole('button', { name: /^password$/i }))
     await user.keyboard('{Escape}')
     await user.click(screen.getByRole('button', { name: /reopen/i }))
-    assert.ok(screen.getByRole('button', { name: /^settings$/i }))
+    assert.ok(screen.getByRole('button', { name: /^vault$/i }))
   })
 
   it('shows the WalletConnect entry in web mode and drills into its pairing screen', async () => {
@@ -267,7 +220,6 @@ describe('MenuSheet', () => {
 
   it('hides the WalletConnect entry in extension mode', () => {
     const originalChrome = (globalThis as { chrome?: unknown }).chrome
-    // isExtensionRuntime() keys off chrome.runtime.sendMessage; WC pairing is web-only.
     ;(globalThis as { chrome?: unknown }).chrome = { runtime: { sendMessage: () => undefined } }
     try {
       render(
@@ -280,8 +232,7 @@ describe('MenuSheet', () => {
         ),
       )
       assert.equal(screen.queryByRole('button', { name: /walletconnect/i }), null)
-      // The rest of the drawer is unaffected.
-      assert.ok(screen.getByRole('button', { name: /^settings$/i }))
+      assert.ok(screen.getByRole('button', { name: /^vault$/i }))
     } finally {
       ;(globalThis as { chrome?: unknown }).chrome = originalChrome
     }
@@ -297,7 +248,6 @@ describe('MenuSheet', () => {
         />,
       ),
     )
-    // Root screen hides the "Menu" title visually (sr-only) while leaving it for screen readers.
     const title = screen.getByText('Menu')
     assert.match(title.className, /sr-only/)
   })
diff --git a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx b/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
deleted file mode 100644
index 91bf2d2d..00000000
--- a/carpincho-wallet/test/components/PrivateKeyPanel.test.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { ExportPrivateKeyView, ImportPrivateKeyForm } from '@/components/PrivateKeyPanel'
-import { getToastEntries, toast } from '@/components/ui/toast'
-import { derivePublicKeyBase64, generateKeypair } from '@/vault/keypair'
-import type { AccountPublic } from '@/vault/types'
-import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
-
-const originalFetch = globalThis.fetch
-const originalClipboard = navigator.clipboard
-
-const PRIMARY_ACCOUNT: AccountPublic = {
-  // Active account fixture represents the selected party whose secret is exported.
-  id: 'alice-account',
-  name: 'alice',
-  partyId: 'alice::party',
-  publicKeyBase64: 'alice-public',
-  network: 'localnet',
-  isPrimary: true,
-  createdAt: 1,
-}
-
-// Builds a complete vault context so each component test overrides only the behavior it asserts.
-const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue => ({
-  isLocked: false,
-  isLoading: false,
-  hasVault: true,
-  setup: async () => undefined,
-  unlock: async () => undefined,
-  lock: () => undefined,
-  destroyVault: () => undefined,
-  accounts: [PRIMARY_ACCOUNT],
-  primary: PRIMARY_ACCOUNT,
-  transactions: [],
-  setPrimary: async () => undefined,
-  addAccount: async () => PRIMARY_ACCOUNT,
-  removeAccount: async () => undefined,
-  exportPrivateKey: () => '',
-  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
-  signMessage: async () => '',
-  recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
-  changePassword: async () => undefined,
-  verifyPassword: () => false,
-  autoLockOption: 'never',
-  setAutoLockOption: () => undefined,
-  ...overrides,
-})
-
-// Renders private-key screens with a vault provider because both screens use the real vault hook.
-const renderWithVault = (overrides: Partial<VaultContextValue>, ui: JSX.Element): void => {
-  render(<VaultContext.Provider value={baseVault(overrides)}>{ui}</VaultContext.Provider>)
-}
-
-// Private-key import form tests cover validation and vault persistence inputs.
-describe('ImportPrivateKeyForm', () => {
-  afterEach(() => {
-    // Cleanup: reset globals and transient toast state between form scenarios.
-    cleanup()
-    toast.clear()
-    globalThis.fetch = originalFetch
-  })
-
-  it('requires party id, party name, and private key before importing', async () => {
-    // Scenario: empty import fields should not mutate the vault.
-    const user = userEvent.setup()
-    const added: unknown[] = []
-    renderWithVault(
-      {
-        addAccount: async (args) => {
-          added.push(args)
-          return PRIMARY_ACCOUNT
-        },
-      },
-      <ImportPrivateKeyForm />,
-    )
-
-    // Action: submit the untouched form.
-    await user.click(screen.getByRole('button', { name: /^import private key$/i }))
-
-    // Expected result: a field-level error is shown and addAccount is not called.
-    assert.ok(screen.getByText(/all fields are required/i))
-    assert.equal(added.length, 0)
-  })
-
-  it('imports a private key as a vault account with a derived public key', async () => {
-    // Scenario: existing Canton parties are imported with a party id, display name, and secret key.
-    const user = userEvent.setup()
-    const keypair = await generateKeypair()
-    const expectedPublicKey = await derivePublicKeyBase64(keypair.privateKeyHex)
-    const added: Array<{
-      name: string
-      partyId: string
-      privateKeyHex: string
-      publicKeyBase64: string
-      network: string
-    }> = []
-    globalThis.fetch = (async (input, init) => {
-      const url = String(input)
-      if (url.endsWith('/rpc') && String(init?.body ?? '').includes('"method":"status"')) {
-        // Setup: imported accounts use the same wallet-service network source as created accounts.
-        return new Response(
-          JSON.stringify({
-            result: {
-              network: { networkId: 'canton:from-status' },
-            },
-          }),
-          { status: 200 },
-        )
-      }
-      throw new Error(`unexpected request: ${url}`)
-    }) as typeof globalThis.fetch
-    renderWithVault(
-      {
-        addAccount: async (args) => {
-          // Assertion fixture: capture the exact account data that would be encrypted in the vault.
-          added.push(args)
-          return {
-            id: 'imported-account',
-            name: args.name,
-            partyId: args.partyId,
-            publicKeyBase64: args.publicKeyBase64,
-            network: args.network,
-            isPrimary: false,
-            createdAt: 2,
-          }
-        },
-      },
-      <ImportPrivateKeyForm />,
-    )
-
-    // Action: fill the three requested import fields and submit.
-    await user.type(screen.getByLabelText(/^party id$/i), 'alice::fingerprint')
-    await user.type(screen.getByLabelText(/^party name$/i), 'alice')
-    await user.type(screen.getByLabelText(/^private key$/i), keypair.privateKeyHex)
-    await user.click(screen.getByRole('button', { name: /^import private key$/i }))
-
-    // Expected result: addAccount receives the trimmed values, current network, and derived public key.
-    await waitFor(() => assert.equal(added.length, 1))
-    assert.deepEqual(added[0], {
-      name: 'alice',
-      partyId: 'alice::fingerprint',
-      privateKeyHex: keypair.privateKeyHex,
-      publicKeyBase64: expectedPublicKey,
-      network: 'canton:from-status',
-    })
-    assert.equal(getToastEntries()[0]?.message, 'Private key imported.')
-  })
-})
-
-// Private-key export tests cover direct reveal for the selected account.
-describe('ExportPrivateKeyView', () => {
-  afterEach(() => {
-    // Cleanup: reset DOM, toast state, and the clipboard shim after export scenarios.
-    cleanup()
-    toast.clear()
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: originalClipboard,
-    })
-  })
-
-  it('reveals and copies the private key only after a password re-check', async () => {
-    // Scenario: the secret is gated behind a fresh password confirmation even though
-    // the vault is already unlocked.
-    const user = userEvent.setup()
-    const copied: string[] = []
-    Object.defineProperty(navigator, 'clipboard', {
-      configurable: true,
-      value: {
-        writeText: async (value: string) => {
-          copied.push(value)
-        },
-        readText: async () => '',
-      },
-    })
-    const privateKey = 'aa'.repeat(32)
-    renderWithVault(
-      {
-        verifyPassword: (password) => password === 'correct-horse-battery',
-        exportPrivateKey: (accountId) => {
-          assert.equal(accountId, PRIMARY_ACCOUNT.id)
-          return privateKey
-        },
-      },
-      <ExportPrivateKeyView />,
-    )
-
-    // Expected setup state: account context is shown, but the secret stays hidden.
-    assert.ok(screen.getByText(PRIMARY_ACCOUNT.name))
-    assert.ok(screen.getByText(PRIMARY_ACCOUNT.partyId))
-    assert.equal(screen.queryByText(privateKey), null)
-
-    // Action: a wrong password keeps the key hidden.
-    await user.type(screen.getByLabelText(/confirm password/i), 'wrong')
-    await user.click(screen.getByRole('button', { name: /^reveal private key$/i }))
-    assert.ok(screen.getByText(/incorrect password/i))
-    assert.equal(screen.queryByText(privateKey), null)
-
-    // Action: the correct password reveals the secret, then it can be copied.
-    await user.clear(screen.getByLabelText(/confirm password/i))
-    await user.type(screen.getByLabelText(/confirm password/i), 'correct-horse-battery')
-    await user.click(screen.getByRole('button', { name: /^reveal private key$/i }))
-    assert.ok(screen.getByText(privateKey))
-
-    await user.click(screen.getByRole('button', { name: /^copy private key$/i }))
-
-    // Expected result: the copied value is exactly the selected party private key.
-    await waitFor(() => assert.deepEqual(copied, [privateKey]))
-  })
-
-  it('shows an empty state when no account is selected', () => {
-    // Scenario: export is unavailable until the wallet has a selected account.
-    renderWithVault({ accounts: [], primary: null }, <ExportPrivateKeyView />)
-
-    // Expected result: no secret is requested or shown.
-    assert.ok(screen.getByText(/no selected account/i))
-  })
-})
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
index d2377420..50e26cbe 100644
--- a/carpincho-wallet/test/components/SendConfirm.test.tsx
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -42,7 +42,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index 6f512a22..af8b1e09 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -66,7 +66,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 51749fe4..6b0f4c9b 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -41,7 +41,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
index e7b27df5..cb09e3d6 100644
--- a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -32,7 +32,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/SecurityPanel.test.tsx b/carpincho-wallet/test/components/VaultPanel.test.tsx
similarity index 98%
rename from carpincho-wallet/test/components/SecurityPanel.test.tsx
rename to carpincho-wallet/test/components/VaultPanel.test.tsx
index 7268f779..07715036 100644
--- a/carpincho-wallet/test/components/SecurityPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultPanel.test.tsx
@@ -3,9 +3,9 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ReactNode } from 'react'
-import { AutoLockList, PasswordForm } from '@/components/SecurityPanel'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { getToastEntries, toast } from '@/components/ui/toast'
+import { AutoLockList, PasswordForm } from '@/components/VaultPanel'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
 const baseVault = (): VaultContextValue => ({
@@ -30,7 +30,6 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportPrivateKey: () => '',
   exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
   importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
diff --git a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
index ca84aa56..715c77fc 100644
--- a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
@@ -34,7 +34,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
index ade86383..cb0c228f 100644
--- a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
@@ -34,7 +34,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/components/utils/UtilsList.test.tsx b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
index 407d2d2b..7501afaf 100644
--- a/carpincho-wallet/test/components/utils/UtilsList.test.tsx
+++ b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
@@ -33,7 +33,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
diff --git a/carpincho-wallet/test/vault/exportPrivateKey.test.tsx b/carpincho-wallet/test/vault/exportPrivateKey.test.tsx
deleted file mode 100644
index 83339d85..00000000
--- a/carpincho-wallet/test/vault/exportPrivateKey.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, beforeEach, describe, it } from 'node:test'
-import { act, cleanup, render } from '@testing-library/react'
-import { useVault } from '@/vault/useVault'
-import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
-
-// Captures the live vault context so tests can exercise real encrypted-vault mutations.
-const captureVault = (): { ref: { current: VaultContextValue | null } } => {
-  const ref: { current: VaultContextValue | null } = { current: null }
-  const Probe = (): null => {
-    ref.current = useVault()
-    return null
-  }
-  render(
-    <VaultProvider>
-      <Probe />
-    </VaultProvider>,
-  )
-  return { ref }
-}
-
-// Export tests cover the only intentional path from vault secrets to UI.
-describe('VaultContext.exportPrivateKey', () => {
-  beforeEach(() => {
-    // Setup: each scenario starts with an empty browser vault store.
-    localStorage.clear()
-  })
-
-  afterEach(() => {
-    // Cleanup: remove mounted providers and encrypted vault blobs between scenarios.
-    cleanup()
-    localStorage.clear()
-  })
-
-  it('returns the private key for the requested unlocked account only', async () => {
-    // Scenario: export uses an explicit secret accessor so public account lists stay secret-free.
-    const { ref } = captureVault()
-    await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
-      await ref.current?.addAccount({
-        name: 'alice',
-        partyId: 'alice::party',
-        network: 'localnet',
-        privateKeyHex: 'aa'.repeat(32),
-        publicKeyBase64: 'alice-public',
-      })
-      await ref.current?.addAccount({
-        name: 'bob',
-        partyId: 'bob::party',
-        network: 'localnet',
-        privateKeyHex: 'bb'.repeat(32),
-        publicKeyBase64: 'bob-public',
-      })
-    })
-    const bob = ref.current?.accounts.find((account) => account.name === 'bob')
-
-    // Expected result: exporting Bob returns Bob's key and never falls back to Alice's key.
-    assert.equal(ref.current?.exportPrivateKey(bob?.id ?? ''), 'bb'.repeat(32))
-  })
-
-  it('rejects unknown accounts', async () => {
-    // Scenario: callers must provide an account id that exists in the unlocked vault.
-    const { ref } = captureVault()
-    await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
-    })
-
-    // Expected result: invalid ids fail instead of returning an arbitrary secret.
-    assert.throws(() => ref.current?.exportPrivateKey('missing'), /unknown account/i)
-  })
-})
diff --git a/carpincho-wallet/test/views/CreateVault.test.tsx b/carpincho-wallet/test/views/CreateVault.test.tsx
index 3dca334d..489a6f8b 100644
--- a/carpincho-wallet/test/views/CreateVault.test.tsx
+++ b/carpincho-wallet/test/views/CreateVault.test.tsx
@@ -28,7 +28,6 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportPrivateKey: () => '',
   exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
   importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index 3592e854..0da21162 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -31,7 +31,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportPrivateKey: () => '',
     exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
     importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',

From d4e8a1b2d05b19b479255b8d1b23cfb32541045e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:46:01 -0300
Subject: [PATCH 073/121] style(carpincho-wallet): balance vault backup
 actions, add import helper, ease strength spacing

---
 .../src/components/PasswordStrengthIndicator.tsx      |  2 +-
 carpincho-wallet/src/components/VaultBackupPanel.tsx  | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
index 3b95c550..fb8a7007 100644
--- a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
+++ b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
@@ -46,7 +46,7 @@ export const PasswordStrengthIndicator = ({ password, id }: Props): JSX.Element
         </div>
       </div>
 
-      <p className="flex items-center gap-1 text-[0.8rem] text-soft">
+      <p className="flex items-center gap-1.5 text-[0.8rem] text-soft">
         More info
         <Tooltip
           label="Password recommendations"
diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 519cdcc7..72f7c611 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -53,12 +53,18 @@ export const ExportVaultView = (): JSX.Element => {
       <JsonView value={envelope} />
       <div className="flex gap-3">
         <SecondaryButton
+          className="flex-1"
           onClick={() => copyText(JSON.stringify(envelope, null, 2), 'Vault backup copied.')}
         >
           {COPY_ICON}
           Copy JSON
         </SecondaryButton>
-        <SecondaryButton onClick={onDownload}>Download JSON</SecondaryButton>
+        <SecondaryButton
+          className="flex-1"
+          onClick={onDownload}
+        >
+          Download JSON
+        </SecondaryButton>
       </div>
     </div>
   )
@@ -112,6 +118,9 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
 
   return (
     <Tabs defaultValue="paste">
+      <p className="mb-4 text-[0.85rem] text-muted-foreground">
+        Restore accounts from a backup created by Export Vault.
+      </p>
       <TabsList className="mb-4">
         <TabTrigger value="paste">Paste</TabTrigger>
         <TabTrigger value="upload">Upload file</TabTrigger>

From 8f09ee3d7a8f6e3dd8f2d3993dada76401b426c9 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 03:50:43 -0300
Subject: [PATCH 074/121] fix(carpincho-wallet): guard password change against
 double submit

---
 carpincho-wallet/src/components/VaultPanel.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultPanel.tsx b/carpincho-wallet/src/components/VaultPanel.tsx
index e182ba14..06891bb0 100644
--- a/carpincho-wallet/src/components/VaultPanel.tsx
+++ b/carpincho-wallet/src/components/VaultPanel.tsx
@@ -33,12 +33,14 @@ const initialState = (): PasswordState => ({
 export const PasswordForm = (): JSX.Element => {
   const v = useVault()
   const [state, setState] = useState<PasswordState>(initialState)
+  const [busy, setBusy] = useState(false)
 
   const canSubmit = state.current.trim() !== '' && state.valid
 
   const onSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault()
-    if (!canSubmit) return
+    if (!canSubmit || busy) return
+    setBusy(true)
     try {
       await v.changePassword(state.current, state.next)
       setState(initialState())
@@ -46,6 +48,8 @@ export const PasswordForm = (): JSX.Element => {
     } catch (err) {
       const msg = err instanceof Error ? err.message : 'Could not change password.'
       setState((s) => ({ ...s, error: msg }))
+    } finally {
+      setBusy(false)
     }
   }
 
@@ -79,10 +83,10 @@ export const PasswordForm = (): JSX.Element => {
         </p>
       )}
       <PrimaryButton
-        disabled={!canSubmit}
+        disabled={!canSubmit || busy}
         type="submit"
       >
-        Change password
+        {busy ? 'Changing…' : 'Change password'}
       </PrimaryButton>
     </form>
   )

From 8596990ef2350c0516e0d29619e7b871b3b9a729 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:21:13 -0300
Subject: [PATCH 075/121] fix(carpincho-wallet): harden vault import validation
 and backup clipboard hygiene

---
 .../src/components/VaultBackupPanel.tsx       | 17 +++++++---
 carpincho-wallet/src/utils/download.ts        |  9 ++++--
 carpincho-wallet/src/vault/VaultContext.tsx   | 32 ++++++++++++-------
 .../test/components/VaultBackupPanel.test.tsx |  1 +
 .../test/vault/importVault.test.tsx           | 27 ++++++++++++++++
 5 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 72f7c611..85530042 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -6,7 +6,7 @@ import { JsonView } from '@/components/ui/JsonView'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import { INPUT_CLASS } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
-import { copyText } from '@/utils/clipboard'
+import { copySecret } from '@/utils/clipboard'
 import { cn } from '@/utils/cn'
 import { downloadJson } from '@/utils/download'
 import type { VaultEnvelope } from '@/vault/types'
@@ -15,7 +15,7 @@ import { useVault } from '@/vault/useVault'
 const backupFilename = (): string => {
   const d = new Date()
   const p = (n: number): string => String(n).padStart(2, '0')
-  const stamp = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}`
+  const stamp = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`
   return `carpincho-vault-${stamp}.json`
 }
 
@@ -54,7 +54,12 @@ export const ExportVaultView = (): JSX.Element => {
       <div className="flex gap-3">
         <SecondaryButton
           className="flex-1"
-          onClick={() => copyText(JSON.stringify(envelope, null, 2), 'Vault backup copied.')}
+          onClick={() =>
+            copySecret(
+              JSON.stringify(envelope, null, 2),
+              'Vault backup copied. Clipboard clears in 60s.',
+            )
+          }
         >
           {COPY_ICON}
           Copy JSON
@@ -94,7 +99,11 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
     try {
       const r = await v.importVault(envelope)
       toast.success(`Imported ${r.imported}, skipped ${r.skipped}, rejected ${r.rejected}.`)
-      onImported?.()
+      // Only leave the screen when something landed; otherwise stay so the counts
+      // (all skipped/rejected) remain readable and the user can retry.
+      if (r.imported > 0) {
+        onImported?.()
+      }
     } catch (err) {
       toast.error(`Import vault failed: ${err instanceof Error ? err.message : String(err)}`)
     } finally {
diff --git a/carpincho-wallet/src/utils/download.ts b/carpincho-wallet/src/utils/download.ts
index b34f158a..6ff97c4e 100644
--- a/carpincho-wallet/src/utils/download.ts
+++ b/carpincho-wallet/src/utils/download.ts
@@ -10,7 +10,10 @@ export const downloadJson = (filename: string, data: unknown): void => {
   anchor.href = url
   anchor.download = filename
   document.body.appendChild(anchor)
-  anchor.click()
-  anchor.remove()
-  URL.revokeObjectURL(url)
+  try {
+    anchor.click()
+  } finally {
+    anchor.remove()
+    URL.revokeObjectURL(url)
+  }
 }
diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index e04c9611..438b5dcc 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -391,29 +391,39 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       let imported = 0
       let skipped = 0
       let rejected = 0
-      for (const entry of envelope.accounts) {
+      for (const raw of envelope.accounts as unknown[]) {
+        const entry = raw as Record<string, unknown>
+        // Import is the only ungated, externally-supplied path, so reject any entry
+        // whose required fields are not strings before they reach the encrypted store.
+        if (
+          raw === null ||
+          typeof raw !== 'object' ||
+          typeof entry.name !== 'string' ||
+          typeof entry.partyId !== 'string' ||
+          typeof entry.publicKeyBase64 !== 'string' ||
+          typeof entry.privateKeyHex !== 'string' ||
+          typeof entry.network !== 'string'
+        ) {
+          rejected += 1
+          continue
+        }
+        const { name, partyId, publicKeyBase64, privateKeyHex, network } = entry
         let derived: string
         try {
-          derived = await derivePublicKeyBase64(entry.privateKeyHex)
+          derived = await derivePublicKeyBase64(privateKeyHex)
         } catch {
           rejected += 1
           continue
         }
-        if (derived !== entry.publicKeyBase64 || !/^.+::.+$/.test(entry.partyId)) {
+        if (derived !== publicKeyBase64 || !/^.+::.+$/.test(partyId)) {
           rejected += 1
           continue
         }
-        if (unlockedPlaintext.accounts.some((a) => a.partyId === entry.partyId)) {
+        if (unlockedPlaintext.accounts.some((a) => a.partyId === partyId)) {
           skipped += 1
           continue
         }
-        await addAccount({
-          name: entry.name,
-          partyId: entry.partyId,
-          network: entry.network,
-          privateKeyHex: entry.privateKeyHex,
-          publicKeyBase64: entry.publicKeyBase64,
-        })
+        await addAccount({ name, partyId, network, privateKeyHex, publicKeyBase64 })
         imported += 1
       }
       return { imported, skipped, rejected }
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
index cb09e3d6..e81ec81b 100644
--- a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -118,6 +118,7 @@ describe('ImportVaultForm', () => {
     fireEvent.change(textarea, { target: { value: JSON.stringify(envelope) } })
     await user.click(screen.getByRole('button', { name: /^import vault$/i }))
     await waitFor(() => assert.equal(calls.length, 1))
+    assert.deepEqual(calls[0], envelope)
     const entries = getToastEntries()
     assert.ok(entries.some((e) => typeof e.message === 'string' && /imported 2/i.test(e.message)))
   })
diff --git a/carpincho-wallet/test/vault/importVault.test.tsx b/carpincho-wallet/test/vault/importVault.test.tsx
index fda5cd58..2f706618 100644
--- a/carpincho-wallet/test/vault/importVault.test.tsx
+++ b/carpincho-wallet/test/vault/importVault.test.tsx
@@ -123,6 +123,33 @@ describe('VaultContext.importVault', () => {
     assert.deepEqual(result, { imported: 0, skipped: 1, rejected: 1 })
   })
 
+  it('rejects entries whose required fields are not strings', async () => {
+    const good = await generateKeypair()
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
+    })
+
+    let result: { imported: number; skipped: number; rejected: number } | undefined
+    await act(async () => {
+      result = await ref.current?.importVault(
+        envelopeOf([
+          null as unknown as never,
+          {
+            name: 42 as unknown as string,
+            partyId: 'alice::ns',
+            publicKeyBase64: good.publicKeyBase64,
+            privateKeyHex: good.privateKeyHex,
+            network: 'localnet',
+          },
+        ]),
+      )
+    })
+
+    assert.deepEqual(result, { imported: 0, skipped: 0, rejected: 2 })
+    assert.equal(ref.current?.accounts.length, 0)
+  })
+
   it('throws on a malformed envelope', async () => {
     const { ref } = captureVault()
     await act(async () => {

From 5b9dcd4e3e00de8040b9dbe632e6824f65d4a647 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:27:28 -0300
Subject: [PATCH 076/121] refactor(carpincho-wallet): extract shared
 FileDropInput for DAR and vault import

---
 .../src/components/DarUploadPanel.tsx         | 27 ++++--------
 .../src/components/VaultBackupPanel.tsx       | 25 +++--------
 .../src/components/ui/FileDropInput.tsx       | 42 +++++++++++++++++++
 3 files changed, 55 insertions(+), 39 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/FileDropInput.tsx

diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index 9a5a25fd..f03c34a5 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { type DarUploadResponse, uploadDarFile } from '@/api/walletService'
 import { PrimaryButton } from '@/components/ui/Button'
+import { FileDropInput } from '@/components/ui/FileDropInput'
 import { toast } from '@/components/ui/toast'
 
 export interface DarUploadApi {
@@ -44,31 +45,17 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
         <span className="text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground">
           DAR file
         </span>
-        <input
+        <FileDropInput
           id="dar-file"
-          type="file"
           accept=".dar,application/octet-stream"
-          aria-label="DAR file"
-          className="sr-only"
-          onChange={(event) => {
+          ariaLabel="DAR file"
+          prompt="Drop a .dar file or click to choose."
+          fileName={file?.name ?? null}
+          onSelect={(selected) => {
             setUploadedFileName(undefined)
-            setFile(event.currentTarget.files?.[0])
+            setFile(selected ?? undefined)
           }}
         />
-        <label
-          htmlFor="dar-file"
-          className="cursor-pointer rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center hover:border-primary/60"
-        >
-          {file === undefined ? (
-            <span className="text-[0.82rem] font-medium text-muted-foreground">
-              Drop a .dar file or click to choose.
-            </span>
-          ) : (
-            <span className="rounded-sm bg-muted px-2 py-1">
-              <span className="font-mono text-[0.82rem] text-foreground">{file.name}</span>
-            </span>
-          )}
-        </label>
       </div>
       <PrimaryButton
         className="w-full"
diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 85530042..1f5ae0c9 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -1,6 +1,7 @@
 import { type FormEvent, useState } from 'react'
 import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { FileDropInput } from '@/components/ui/FileDropInput'
 import { COPY_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
@@ -166,28 +167,14 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
           onSubmit={onUploadSubmit}
           className="flex flex-col gap-4"
         >
-          <input
+          <FileDropInput
             id="import-vault-file"
-            type="file"
             accept=".json,application/json"
-            aria-label="Vault JSON file"
-            className="sr-only"
-            onChange={(e) => setFile(e.currentTarget.files?.[0] ?? null)}
+            ariaLabel="Vault JSON file"
+            prompt="Drop a .json file or click to choose."
+            fileName={file?.name ?? null}
+            onSelect={setFile}
           />
-          <label
-            htmlFor="import-vault-file"
-            className="cursor-pointer rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center hover:border-primary/60"
-          >
-            {file === null ? (
-              <span className="text-[0.82rem] font-medium text-muted-foreground">
-                Drop a .json file or click to choose.
-              </span>
-            ) : (
-              <span className="rounded-sm bg-muted px-2 py-1 font-mono text-[0.82rem] text-foreground">
-                {file.name}
-              </span>
-            )}
-          </label>
           <PrimaryButton
             type="submit"
             disabled={busy || file === null}
diff --git a/carpincho-wallet/src/components/ui/FileDropInput.tsx b/carpincho-wallet/src/components/ui/FileDropInput.tsx
new file mode 100644
index 00000000..39acf1db
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/FileDropInput.tsx
@@ -0,0 +1,42 @@
+interface FileDropInputProps {
+  id: string
+  accept: string
+  ariaLabel: string
+  prompt: string
+  fileName: string | null
+  onSelect: (file: File | null) => void
+}
+
+// Visually-hidden file input fronted by a dashed dropzone label; shows the chosen
+// file name once picked. Shared by the DAR upload and vault import surfaces.
+export const FileDropInput = ({
+  id,
+  accept,
+  ariaLabel,
+  prompt,
+  fileName,
+  onSelect,
+}: FileDropInputProps): JSX.Element => (
+  <>
+    <input
+      id={id}
+      type="file"
+      accept={accept}
+      aria-label={ariaLabel}
+      className="sr-only"
+      onChange={(event) => onSelect(event.currentTarget.files?.[0] ?? null)}
+    />
+    <label
+      htmlFor={id}
+      className="cursor-pointer rounded-md border border-dashed border-border bg-surface px-4 py-6 text-center hover:border-primary/60"
+    >
+      {fileName === null ? (
+        <span className="text-[0.82rem] font-medium text-muted-foreground">{prompt}</span>
+      ) : (
+        <span className="rounded-sm bg-muted px-2 py-1 font-mono text-[0.82rem] text-foreground">
+          {fileName}
+        </span>
+      )}
+    </label>
+  </>
+)

From 205645ccb237b3b66d4523862c070607019b79ea Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:32:42 -0300
Subject: [PATCH 077/121] docs(carpincho-wallet): sync agents and architecture
 with the vault menu and backup redesign

---
 carpincho-wallet/AGENTS.md       |  4 ++--
 carpincho-wallet/architecture.md | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index ad345478..e67de2b3 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -11,9 +11,9 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 | Language | TypeScript (strict mode) | |
 | Framework | Vite 6 + React 18 | SPA; also builds as a Chrome extension |
 | Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
-| Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer at Settings → Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
+| Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer menu under Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
 | Fonts | Self-hosted via `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Imported once in `src/main.tsx`; works offline in the extension popup. Manrope is the entire UI: `font-display` for hero wordmarks, view-level headings, section markers (heavier weight for hierarchy) and `font-sans` for UI chrome / body / labels / buttons. `font-mono` (JetBrains Mono) is for party IDs, hashes, RPC URLs, JSON payloads, status eyebrows |
-| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`, `CREATE_ICON`, `EXERCISE_ICON`, `CONTRACTS_ICON`, `UPLOAD_ICON`, `DROPLET_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` auto-accept-incoming-transfers toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `UtilsPanel` (Utils — developer ledger tools rendered as a scannable list where each item opens in a centered modal `Sheet`: Create contract, Exercise choice, Active contracts, and Upload DAR, plus a Tap Amulet faucet action row that requests 100 AMT and reports progress via toast — the faucet moved here from the Assets tab); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
+| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, FileDropInput, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`, `CREATE_ICON`, `EXERCISE_ICON`, `CONTRACTS_ICON`, `UPLOAD_ICON`, `DROPLET_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` auto-accept-incoming-transfers toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `UtilsPanel` (Utils — developer ledger tools rendered as a scannable list where each item opens in a centered modal `Sheet`: Create contract, Exercise choice, Active contracts, and Upload DAR, plus a Tap Amulet faucet action row that requests 100 AMT and reports progress via toast — the faucet moved here from the Assets tab); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
 | Feedback | Toast vs inline Alert vs error prop | Transient system feedback (action results, async errors, network failures, copy confirmations) renders via `toast.*` from [`@/components/ui/toast.ts`](src/components/ui/toast.ts) — never as inline `Alert`. Mount the `ToastProvider` once in `App.tsx`. Field-level error state (mismatched passwords, wrong current password on a verify step, invalid input) uses the `error` prop on `TextInput` / `PasswordInput` (danger border + `aria-invalid`); pair it with `aria-errormessage` pointing at a sibling caption `<p>` when there is a human-readable reason to render. Inline `Alert` is reserved for form-level errors that cannot be attributed to a single field and for persistent contextual hints inside cards. All callers (React components, WalletConnect handlers in `src/wc/`, vault errors, extension bridge) use the imperative `toast` import directly. Variant durations: non-critical variants (`info` / `success` / `warning`) auto-dismiss after 5 s; only `error` (must-read) persists until dismissed. Identical messages collapse — emitting a string message that matches a visible toast of the same variant replaces it with a fresh entry (so rapid repeats like copy clicks collapse to a single toast and restart its timer); distinct messages of the same variant (a copy confirmation vs an RPC test result) stack separately. Toasts render as elevated `bg-surface` cards (border + `shadow-popover`) with a variant-tinted icon badge and a left accent rail, sized to the app content width (`w-popup`). The message body caps at `max-h-40` and scrolls when longer; `error` toasts (only) carry a copy-icon button that copies the rendered message text. Max 3 visible, top-center, newest on top |
 | Package manager | npm | lockfile: `package-lock.json` |
 | Data fetching | @tanstack/react-query | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); a single `QueryClient` is mounted in `App.tsx`. Read/list logic lives in `src/cip56/*`, wrapped by hooks in `src/hooks/*` |
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index e4e32c52..57276d69 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -14,10 +14,10 @@
 | Wallet protocol | Injected CIP-0103 provider + optional WalletConnect Sign Client 2.x | Browser extension provider events by default; Reown relay only for WalletConnect fallback |
 | Cryptography | @noble/ed25519 3.x, @noble/hashes 1.x | Ed25519 signing; PBKDF2 + AES-GCM vault |
 | Data fetching | @tanstack/react-query 5.x | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); imperative refetch after sends. Single `QueryClient` mounted in `App.tsx` |
-| UI primitives | React 18 + Radix UI | `@radix-ui/react-{collapsible,dialog,tabs,toast,tooltip}` for modals/tabs/toasts/tooltips; local wrappers (Button family, TextInput, PasswordInput, Alert, Card, AccountAvatar, PendingActionCard, Sheet, Tabs, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) for static visuals and Radix re-skins; shared icon SVG literals live in `src/components/ui/icons.tsx`; `Sheet` is the shared Radix Dialog scaffold for sheet-style flows (overlay, title, close button) and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`; right opens as a 400px-wide top-aligned drawer clamped by `100vw`; center renders a centered modal dialog); `ToastProvider` and `TooltipProvider` are both mounted once in `App.tsx`; `TextInput` and `PasswordInput` accept `error?: boolean` which applies a danger border, a persistent focus ring, and `aria-invalid`; `Button.tsx` exports `GHOST_BUTTON_CLASS` / `ICON_BUTTON_CLASS` for ad-hoc buttons (e.g. `PasswordInput`'s show/hide button) |
+| UI primitives | React 18 + Radix UI | `@radix-ui/react-{collapsible,dialog,tabs,toast,tooltip}` for modals/tabs/toasts/tooltips; local wrappers (Button family, TextInput, PasswordInput, Alert, Card, AccountAvatar, PendingActionCard, Sheet, Tabs, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, FileDropInput, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) for static visuals and Radix re-skins; shared icon SVG literals live in `src/components/ui/icons.tsx`; `Sheet` is the shared Radix Dialog scaffold for sheet-style flows (overlay, title, close button) and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`; right opens as a 400px-wide top-aligned drawer clamped by `100vw`; center renders a centered modal dialog); `ToastProvider` and `TooltipProvider` are both mounted once in `App.tsx`; `TextInput` and `PasswordInput` accept `error?: boolean` which applies a danger border, a persistent focus ring, and `aria-invalid`; `Button.tsx` exports `GHOST_BUTTON_CLASS` / `ICON_BUTTON_CLASS` for ad-hoc buttons (e.g. `PasswordInput`'s show/hide button) |
 | Styling | Tailwind CSS v4 (`@tailwindcss/vite`) | Utility classes inline in JSX; `src/index.css` declares CSS-variable tokens on `:root` / `[data-theme="dark"]` and exposes them to Tailwind through `@theme inline`; `@layer base` holds global resets; Radix `data-[state=...]` and `data-[highlighted]` attrs drive interactive variants |
 | Fonts | `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Self-hosted variable fonts so the extension popup works offline. Manrope is the whole UI: `font-sans` (UI chrome, body, labels, buttons) and `font-display` (hero wordmarks, view headings, section markers — heavier weight for hierarchy). JetBrains Mono is `font-mono` (party IDs, hashes, RPC URLs, JSON payloads) |
-| Theming | Light / dark / system selector in the drawer menu | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), resolves `system` against `prefers-color-scheme` (re-resolving on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount; the selector lives at Settings → Theme (`src/components/menu/ThemeMenu.tsx`) with no header toggle; the Tailwind `dark:` variant is rebound to `[data-theme='dark']` via `@custom-variant` |
+| Theming | Light / dark / system selector in the drawer menu | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), resolves `system` against `prefers-color-scheme` (re-resolving on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount; the selector lives in the drawer under Theme (`src/components/menu/ThemeMenu.tsx`) with no header toggle; the Tailwind `dark:` variant is rebound to `[data-theme='dark']` via `@custom-variant` |
 | Testing | Node built-in `node:test` + `tsx` loader | React Testing Library + happy-dom for `.tsx` interaction tests; bootstrapped via `test/setup-dom.ts` |
 | Runtime | Browser (Chrome extension popup or standalone web tab) | |
 
@@ -36,7 +36,7 @@ src/
                     SendTokenForm, SendConfirm, ContactsPicker, AmountField,
                     ConnectionFooter,
                     NewPasswordFields, CreateAccountForm, PasswordStrengthIndicator,
-                    SecurityPanel, UtilsPanel, utils/* (UtilsList, CreateContractUtil,
+                    VaultPanel, VaultBackupPanel, UtilsPanel, utils/* (UtilsList, CreateContractUtil,
                     ExerciseChoiceUtil, ActiveContractsUtil, DarUploadPanel, JsonField,
                     UpdateIdResult), menu/* drawer, ui/* primitives).
                     ui/* wraps Radix headless primitives (Tabs on top of
@@ -45,8 +45,8 @@ src/
                     Collapsible on top of @radix-ui/react-collapsible)
                     and provides static visuals (Button, TextInput, PasswordInput,
                     Alert, Card, OptionList, Stepper, DangerConfirm, AccountAvatar,
-                    PendingActionCard, Select, DetailRow, Collapsible, Copyable,
-                    CopyableLabel, JsonView).
+                    PendingActionCard, Select, DetailRow, FileDropInput, Collapsible,
+                    Copyable, CopyableLabel, JsonView).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
   cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,
@@ -57,7 +57,7 @@ src/
   extension/        Chrome extension scripts: background, content script, provider injection
   provider/         CIP-0103 wallet provider — request dispatcher and method handlers
   vault/            Encrypted local vault: PBKDF2 key derivation, AES-GCM storage, React context
-  utils/            Pure helpers (account formatting, clipboard, classnames cn, JSON pretty-print)
+  utils/            Pure helpers (account formatting, clipboard, classnames cn, JSON pretty-print, file download)
   views/            Top-level UI views (onboarding/* two-step wizard, Unlock, Home,
                     ConnectionSettings) plus home/* — the extracted HomeView logic
                     (pending-actions state, extension/provider request handling,
@@ -84,7 +84,7 @@ Transient system feedback — action results, async errors, network failures, co
 
 The vault is the security core of the wallet. It holds encrypted account secrets in `localStorage` and exposes a React context so views can read and mutate wallet state without ever touching the raw ciphertext.
 
-- **`VaultContext.tsx`** — React context that owns all in-memory plaintext. Module-scope closures hide the decrypted vault and session password from browser DevTools.
+- **`VaultContext.tsx`** — React context that owns all in-memory plaintext. Module-scope closures hide the decrypted vault and session password from browser DevTools. Exposes `exportVault()` / `importVault()` for a whole-vault JSON backup envelope (`{ v: 1, accounts: [{ name, partyId, publicKeyBase64, privateKeyHex, network }] }`); import validates each entry's Ed25519 derivation and partyId shape, skips duplicates, and reuses `addAccount`.
 - **`crypto.ts`** — Stateless encryption helpers: PBKDF2-HMAC-SHA256 (600 000 iterations) for key derivation; AES-256-GCM via `SubtleCrypto` for encryption/decryption.
 - **`storage.ts`** — Two-step localStorage write (`KEY_VAULT_NEXT` then `KEY_VAULT`) for crash-safe rotation. On load, checks for an interrupted rotation and recovers automatically.
 - **`keypair.ts`** — Ed25519 sign/verify wrappers around `@noble/ed25519`.
@@ -206,7 +206,7 @@ Three providers wrap the app. `ThemeProvider` is mounted outermost (in `src/main
           <Shell>           src/App.tsx — reads vault state to pick the active view
             <Header />      includes the Menu burger button
             <HomeView />    or <OnboardingFlow />, <UnlockView />, etc.
-            <MenuSheet />   drill-down drawer (Menu → Settings → Theme / Security & Password → Password / Auto-lock)
+            <MenuSheet />   drill-down drawer (Menu → Theme / Vault → Password / Auto Lock / Export Vault / Import Vault)
           </Shell>
         </ToastProvider>
       </TooltipProvider>
@@ -214,13 +214,13 @@ Three providers wrap the app. `ThemeProvider` is mounted outermost (in `src/main
 
 There is no router. `Shell` picks one view from `useVault()` via the pure `selectShellView` helper in `src/App.tsx`, branching on `hasVault`, `isLocked`, and `accounts.length`: no vault → `OnboardingFlow` (step 1, create vault); unlocked vault with no account yet → `OnboardingFlow` (step 2, create first account); locked vault → `UnlockView`; unlocked vault with at least one account → `HomeView`. While `useVault()` reports `isLoading`, `Shell` renders a centred spinner instead of any view so the session-restore decision lands in one paint and the Unlock screen never flashes.
 
-The Menu drawer lives in `src/components/menu/`: `MenuSheet.tsx` is the navigation orchestrator (wraps the shared `Sheet` primitive with `side="right"`, opening as a 400px-wide top-aligned panel clamped by `100vw` that slides in via `animate-sheet-slide-right`), `screens.ts` holds the `Screen` union plus the `SCREENS` metadata map and the `MENU_LISTS` row data for the navigation-list screens, `MenuList.tsx` renders those rows, and `ThemeMenu.tsx` is the Theme leaf. It manages internal screen state (`root` → `settings` → `theme` | `security`; `security` → `password` | `auto-lock`); each in-drawer transition uses `animate-slide-in-right` (forward) or `animate-slide-in-left` (back). Navigation-list screens are data-driven via `MENU_LISTS`; leaf screens (`theme`, `password`, `auto-lock`) render a component. Every new option must be added as another `Screen` with an entry in the `SCREENS` map (`title`, `description`, `parent`); accordion-style expansion inside a screen is disallowed.
+The Menu drawer lives in `src/components/menu/`: `MenuSheet.tsx` is the navigation orchestrator (wraps the shared `Sheet` primitive with `side="right"`, opening as a 400px-wide top-aligned panel clamped by `100vw` that slides in via `animate-sheet-slide-right`), `screens.ts` holds the `Screen` union plus the `SCREENS` metadata map and the `MENU_LISTS` row data for the navigation-list screens, `MenuList.tsx` renders those rows, and `ThemeMenu.tsx` is the Theme leaf. It manages internal screen state (`root` → `theme` | `vault`; `vault` → `password` | `auto-lock` | `export-vault` | `import-vault`); each in-drawer transition uses `animate-slide-in-right` (forward) or `animate-slide-in-left` (back). Navigation-list screens are data-driven via `MENU_LISTS`; leaf screens (`theme`, `password`, `auto-lock`, `export-vault`, `import-vault`) render a component. Every new option must be added as another `Screen` with an entry in the `SCREENS` map (`title`, `description`, `parent`); accordion-style expansion inside a screen is disallowed.
 
 ### Theming
 
 - **Tokens** — `src/index.css` defines colour, radius, font, shadow, animation, and sizing tokens. Colours live as CSS custom properties on `:root` (light) and `[data-theme="dark"]` (dark); `@theme inline` re-exposes them to Tailwind so utilities like `bg-surface` / `text-muted-foreground` / `bg-scrim` flip automatically with the data attribute. Radius (`rounded-sm/md/lg/xl`), shadows (`shadow-card`, `shadow-popover`, `shadow-focus`, `shadow-glow`), the font families (`font-display` / `font-sans` both Manrope, `font-mono` JetBrains Mono), and named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`) are also tokens. Custom sizing utilities are declared via `@utility`: `w-popup` (popup viewport width, `min(100%, 430px)`), `w-drawer` (right-anchored drawer width), and `max-h-sheet` (bottom-sheet max height). The palette follows the dappbooster brand: a cool navy dark theme (`#14152b`) matching `dappbooster-canton-landing` and a neutral-grey light theme (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate, with a shared purple→pink brand accent (`--bg-gradient-brand: linear-gradient(135deg, #c670e5, #e71d73)` plus `--shadow-glow`) applied on primary-button hover and the hero wordmark. Green (`--color-success`) is the positive accent (used for the connected-state indicator) and `--color-scrim` is the theme-aware modal/sheet backdrop tint. A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay.
 - **Theme provider** — `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` | `dark` | `system`) stored in `localStorage.carpincho-theme`, defaulting to `system` when nothing is stored. It resolves `system` against `prefers-color-scheme`, re-resolves on media changes while in `system`, and writes the resolved `data-theme` on `<html>` after mount. Components consume it via the `useTheme()` hook (`src/theme/useTheme.ts`), which exposes `{ mode, setMode }`.
-- **Selector** — `src/components/menu/ThemeMenu.tsx` is the Theme leaf inside the Menu drawer (Settings → Theme). It lists `Light` / `Dark` / `System` (System default) and marks the active mode with a checkmark; there is no header toggle.
+- **Selector** — `src/components/menu/ThemeMenu.tsx` is the Theme leaf inside the Menu drawer (a top-level Theme item). It lists `Light` / `Dark` / `System` (System default) and marks the active mode with a checkmark; there is no header toggle.
 
 ### Auth / Session Management
 

From f1fad95af96798f5590cf3be9910a6e977da144a Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:37:26 -0300
Subject: [PATCH 078/121] style(carpincho-wallet): separate current and new
 password fields with a divider

---
 carpincho-wallet/src/components/VaultPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/carpincho-wallet/src/components/VaultPanel.tsx b/carpincho-wallet/src/components/VaultPanel.tsx
index 06891bb0..7e7c5423 100644
--- a/carpincho-wallet/src/components/VaultPanel.tsx
+++ b/carpincho-wallet/src/components/VaultPanel.tsx
@@ -67,6 +67,7 @@ export const PasswordForm = (): JSX.Element => {
         value={state.current}
         onChange={(e) => setState((s) => ({ ...s, current: e.target.value, error: null }))}
       />
+      <hr className="border-border" />
       <NewPasswordFields
         confirm={state.confirm}
         onConfirmChange={(value) => setState((s) => ({ ...s, confirm: value }))}

From 0f7a5884b39424a26929244026b42a7447dc3001 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:42:44 -0300
Subject: [PATCH 079/121] feat(carpincho-wallet): add useWalletServiceTest hook
 for the RPC connection gate

---
 .../src/hooks/useWalletServiceTest.ts         | 52 +++++++++++++++++++
 .../test/useWalletServiceTest.test.tsx        | 50 ++++++++++++++++++
 2 files changed, 102 insertions(+)
 create mode 100644 carpincho-wallet/src/hooks/useWalletServiceTest.ts
 create mode 100644 carpincho-wallet/test/useWalletServiceTest.test.tsx

diff --git a/carpincho-wallet/src/hooks/useWalletServiceTest.ts b/carpincho-wallet/src/hooks/useWalletServiceTest.ts
new file mode 100644
index 00000000..ba584f8b
--- /dev/null
+++ b/carpincho-wallet/src/hooks/useWalletServiceTest.ts
@@ -0,0 +1,52 @@
+import { useCallback, useRef, useState } from 'react'
+import { walletServiceStatus } from '@/api/walletService'
+
+export type WalletServiceTestState = 'idle' | 'testing' | 'connected' | 'unreachable'
+
+export interface WalletServiceTest {
+  state: WalletServiceTestState
+  networkId?: string
+  reason?: string
+  testedUrl?: string
+  test: (rpcUrl: string) => Promise<void>
+}
+
+// Probes a draft RPC URL (not the saved config) and exposes the result as gate state.
+export const useWalletServiceTest = (): WalletServiceTest => {
+  const [state, setState] = useState<WalletServiceTestState>('idle')
+  const [networkId, setNetworkId] = useState<string | undefined>(undefined)
+  const [reason, setReason] = useState<string | undefined>(undefined)
+  const [testedUrl, setTestedUrl] = useState<string | undefined>(undefined)
+  const seq = useRef(0)
+
+  const test = useCallback(async (rpcUrl: string): Promise<void> => {
+    seq.current += 1
+    const ticket = seq.current
+    setTestedUrl(rpcUrl)
+    setState('testing')
+    try {
+      const status = await walletServiceStatus({ rpcUrl })
+      if (ticket !== seq.current) {
+        return
+      }
+      if (status.connection?.isNetworkConnected === true) {
+        setNetworkId(status.network?.networkId)
+        setReason(undefined)
+        setState('connected')
+      } else {
+        setNetworkId(undefined)
+        setReason(status.connection?.networkReason ?? 'Canton network not connected')
+        setState('unreachable')
+      }
+    } catch (err) {
+      if (ticket !== seq.current) {
+        return
+      }
+      setNetworkId(undefined)
+      setReason((err as Error).message)
+      setState('unreachable')
+    }
+  }, [])
+
+  return { state, networkId, reason, testedUrl, test }
+}
diff --git a/carpincho-wallet/test/useWalletServiceTest.test.tsx b/carpincho-wallet/test/useWalletServiceTest.test.tsx
new file mode 100644
index 00000000..ba9ecb12
--- /dev/null
+++ b/carpincho-wallet/test/useWalletServiceTest.test.tsx
@@ -0,0 +1,50 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { act, cleanup, renderHook } from '@testing-library/react'
+import { useWalletServiceTest } from '@/hooks/useWalletServiceTest'
+
+const originalFetch = globalThis.fetch
+
+const respond = (result: unknown): void => {
+  globalThis.fetch = async () => new Response(JSON.stringify({ result }), { status: 200 })
+}
+
+describe('useWalletServiceTest', () => {
+  afterEach(() => {
+    cleanup()
+    globalThis.fetch = originalFetch
+  })
+
+  it('maps a connected status to connected with the network id', async () => {
+    respond({ connection: { isNetworkConnected: true }, network: { networkId: 'canton:local' } })
+    const { result } = renderHook(() => useWalletServiceTest())
+    await act(async () => {
+      await result.current.test('http://host/rpc')
+    })
+    assert.equal(result.current.state, 'connected')
+    assert.equal(result.current.networkId, 'canton:local')
+    assert.equal(result.current.testedUrl, 'http://host/rpc')
+  })
+
+  it('maps a responded-but-not-connected status to unreachable with the reason', async () => {
+    respond({ connection: { isNetworkConnected: false, networkReason: 'syncing' } })
+    const { result } = renderHook(() => useWalletServiceTest())
+    await act(async () => {
+      await result.current.test('http://host/rpc')
+    })
+    assert.equal(result.current.state, 'unreachable')
+    assert.equal(result.current.reason, 'syncing')
+  })
+
+  it('maps a thrown request to unreachable with the error message', async () => {
+    globalThis.fetch = async () => {
+      throw new Error('Failed to fetch')
+    }
+    const { result } = renderHook(() => useWalletServiceTest())
+    await act(async () => {
+      await result.current.test('http://host/rpc')
+    })
+    assert.equal(result.current.state, 'unreachable')
+    assert.equal(result.current.reason, 'Failed to fetch')
+  })
+})

From c08452d70e047756d5333bf5ceb2a74ef6847111 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:46:40 -0300
Subject: [PATCH 080/121] test(carpincho-wallet): harden useWalletServiceTest
 error handling and probe-ordering coverage

---
 .../src/hooks/useWalletServiceTest.ts         |  2 +-
 .../test/useWalletServiceTest.test.tsx        | 47 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/hooks/useWalletServiceTest.ts b/carpincho-wallet/src/hooks/useWalletServiceTest.ts
index ba584f8b..4c6fe0b6 100644
--- a/carpincho-wallet/src/hooks/useWalletServiceTest.ts
+++ b/carpincho-wallet/src/hooks/useWalletServiceTest.ts
@@ -43,7 +43,7 @@ export const useWalletServiceTest = (): WalletServiceTest => {
         return
       }
       setNetworkId(undefined)
-      setReason((err as Error).message)
+      setReason(err instanceof Error ? err.message : String(err))
       setState('unreachable')
     }
   }, [])
diff --git a/carpincho-wallet/test/useWalletServiceTest.test.tsx b/carpincho-wallet/test/useWalletServiceTest.test.tsx
index ba9ecb12..2069164d 100644
--- a/carpincho-wallet/test/useWalletServiceTest.test.tsx
+++ b/carpincho-wallet/test/useWalletServiceTest.test.tsx
@@ -34,6 +34,7 @@ describe('useWalletServiceTest', () => {
     })
     assert.equal(result.current.state, 'unreachable')
     assert.equal(result.current.reason, 'syncing')
+    assert.equal(result.current.testedUrl, 'http://host/rpc')
   })
 
   it('maps a thrown request to unreachable with the error message', async () => {
@@ -46,5 +47,51 @@ describe('useWalletServiceTest', () => {
     })
     assert.equal(result.current.state, 'unreachable')
     assert.equal(result.current.reason, 'Failed to fetch')
+    assert.equal(result.current.testedUrl, 'http://host/rpc')
+  })
+
+  it('ignores a superseded probe and keeps only the latest result', async () => {
+    let resolveFirst: (value: Response) => void = () => undefined
+    const firstResponse = new Promise<Response>((resolve) => {
+      resolveFirst = resolve
+    })
+    let call = 0
+    globalThis.fetch = (async () => {
+      call += 1
+      if (call === 1) {
+        return await firstResponse
+      }
+      return new Response(
+        JSON.stringify({
+          result: {
+            connection: { isNetworkConnected: true },
+            network: { networkId: 'canton:local' },
+          },
+        }),
+        { status: 200 },
+      )
+    }) as typeof fetch
+
+    const { result } = renderHook(() => useWalletServiceTest())
+    await act(async () => {
+      const stale = result.current.test('http://stale/rpc')
+      const fresh = result.current.test('http://fresh/rpc')
+      await fresh
+      resolveFirst(
+        new Response(
+          JSON.stringify({
+            result: { connection: { isNetworkConnected: false, networkReason: 'old' } },
+          }),
+          {
+            status: 200,
+          },
+        ),
+      )
+      await stale
+    })
+
+    assert.equal(result.current.state, 'connected')
+    assert.equal(result.current.networkId, 'canton:local')
+    assert.equal(result.current.testedUrl, 'http://fresh/rpc')
   })
 })

From f6b5b51ad8aa58beaba586e01674bb61045607a1 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:50:09 -0300
Subject: [PATCH 081/121] feat(carpincho-wallet): add Configure RPC onboarding
 step with auto-tested connection gate

---
 .../src/views/onboarding/ConfigureRpcStep.tsx | 115 ++++++++++++++++++
 .../test/views/ConfigureRpcStep.test.tsx      |  74 +++++++++++
 2 files changed, 189 insertions(+)
 create mode 100644 carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
 create mode 100644 carpincho-wallet/test/views/ConfigureRpcStep.test.tsx

diff --git a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
new file mode 100644
index 00000000..8deb1323
--- /dev/null
+++ b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
@@ -0,0 +1,115 @@
+import { useEffect, useState } from 'react'
+import { PrimaryButton } from '@/components/ui/Button'
+import { Card } from '@/components/ui/Card'
+import { ALERT_CIRCLE_ICON, SPINNER_ICON } from '@/components/ui/icons'
+import { TextInput } from '@/components/ui/TextInput'
+import { useRuntimeConfig } from '@/config/useRuntimeConfig'
+import { useWalletServiceTest } from '@/hooks/useWalletServiceTest'
+import { cn } from '@/utils/cn'
+
+const DEBOUNCE_MS = 450
+const RETRY_MS = 3000
+
+export interface ConfigureRpcStepProps {
+  onConfirmed: () => void
+}
+
+export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.Element => {
+  const { config, saveConfig } = useRuntimeConfig()
+  const [url, setUrl] = useState(config.walletServiceRpcUrl)
+  const { state, networkId, reason, testedUrl, test } = useWalletServiceTest()
+
+  // Probe on mount and (debounced) whenever the URL changes.
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      void test(url)
+    }, DEBOUNCE_MS)
+    return () => window.clearTimeout(id)
+  }, [url, test])
+
+  // Auto-retry while unreachable so the step unblocks once wallet-service comes up.
+  useEffect(() => {
+    if (state !== 'unreachable') {
+      return undefined
+    }
+    const id = window.setInterval(() => {
+      void test(url)
+    }, RETRY_MS)
+    return () => window.clearInterval(id)
+  }, [state, url, test])
+
+  const canContinue = state === 'connected' && testedUrl === url
+  const network = networkId?.replace(/^canton:/, '')
+
+  const onContinue = (): void => {
+    saveConfig({ ...config, walletServiceRpcUrl: url })
+    onConfirmed()
+  }
+
+  return (
+    <Card>
+      <label htmlFor="rpc-url">Wallet-service RPC URL</label>
+      <TextInput
+        id="rpc-url"
+        type="url"
+        className="font-mono"
+        value={url}
+        onChange={(e) => setUrl(e.target.value)}
+        placeholder="http://localhost:3010/rpc"
+      />
+
+      <div
+        role="status"
+        className={cn(
+          'mt-3 flex items-center gap-2.5 rounded-md px-3 py-2.5 text-[0.85rem] font-semibold',
+          state === 'connected' && 'bg-success-soft text-success',
+          state === 'unreachable' && 'items-start bg-danger-soft text-danger',
+          state !== 'connected' && state !== 'unreachable' && 'bg-muted text-soft',
+        )}
+      >
+        {state === 'connected' && (
+          <>
+            <span
+              aria-hidden="true"
+              className="size-2 shrink-0 rounded-full bg-success"
+            />
+            <span>wallet-service reachable</span>
+            {network !== undefined && (
+              <span className="ml-auto rounded-full border border-success/40 bg-surface px-2 py-0.5 font-mono text-[0.76rem] text-success">
+                {network}
+              </span>
+            )}
+          </>
+        )}
+        {state === 'unreachable' && (
+          <>
+            <span className="shrink-0 [&>svg]:size-4">{ALERT_CIRCLE_ICON}</span>
+            <span className="flex flex-col gap-0.5">
+              <span>Can't reach wallet-service</span>
+              {reason !== undefined && (
+                <span className="text-[0.78rem] font-normal opacity-85">
+                  {reason} — retrying automatically…
+                </span>
+              )}
+            </span>
+          </>
+        )}
+        {state !== 'connected' && state !== 'unreachable' && (
+          <>
+            <span className="shrink-0 [&>svg]:size-4">{SPINNER_ICON}</span>
+            <span>Checking connection…</span>
+          </>
+        )}
+      </div>
+
+      <PrimaryButton
+        className="w-full mt-6"
+        data-testid="configure-rpc-continue"
+        disabled={!canContinue}
+        onClick={onContinue}
+      >
+        Continue
+      </PrimaryButton>
+    </Card>
+  )
+}
diff --git a/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
new file mode 100644
index 00000000..b750b55a
--- /dev/null
+++ b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
@@ -0,0 +1,74 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ConfigureRpcStep } from '@/views/onboarding/ConfigureRpcStep'
+
+const originalFetch = globalThis.fetch
+
+const respondConnected = (): void => {
+  globalThis.fetch = async () =>
+    new Response(
+      JSON.stringify({
+        result: {
+          connection: { isNetworkConnected: true },
+          network: { networkId: 'canton:local' },
+        },
+      }),
+      { status: 200 },
+    )
+}
+
+const continueButton = (): HTMLButtonElement =>
+  screen.getByTestId('configure-rpc-continue') as HTMLButtonElement
+
+describe('ConfigureRpcStep', () => {
+  afterEach(() => {
+    cleanup()
+    localStorage.clear()
+    globalThis.fetch = originalFetch
+  })
+
+  it('enables Continue once the wallet-service is reachable', async () => {
+    respondConnected()
+    render(<ConfigureRpcStep onConfirmed={() => undefined} />)
+    assert.equal(continueButton().disabled, true)
+    await waitFor(() => assert.equal(continueButton().disabled, false))
+    assert.ok(screen.getByText(/reachable/i))
+    assert.ok(screen.getByText('local'))
+  })
+
+  it('persists the URL and calls onConfirmed on Continue', async () => {
+    respondConnected()
+    let confirmed = false
+    render(
+      <ConfigureRpcStep
+        onConfirmed={() => {
+          confirmed = true
+        }}
+      />,
+    )
+    await waitFor(() => assert.equal(continueButton().disabled, false))
+    await userEvent.click(continueButton())
+    assert.equal(confirmed, true)
+    assert.match(localStorage.getItem('carpincho.runtime-config.v2') ?? '', /localhost:3010/)
+  })
+
+  it('keeps Continue disabled with a reason when unreachable and shows no Test button', async () => {
+    globalThis.fetch = async () => {
+      throw new Error('Failed to fetch')
+    }
+    render(<ConfigureRpcStep onConfirmed={() => undefined} />)
+    await waitFor(() => assert.ok(screen.getByText(/can.t reach wallet-service/i)))
+    assert.equal(continueButton().disabled, true)
+    assert.equal(screen.queryByRole('button', { name: /^test$/i }), null)
+  })
+
+  it('re-gates Continue when the URL is edited', async () => {
+    respondConnected()
+    render(<ConfigureRpcStep onConfirmed={() => undefined} />)
+    await waitFor(() => assert.equal(continueButton().disabled, false))
+    await userEvent.type(screen.getByLabelText(/wallet-service rpc url/i), 'x')
+    assert.equal(continueButton().disabled, true)
+  })
+})

From 6319c1f33dfd32dd9b6adde6bd1f11d11e967c2b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 09:53:33 -0300
Subject: [PATCH 082/121] fix(carpincho-wallet): resolve status-band flex
 alignment and tighten RPC step test

---
 carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx | 5 +++--
 carpincho-wallet/test/views/ConfigureRpcStep.test.tsx      | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
index 8deb1323..6eaa971c 100644
--- a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
+++ b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
@@ -61,9 +61,10 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
       <div
         role="status"
         className={cn(
-          'mt-3 flex items-center gap-2.5 rounded-md px-3 py-2.5 text-[0.85rem] font-semibold',
+          'mt-3 flex gap-2.5 rounded-md px-3 py-2.5 text-[0.85rem] font-semibold',
+          state === 'unreachable' ? 'items-start' : 'items-center',
           state === 'connected' && 'bg-success-soft text-success',
-          state === 'unreachable' && 'items-start bg-danger-soft text-danger',
+          state === 'unreachable' && 'bg-danger-soft text-danger',
           state !== 'connected' && state !== 'unreachable' && 'bg-muted text-soft',
         )}
       >
diff --git a/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
index b750b55a..b9dda5cd 100644
--- a/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
+++ b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
@@ -59,8 +59,10 @@ describe('ConfigureRpcStep', () => {
       throw new Error('Failed to fetch')
     }
     render(<ConfigureRpcStep onConfirmed={() => undefined} />)
-    await waitFor(() => assert.ok(screen.getByText(/can.t reach wallet-service/i)))
-    assert.equal(continueButton().disabled, true)
+    await waitFor(() => {
+      assert.ok(screen.getByText(/can.t reach wallet-service/i))
+      assert.equal(continueButton().disabled, true)
+    })
     assert.equal(screen.queryByRole('button', { name: /^test$/i }), null)
   })
 

From 2a1392fcf285e53e9e7667a80bc801d571c0ebba Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:02:12 -0300
Subject: [PATCH 083/121] refactor(carpincho-wallet): move password
 recommendations tooltip to the Password label

---
 .../src/components/NewPasswordFields.tsx      | 36 ++++++++++++++++++-
 .../components/PasswordStrengthIndicator.tsx  | 27 --------------
 2 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/carpincho-wallet/src/components/NewPasswordFields.tsx b/carpincho-wallet/src/components/NewPasswordFields.tsx
index e62a7fb2..80bd5af4 100644
--- a/carpincho-wallet/src/components/NewPasswordFields.tsx
+++ b/carpincho-wallet/src/components/NewPasswordFields.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useId, useRef } from 'react'
 import { PasswordStrengthIndicator } from '@/components/PasswordStrengthIndicator'
 import { PasswordInput } from '@/components/ui/PasswordInput'
+import { Tooltip } from '@/components/ui/Tooltip'
 import {
   isConfirmMismatch,
   isNewPasswordPairValid,
@@ -50,7 +51,40 @@ export const NewPasswordFields = ({
     <>
       <div className="flex flex-col gap-1">
         <div>
-          {visible && <label htmlFor={passwordId}>{passwordLabel}</label>}
+          {visible && (
+            <div className="mb-[0.55rem] flex items-center gap-1.5">
+              <label
+                className="mb-0"
+                htmlFor={passwordId}
+              >
+                {passwordLabel}
+              </label>
+              <Tooltip
+                label="Password recommendations"
+                content={
+                  <div className="flex flex-col gap-2">
+                    <p>
+                      Aim for <strong>12+ characters</strong>. Length is the biggest factor.
+                    </p>
+                    <p>
+                      A string of unrelated words (e.g.{' '}
+                      <span className="font-mono">correctly-growing-a-horse-battery</span>) is
+                      easier to remember and <strong>harder to crack</strong> than short complex
+                      passwords.
+                    </p>
+                    <p>
+                      Avoid names, dates, dictionary words, and common substitutions (pa$$word,
+                      p@ssw0rd).
+                    </p>
+                    <p>
+                      The vault is encrypted locally: a stolen vault file can be attacked offline
+                      without rate limits. Password strength is important.
+                    </p>
+                  </div>
+                }
+              />
+            </div>
+          )}
           <PasswordInput
             aria-describedby={strengthId}
             aria-label={visible ? undefined : passwordLabel}
diff --git a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
index fb8a7007..bd4ee449 100644
--- a/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
+++ b/carpincho-wallet/src/components/PasswordStrengthIndicator.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@/components/ui/Tooltip'
 import { scorePassword } from '@/vault/passwordStrength'
 
 type Tier = { segmentColor: string; labelColor: string; label: string }
@@ -45,32 +44,6 @@ export const PasswordStrengthIndicator = ({ password, id }: Props): JSX.Element
           ))}
         </div>
       </div>
-
-      <p className="flex items-center gap-1.5 text-[0.8rem] text-soft">
-        More info
-        <Tooltip
-          label="Password recommendations"
-          content={
-            <div className="flex flex-col gap-2">
-              <p>
-                Aim for <strong>12+ characters</strong>. Length is the biggest factor.
-              </p>
-              <p>
-                A string of unrelated words (e.g.{' '}
-                <span className="font-mono">correctly-growing-a-horse-battery</span>) is easier to
-                remember and <strong>harder to crack</strong> than short complex passwords.
-              </p>
-              <p>
-                Avoid names, dates, dictionary words, and common substitutions (pa$$word, p@ssw0rd).
-              </p>
-              <p>
-                The vault is encrypted locally: a stolen vault file can be attacked offline without
-                rate limits. Password strength is important.
-              </p>
-            </div>
-          }
-        />
-      </p>
     </div>
   )
 }

From 7cff79a756625cdd0a9bf936df4e88161efc231c Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:10:42 -0300
Subject: [PATCH 084/121] refactor(carpincho-wallet): drop the connection
 footer from the account onboarding step

---
 .../views/onboarding/CreateFirstAccount.tsx   | 42 ++++---------------
 .../test/views/CreateFirstAccount.test.tsx    | 32 ++++++++++++++
 .../test/views/OnboardingFlow.test.tsx        | 18 +++-----
 3 files changed, 44 insertions(+), 48 deletions(-)
 create mode 100644 carpincho-wallet/test/views/CreateFirstAccount.test.tsx

diff --git a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
index 62b8a4c8..3211874d 100644
--- a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
+++ b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
@@ -1,38 +1,10 @@
-import { useState } from 'react'
-import { ConnectionFooter, type DappFooterStatus } from '@/components/ConnectionFooter'
 import { CreateAccountForm } from '@/components/CreateAccountForm'
 import { Card } from '@/components/ui/Card'
-import { Sheet } from '@/components/ui/Sheet'
-import { useWalletServiceStatus } from '@/hooks/useWalletServiceStatus'
-import { ConnectionSettingsView } from '@/views/ConnectionSettingsView'
 
-const NO_DAPP: DappFooterStatus = { kind: 'none' }
-
-// Renders first-account creation with the same wallet-service controls available after setup.
-export const CreateFirstAccount = (): JSX.Element => {
-  const [settingsOpen, setSettingsOpen] = useState(false)
-  const walletService = useWalletServiceStatus()
-
-  return (
-    <div className="flex flex-col gap-4">
-      <Card>
-        <CreateAccountForm showIntro />
-      </Card>
-
-      <Sheet
-        open={settingsOpen}
-        onOpenChange={setSettingsOpen}
-        title="Connection"
-        description="Configure wallet-service URL and network."
-      >
-        <ConnectionSettingsView />
-      </Sheet>
-
-      <ConnectionFooter
-        walletService={walletService}
-        dapp={NO_DAPP}
-        onOpenSettings={() => setSettingsOpen(true)}
-      />
-    </div>
-  )
-}
+// First-account creation. Connection lives in its own onboarding step now, so this is
+// just the account form.
+export const CreateFirstAccount = (): JSX.Element => (
+  <Card>
+    <CreateAccountForm showIntro />
+  </Card>
+)
diff --git a/carpincho-wallet/test/views/CreateFirstAccount.test.tsx b/carpincho-wallet/test/views/CreateFirstAccount.test.tsx
new file mode 100644
index 00000000..81a7d7f4
--- /dev/null
+++ b/carpincho-wallet/test/views/CreateFirstAccount.test.tsx
@@ -0,0 +1,32 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+import { CreateFirstAccount } from '@/views/onboarding/CreateFirstAccount'
+
+const vaultStub = { addAccount: async () => undefined } as unknown as VaultContextValue
+
+const renderStep = (): void => {
+  render(
+    <TooltipProvider>
+      <VaultContext.Provider value={vaultStub}>
+        <CreateFirstAccount />
+      </VaultContext.Provider>
+    </TooltipProvider>,
+  )
+}
+
+describe('CreateFirstAccount', () => {
+  afterEach(() => cleanup())
+
+  it('renders only the account form', () => {
+    renderStep()
+    assert.ok(screen.getByTestId('add-account-hint-input'))
+  })
+
+  it('does not render the connection footer or its settings control', () => {
+    renderStep()
+    assert.equal(screen.queryByRole('button', { name: 'Connection settings' }), null)
+  })
+})
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index 0da21162..e6ee10de 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -1,7 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { cleanup, render, screen } from '@testing-library/react'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 import { OnboardingFlow } from '@/views/onboarding/OnboardingFlow'
@@ -98,20 +97,13 @@ describe('OnboardingFlow', () => {
     assert.equal(screen.queryByTestId('add-account-cancel'), null)
   })
 
-  it('opens wallet-service settings from the account step footer', async () => {
-    // Scenario: after the password step creates the vault, the user may still need to point
-    // Carpincho at a different wallet-service before creating the first Canton party.
+  it('does not render the connection footer on the account step', () => {
+    // Connection config moved to its own onboarding step, so the account step is just the form.
     installWalletServiceStatus()
 
-    // Render onboarding directly at step 2: the vault exists, but no account has been created yet.
-    const user = userEvent.setup()
     renderFlow({ hasVault: true, accounts: [] })
 
-    // The existing footer should report the configured wallet-service status on this step.
-    await waitFor(() => assert.ok(screen.getByText('local')))
-
-    // Opening the footer settings should show the same wallet-service URL field used after setup.
-    await user.click(screen.getByRole('button', { name: 'Connection settings' }))
-    assert.ok(screen.getByLabelText('Wallet-service RPC URL'))
+    // The "Connection settings" button should not be present since the footer is gone.
+    assert.equal(screen.queryByRole('button', { name: 'Connection settings' }), null)
   })
 })

From ba55e36f4e516c541fc725c99fa47cbc4023cfc6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:17:00 -0300
Subject: [PATCH 085/121] feat(carpincho-wallet): make first-run onboarding a
 three-step vault/RPC/account flow

---
 .../src/views/onboarding/OnboardingFlow.tsx   | 12 +++--
 .../test/views/OnboardingFlow.test.tsx        | 48 ++++++++++---------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/carpincho-wallet/src/views/onboarding/OnboardingFlow.tsx b/carpincho-wallet/src/views/onboarding/OnboardingFlow.tsx
index 2fddd9c1..a5690b83 100644
--- a/carpincho-wallet/src/views/onboarding/OnboardingFlow.tsx
+++ b/carpincho-wallet/src/views/onboarding/OnboardingFlow.tsx
@@ -1,14 +1,18 @@
+import { useState } from 'react'
 import { Stepper } from '@/components/ui/Stepper'
 import { WelcomeHero } from '@/components/WelcomeHero'
 import { useVault } from '@/vault/useVault'
+import { ConfigureRpcStep } from '@/views/onboarding/ConfigureRpcStep'
 import { CreateFirstAccount } from '@/views/onboarding/CreateFirstAccount'
 import { CreateVault } from '@/views/onboarding/CreateVault'
 
-const ONBOARDING_STEPS = ['Create Vault', 'Create Account']
+const ONBOARDING_STEPS = ['Vault', 'RPC', 'Account']
 
 export const OnboardingFlow = (): JSX.Element => {
   const v = useVault()
-  const step = v.hasVault ? 2 : 1
+  // In-memory gate: the RPC step re-shows on reload (no persisted onboarding state).
+  const [rpcConfirmed, setRpcConfirmed] = useState(false)
+  const step = !v.hasVault ? 1 : !rpcConfirmed ? 2 : 3
 
   return (
     <div>
@@ -24,7 +28,9 @@ export const OnboardingFlow = (): JSX.Element => {
         key={step}
         className="animate-slide-up-and-fade [animation-fill-mode:backwards]"
       >
-        {step === 1 ? <CreateVault /> : <CreateFirstAccount />}
+        {step === 1 && <CreateVault />}
+        {step === 2 && <ConfigureRpcStep onConfirmed={() => setRpcConfirmed(true)} />}
+        {step === 3 && <CreateFirstAccount />}
       </div>
     </div>
   )
diff --git a/carpincho-wallet/test/views/OnboardingFlow.test.tsx b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
index e6ee10de..eb620479 100644
--- a/carpincho-wallet/test/views/OnboardingFlow.test.tsx
+++ b/carpincho-wallet/test/views/OnboardingFlow.test.tsx
@@ -1,6 +1,7 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 import { OnboardingFlow } from '@/views/onboarding/OnboardingFlow'
@@ -30,8 +31,7 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
+    exportPrivateKey: () => '',
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
@@ -51,8 +51,8 @@ const renderFlow = (overrides: Partial<VaultContextValue> = {}): void => {
   )
 }
 
-// Installs a healthy wallet-service status response so onboarding can render the real footer state.
-const installWalletServiceStatus = (): void => {
+// Configure RPC auto-tests on entry; this keeps that probe healthy and deterministic.
+const installHealthyWalletService = (): void => {
   globalThis.fetch = async () =>
     new Response(
       JSON.stringify({
@@ -72,38 +72,40 @@ describe('OnboardingFlow', () => {
     globalThis.fetch = originalFetch
   })
 
-  it('shows step 1 (create vault) active when there is no vault', () => {
+  it('shows step 1 (Vault) active when there is no vault', () => {
     renderFlow({ hasVault: false })
     assert.ok(screen.getByRole('button', { name: /^create$/i }))
     assert.equal(screen.getByTestId('step-1').getAttribute('aria-current'), 'step')
     assert.equal(screen.getByTestId('step-2').getAttribute('data-state'), 'upcoming')
   })
 
-  it('shows step 2 (create account) active with step 1 complete when the vault has no accounts', () => {
-    // Step 2 owns the live footer, so status polling is isolated from the test environment.
-    installWalletServiceStatus()
-
+  it('shows step 2 (Configure RPC) when the vault exists but no account, with step 1 complete', () => {
+    installHealthyWalletService()
     renderFlow({ hasVault: true, accounts: [] })
-    assert.ok(screen.getByTestId('add-account-hint-input'))
+    assert.ok(screen.getByLabelText(/wallet-service rpc url/i))
     assert.equal(screen.getByTestId('step-1').getAttribute('data-state'), 'complete')
     assert.equal(screen.getByTestId('step-2').getAttribute('aria-current'), 'step')
   })
 
-  it('does not render a Cancel control on the account step', () => {
-    // The connection footer is present, but the account form should remain a one-action setup flow.
-    installWalletServiceStatus()
-
+  it('does not skip the RPC step to the account step on reload (vault exists, no account)', () => {
+    installHealthyWalletService()
     renderFlow({ hasVault: true, accounts: [] })
-    assert.equal(screen.queryByTestId('add-account-cancel'), null)
+    assert.ok(screen.getByLabelText(/wallet-service rpc url/i))
+    assert.equal(screen.queryByTestId('add-account-hint-input'), null)
   })
 
-  it('does not render the connection footer on the account step', () => {
-    // Connection config moved to its own onboarding step, so the account step is just the form.
-    installWalletServiceStatus()
-
+  it('advances to step 3 (Create Account) after the RPC connection is confirmed', async () => {
+    installHealthyWalletService()
     renderFlow({ hasVault: true, accounts: [] })
-
-    // The "Connection settings" button should not be present since the footer is gone.
-    assert.equal(screen.queryByRole('button', { name: 'Connection settings' }), null)
+    await waitFor(() =>
+      assert.equal(
+        (screen.getByTestId('configure-rpc-continue') as HTMLButtonElement).disabled,
+        false,
+      ),
+    )
+    await userEvent.click(screen.getByTestId('configure-rpc-continue'))
+    await waitFor(() => assert.ok(screen.getByTestId('add-account-hint-input')))
+    assert.equal(screen.getByTestId('step-3').getAttribute('aria-current'), 'step')
+    assert.equal(screen.getByTestId('step-2').getAttribute('data-state'), 'complete')
   })
 })

From 9d7ad7a2273178d0773d643c270380229e247fd2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:36:18 -0300
Subject: [PATCH 086/121] refactor(carpincho-wallet): use useId for the
 Configure RPC field id

---
 carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
index 6eaa971c..a8ba5bab 100644
--- a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
+++ b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useId, useState } from 'react'
 import { PrimaryButton } from '@/components/ui/Button'
 import { Card } from '@/components/ui/Card'
 import { ALERT_CIRCLE_ICON, SPINNER_ICON } from '@/components/ui/icons'
@@ -17,6 +17,7 @@ export interface ConfigureRpcStepProps {
 export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.Element => {
   const { config, saveConfig } = useRuntimeConfig()
   const [url, setUrl] = useState(config.walletServiceRpcUrl)
+  const fieldId = useId()
   const { state, networkId, reason, testedUrl, test } = useWalletServiceTest()
 
   // Probe on mount and (debounced) whenever the URL changes.
@@ -48,9 +49,9 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
 
   return (
     <Card>
-      <label htmlFor="rpc-url">Wallet-service RPC URL</label>
+      <label htmlFor={fieldId}>Wallet-service RPC URL</label>
       <TextInput
-        id="rpc-url"
+        id={fieldId}
         type="url"
         className="font-mono"
         value={url}

From 328e6f57caf7370e3b76ff54beac502dcfba30c1 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:37:41 -0300
Subject: [PATCH 087/121] fix(carpincho-wallet): restore password
 recommendations tooltip in change-password form

---
 .../src/components/VaultPanel.tsx             | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultPanel.tsx b/carpincho-wallet/src/components/VaultPanel.tsx
index 7e7c5423..4a099d2e 100644
--- a/carpincho-wallet/src/components/VaultPanel.tsx
+++ b/carpincho-wallet/src/components/VaultPanel.tsx
@@ -1,4 +1,4 @@
-import { type FormEvent, useState } from 'react'
+import { type FormEvent, useId, useState } from 'react'
 import { NewPasswordFields } from '@/components/NewPasswordFields'
 import { PrimaryButton } from '@/components/ui/Button'
 import { OptionList } from '@/components/ui/OptionList'
@@ -34,6 +34,7 @@ export const PasswordForm = (): JSX.Element => {
   const v = useVault()
   const [state, setState] = useState<PasswordState>(initialState)
   const [busy, setBusy] = useState(false)
+  const currentId = useId()
 
   const canSubmit = state.current.trim() !== '' && state.valid
 
@@ -58,18 +59,21 @@ export const PasswordForm = (): JSX.Element => {
       onSubmit={onSubmit}
       className="flex flex-col gap-3"
     >
-      <PasswordInput
-        aria-label="Current password"
-        aria-errormessage={state.error !== null ? 'change-password-error' : undefined}
-        autoComplete="current-password"
-        placeholder="Current password"
-        error={state.error !== null}
-        value={state.current}
-        onChange={(e) => setState((s) => ({ ...s, current: e.target.value, error: null }))}
-      />
+      <div>
+        <label htmlFor={currentId}>Current password</label>
+        <PasswordInput
+          id={currentId}
+          aria-errormessage={state.error !== null ? 'change-password-error' : undefined}
+          autoComplete="current-password"
+          error={state.error !== null}
+          value={state.current}
+          onChange={(e) => setState((s) => ({ ...s, current: e.target.value, error: null }))}
+        />
+      </div>
       <hr className="border-border" />
       <NewPasswordFields
         confirm={state.confirm}
+        labelMode="visible"
         onConfirmChange={(value) => setState((s) => ({ ...s, confirm: value }))}
         onPasswordChange={(value) => setState((s) => ({ ...s, next: value }))}
         onValidityChange={(valid) => setState((s) => ({ ...s, valid }))}

From 8b3c5794533564bedaf031e839342e1da45804f7 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 10:56:17 -0300
Subject: [PATCH 088/121] test(carpincho-wallet): cover RPC auto-recovery and
 stabilize password-strength timeout

---
 carpincho-wallet/src/App.tsx                  |  4 ++--
 .../test/vault/passwordAcceptance.test.tsx    |  3 ++-
 .../test/views/ConfigureRpcStep.test.tsx      | 23 +++++++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/App.tsx b/carpincho-wallet/src/App.tsx
index 17c695f9..dd85db4c 100644
--- a/carpincho-wallet/src/App.tsx
+++ b/carpincho-wallet/src/App.tsx
@@ -18,8 +18,8 @@ const queryClient = createQueryClient()
 
 export type ShellView = 'loading' | 'unlock' | 'onboarding' | 'home'
 
-// First-run routing; order matters. OnboardingFlow picks step 1 (no vault) vs step 2
-// (unlocked vault, no account), so both onboarding cases collapse to one branch.
+// First-run routing; order matters. Both onboarding cases (no vault, or unlocked vault
+// with no account) collapse to one branch; OnboardingFlow runs the vault/RPC/account steps.
 export const selectShellView = (
   v: Pick<VaultContextValue, 'isLoading' | 'hasVault' | 'isLocked' | 'accounts'>,
 ): ShellView => {
diff --git a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
index 7f1b6a0e..adc102a2 100644
--- a/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
+++ b/carpincho-wallet/test/vault/passwordAcceptance.test.tsx
@@ -13,7 +13,8 @@ afterEach(() => {
 
 test('accepts a short password once it meets the strength score', async () => {
   const { getByTestId } = render(<Probe />)
-  await waitFor(() => assert.equal(getByTestId('ready').textContent, 'ready'))
+  // Lazy zxcvbn dictionary load can exceed waitFor's 1s default under full-suite load.
+  await waitFor(() => assert.equal(getByTestId('ready').textContent, 'ready'), { timeout: 5000 })
   // 8 chars (under the former 9-char floor) but scores 1, the default minimum.
   assert.equal(isPasswordAcceptable('monkey99'), true)
 })
diff --git a/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
index b9dda5cd..5bdb89d6 100644
--- a/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
+++ b/carpincho-wallet/test/views/ConfigureRpcStep.test.tsx
@@ -73,4 +73,27 @@ describe('ConfigureRpcStep', () => {
     await userEvent.type(screen.getByLabelText(/wallet-service rpc url/i), 'x')
     assert.equal(continueButton().disabled, true)
   })
+
+  it('auto-recovers and enables Continue once wallet-service comes up', async () => {
+    let reachable = false
+    globalThis.fetch = async () => {
+      if (!reachable) throw new Error('Failed to fetch')
+      return new Response(
+        JSON.stringify({
+          result: {
+            connection: { isNetworkConnected: true },
+            network: { networkId: 'canton:local' },
+          },
+        }),
+        { status: 200 },
+      )
+    }
+    render(<ConfigureRpcStep onConfirmed={() => undefined} />)
+    await waitFor(() => assert.ok(screen.getByText(/can.t reach wallet-service/i)), {
+      timeout: 2000,
+    })
+    assert.equal(continueButton().disabled, true)
+    reachable = true
+    await waitFor(() => assert.equal(continueButton().disabled, false), { timeout: 5000 })
+  })
 })

From 60ed1929ea5f77aea740804d234e882af207405e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:03:03 -0300
Subject: [PATCH 089/121] refactor(carpincho-wallet): simplify RPC status band
 and dedupe display/tooltip code

---
 .../src/components/ConnectionFooter.tsx       |  3 +-
 .../src/components/NewPasswordFields.tsx      | 40 +++++++++----------
 carpincho-wallet/src/utils/network.ts         |  3 ++
 .../src/views/onboarding/ConfigureRpcStep.tsx | 23 +++++++----
 4 files changed, 39 insertions(+), 30 deletions(-)
 create mode 100644 carpincho-wallet/src/utils/network.ts

diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index c308b211..f029005d 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -2,6 +2,7 @@ import * as Avatar from '@radix-ui/react-avatar'
 import { PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
 import { CHEVRON_DOWN_ICON, DISCONNECT_ICON, GLOBE_ICON } from '@/components/ui/icons'
 import { cn } from '@/utils/cn'
+import { displayNetworkId } from '@/utils/network'
 
 export interface WalletServiceFooterStatus {
   connected: boolean
@@ -55,7 +56,7 @@ export const ConnectionFooter = ({
   onOpenSettings,
 }: ConnectionFooterProps): JSX.Element => {
   const networkLabel = walletService.connected
-    ? (walletService.networkId?.replace(/^canton:/, '') ?? 'unknown')
+    ? (displayNetworkId(walletService.networkId) ?? 'unknown')
     : 'Offline'
   const site = dapp.kind === 'none' ? undefined : dapp
   const connected = dapp.kind === 'connected'
diff --git a/carpincho-wallet/src/components/NewPasswordFields.tsx b/carpincho-wallet/src/components/NewPasswordFields.tsx
index 80bd5af4..dd0768f0 100644
--- a/carpincho-wallet/src/components/NewPasswordFields.tsx
+++ b/carpincho-wallet/src/components/NewPasswordFields.tsx
@@ -8,6 +8,24 @@ import {
   usePasswordStrengthReady,
 } from '@/vault/passwordStrength'
 
+const PASSWORD_RECOMMENDATIONS = (
+  <div className="flex flex-col gap-2">
+    <p>
+      Aim for <strong>12+ characters</strong>. Length is the biggest factor.
+    </p>
+    <p>
+      A string of unrelated words (e.g.{' '}
+      <span className="font-mono">correctly-growing-a-horse-battery</span>) is easier to remember
+      and <strong>harder to crack</strong> than short complex passwords.
+    </p>
+    <p>Avoid names, dates, dictionary words, and common substitutions (pa$$word, p@ssw0rd).</p>
+    <p>
+      The vault is encrypted locally: a stolen vault file can be attacked offline without rate
+      limits. Password strength is important.
+    </p>
+  </div>
+)
+
 type Props = {
   password: string
   confirm: string
@@ -61,27 +79,7 @@ export const NewPasswordFields = ({
               </label>
               <Tooltip
                 label="Password recommendations"
-                content={
-                  <div className="flex flex-col gap-2">
-                    <p>
-                      Aim for <strong>12+ characters</strong>. Length is the biggest factor.
-                    </p>
-                    <p>
-                      A string of unrelated words (e.g.{' '}
-                      <span className="font-mono">correctly-growing-a-horse-battery</span>) is
-                      easier to remember and <strong>harder to crack</strong> than short complex
-                      passwords.
-                    </p>
-                    <p>
-                      Avoid names, dates, dictionary words, and common substitutions (pa$$word,
-                      p@ssw0rd).
-                    </p>
-                    <p>
-                      The vault is encrypted locally: a stolen vault file can be attacked offline
-                      without rate limits. Password strength is important.
-                    </p>
-                  </div>
-                }
+                content={PASSWORD_RECOMMENDATIONS}
               />
             </div>
           )}
diff --git a/carpincho-wallet/src/utils/network.ts b/carpincho-wallet/src/utils/network.ts
new file mode 100644
index 00000000..c5713095
--- /dev/null
+++ b/carpincho-wallet/src/utils/network.ts
@@ -0,0 +1,3 @@
+// Strips the `canton:` synchronizer prefix for display.
+export const displayNetworkId = (networkId?: string): string | undefined =>
+  networkId?.replace(/^canton:/, '')
diff --git a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
index a8ba5bab..d400901e 100644
--- a/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
+++ b/carpincho-wallet/src/views/onboarding/ConfigureRpcStep.tsx
@@ -6,10 +6,18 @@ import { TextInput } from '@/components/ui/TextInput'
 import { useRuntimeConfig } from '@/config/useRuntimeConfig'
 import { useWalletServiceTest } from '@/hooks/useWalletServiceTest'
 import { cn } from '@/utils/cn'
+import { displayNetworkId } from '@/utils/network'
 
 const DEBOUNCE_MS = 450
 const RETRY_MS = 3000
 
+// idle/testing collapse to one "pending" tone for the status band.
+const STATUS_BAND_CLASS = {
+  connected: 'items-center bg-success-soft text-success',
+  unreachable: 'items-start bg-danger-soft text-danger',
+  pending: 'items-center bg-muted text-soft',
+} as const
+
 export interface ConfigureRpcStepProps {
   onConfirmed: () => void
 }
@@ -40,7 +48,9 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
   }, [state, url, test])
 
   const canContinue = state === 'connected' && testedUrl === url
-  const network = networkId?.replace(/^canton:/, '')
+  const network = displayNetworkId(networkId)
+  const tone =
+    state === 'connected' ? 'connected' : state === 'unreachable' ? 'unreachable' : 'pending'
 
   const onContinue = (): void => {
     saveConfig({ ...config, walletServiceRpcUrl: url })
@@ -63,13 +73,10 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
         role="status"
         className={cn(
           'mt-3 flex gap-2.5 rounded-md px-3 py-2.5 text-[0.85rem] font-semibold',
-          state === 'unreachable' ? 'items-start' : 'items-center',
-          state === 'connected' && 'bg-success-soft text-success',
-          state === 'unreachable' && 'bg-danger-soft text-danger',
-          state !== 'connected' && state !== 'unreachable' && 'bg-muted text-soft',
+          STATUS_BAND_CLASS[tone],
         )}
       >
-        {state === 'connected' && (
+        {tone === 'connected' && (
           <>
             <span
               aria-hidden="true"
@@ -83,7 +90,7 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
             )}
           </>
         )}
-        {state === 'unreachable' && (
+        {tone === 'unreachable' && (
           <>
             <span className="shrink-0 [&>svg]:size-4">{ALERT_CIRCLE_ICON}</span>
             <span className="flex flex-col gap-0.5">
@@ -96,7 +103,7 @@ export const ConfigureRpcStep = ({ onConfirmed }: ConfigureRpcStepProps): JSX.El
             </span>
           </>
         )}
-        {state !== 'connected' && state !== 'unreachable' && (
+        {tone === 'pending' && (
           <>
             <span className="shrink-0 [&>svg]:size-4">{SPINNER_ICON}</span>
             <span>Checking connection…</span>

From a6dbc724c36726c566e99b1884dd93e238504291 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:06:35 -0300
Subject: [PATCH 090/121] docs(carpincho-wallet): sync architecture.md with
 three-step onboarding flow

---
 carpincho-wallet/architecture.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 57276d69..4505a858 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -57,8 +57,8 @@ src/
   extension/        Chrome extension scripts: background, content script, provider injection
   provider/         CIP-0103 wallet provider — request dispatcher and method handlers
   vault/            Encrypted local vault: PBKDF2 key derivation, AES-GCM storage, React context
-  utils/            Pure helpers (account formatting, clipboard, classnames cn, JSON pretty-print, file download)
-  views/            Top-level UI views (onboarding/* two-step wizard, Unlock, Home,
+  utils/            Pure helpers (account formatting, clipboard, classnames cn, JSON pretty-print, file download, network-id display)
+  views/            Top-level UI views (onboarding/* three-step wizard (vault → RPC → first account), Unlock, Home,
                     ConnectionSettings) plus home/* — the extracted HomeView logic
                     (pending-actions state, extension/provider request handling,
                     WalletConnect lifecycle, transaction summarising)
@@ -212,7 +212,7 @@ Three providers wrap the app. `ThemeProvider` is mounted outermost (in `src/main
       </TooltipProvider>
 ```
 
-There is no router. `Shell` picks one view from `useVault()` via the pure `selectShellView` helper in `src/App.tsx`, branching on `hasVault`, `isLocked`, and `accounts.length`: no vault → `OnboardingFlow` (step 1, create vault); unlocked vault with no account yet → `OnboardingFlow` (step 2, create first account); locked vault → `UnlockView`; unlocked vault with at least one account → `HomeView`. While `useVault()` reports `isLoading`, `Shell` renders a centred spinner instead of any view so the session-restore decision lands in one paint and the Unlock screen never flashes.
+There is no router. `Shell` picks one view from `useVault()` via the pure `selectShellView` helper in `src/App.tsx`, branching on `hasVault`, `isLocked`, and `accounts.length`: no vault → `OnboardingFlow` starting at the create-vault step; unlocked vault with no account yet → `OnboardingFlow` which runs the Configure RPC step (gated on a wallet-service probe) then the create-first-account step; locked vault → `UnlockView`; unlocked vault with at least one account → `HomeView`. While `useVault()` reports `isLoading`, `Shell` renders a centred spinner instead of any view so the session-restore decision lands in one paint and the Unlock screen never flashes.
 
 The Menu drawer lives in `src/components/menu/`: `MenuSheet.tsx` is the navigation orchestrator (wraps the shared `Sheet` primitive with `side="right"`, opening as a 400px-wide top-aligned panel clamped by `100vw` that slides in via `animate-sheet-slide-right`), `screens.ts` holds the `Screen` union plus the `SCREENS` metadata map and the `MENU_LISTS` row data for the navigation-list screens, `MenuList.tsx` renders those rows, and `ThemeMenu.tsx` is the Theme leaf. It manages internal screen state (`root` → `theme` | `vault`; `vault` → `password` | `auto-lock` | `export-vault` | `import-vault`); each in-drawer transition uses `animate-slide-in-right` (forward) or `animate-slide-in-left` (back). Navigation-list screens are data-driven via `MENU_LISTS`; leaf screens (`theme`, `password`, `auto-lock`, `export-vault`, `import-vault`) render a component. Every new option must be added as another `Screen` with an entry in the `SCREENS` map (`title`, `description`, `parent`); accordion-style expansion inside a screen is disallowed.
 

From 7c42ca158438bdfb6bafb264627aa4c0befc6b3f Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:17 -0300
Subject: [PATCH 091/121] refactor(carpincho-wallet): drop the brand-gradient
 fill from the dApp footer icon

---
 carpincho-wallet/src/components/ConnectionFooter.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index f029005d..a5e194af 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -30,7 +30,7 @@ const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element
     return <span className={cn(TILE, 'bg-muted text-soft [&>svg]:size-[15px]')}>{GLOBE_ICON}</span>
   }
   return (
-    <Avatar.Root className={cn(TILE, 'bg-[image:var(--bg-gradient-brand)]')}>
+    <Avatar.Root className={cn(TILE, 'bg-muted')}>
       {icon !== undefined && (
         <Avatar.Image
           src={icon}
@@ -40,7 +40,7 @@ const DappIcon = ({ host, icon }: { host?: string; icon?: string }): JSX.Element
       )}
       <Avatar.Fallback
         delayMs={icon === undefined ? undefined : 200}
-        className="text-[0.8rem] font-bold text-white"
+        className="text-[0.8rem] font-bold text-muted-foreground"
       >
         {host.charAt(0).toUpperCase()}
       </Avatar.Fallback>

From 53a7589684bf1e0becb05f81f6edda7e17b01111 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:17 -0300
Subject: [PATCH 092/121] refactor(carpincho-wallet): trim the Upload DAR modal
 label and button text

---
 .../src/components/DarUploadPanel.tsx         | 29 ++++++++-----------
 .../test/components/DarUploadPanel.test.tsx   |  2 +-
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index f03c34a5..378830c9 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -41,22 +41,17 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
 
   return (
     <section className="flex flex-col gap-4">
-      <div className="flex flex-col gap-2">
-        <span className="text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground">
-          DAR file
-        </span>
-        <FileDropInput
-          id="dar-file"
-          accept=".dar,application/octet-stream"
-          ariaLabel="DAR file"
-          prompt="Drop a .dar file or click to choose."
-          fileName={file?.name ?? null}
-          onSelect={(selected) => {
-            setUploadedFileName(undefined)
-            setFile(selected ?? undefined)
-          }}
-        />
-      </div>
+      <FileDropInput
+        id="dar-file"
+        accept=".dar,application/octet-stream"
+        ariaLabel="DAR file"
+        prompt="Drop a .dar file or click to choose."
+        fileName={file?.name ?? null}
+        onSelect={(selected) => {
+          setUploadedFileName(undefined)
+          setFile(selected ?? undefined)
+        }}
+      />
       <PrimaryButton
         className="w-full"
         disabled={file === undefined || uploading}
@@ -64,7 +59,7 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
           void onUpload()
         }}
       >
-        {uploading ? 'Uploading...' : 'Upload DAR'}
+        {uploading ? 'Uploading...' : 'Upload'}
       </PrimaryButton>
       {uploadedFileName === undefined ? null : (
         <p
diff --git a/carpincho-wallet/test/components/DarUploadPanel.test.tsx b/carpincho-wallet/test/components/DarUploadPanel.test.tsx
index 4e0c427f..96d6e2e7 100644
--- a/carpincho-wallet/test/components/DarUploadPanel.test.tsx
+++ b/carpincho-wallet/test/components/DarUploadPanel.test.tsx
@@ -30,7 +30,7 @@ describe('DarUploadPanel', () => {
     )
 
     await userEvent.upload(screen.getByLabelText('DAR file'), selectedFile)
-    await userEvent.click(screen.getByRole('button', { name: 'Upload DAR' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Upload' }))
 
     // The exact selected file object is passed through, preserving binary contents and filename.
     assert.equal(uploaded, selectedFile)

From 5a27c09d66f1b112588b28b66abb1cc96d4682f3 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:18 -0300
Subject: [PATCH 093/121] refactor(carpincho-wallet): shorten the Create and
 Exercise action button labels

---
 carpincho-wallet/src/components/utils/CreateContractUtil.tsx  | 2 +-
 carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx  | 2 +-
 carpincho-wallet/test/components/UtilsPanel.test.tsx          | 2 +-
 .../test/components/utils/CreateContractUtil.test.tsx         | 4 ++--
 .../test/components/utils/ExerciseChoiceUtil.test.tsx         | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
index 9da0a85e..7abdb5fc 100644
--- a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
+++ b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
@@ -83,7 +83,7 @@ export const CreateContractUtil = ({
         className="w-full"
         disabled={!canSubmit}
       >
-        {busy ? 'Creating...' : 'Create contract'}
+        {busy ? 'Creating...' : 'Create'}
       </PrimaryButton>
     </form>
   )
diff --git a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
index 8c819c6f..ebd024bd 100644
--- a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
@@ -118,7 +118,7 @@ export const ExerciseChoiceUtil = ({
         className="w-full"
         disabled={!canSubmit}
       >
-        {busy ? 'Exercising...' : 'Exercise choice'}
+        {busy ? 'Exercising...' : 'Exercise'}
       </PrimaryButton>
     </form>
   )
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 6b0f4c9b..64b6d387 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -87,7 +87,7 @@ describe('UtilsPanel', () => {
     fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
       target: { value: JSON.stringify({ admin: 'alice::party' }) },
     })
-    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Create' }))
     await waitFor(() => assert.equal(createCalls.length, 1))
 
     await userEvent.click(screen.getByRole('button', { name: 'Close' }))
diff --git a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
index 715c77fc..a0423228 100644
--- a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
@@ -75,7 +75,7 @@ describe('CreateContractUtil', () => {
     fireEvent.change(screen.getByLabelText('Create arguments JSON'), {
       target: { value: JSON.stringify({ admin: 'alice::party' }) },
     })
-    await userEvent.click(screen.getByRole('button', { name: 'Create contract' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Create' }))
 
     await waitFor(() => assert.equal(calls.length, 1))
     assert.equal(calls[0]?.account.partyId, 'alice::party')
@@ -92,7 +92,7 @@ describe('CreateContractUtil', () => {
       target: { value: '{ broken' },
     })
     assert.equal(
-      (screen.getByRole('button', { name: 'Create contract' }) as HTMLButtonElement).disabled,
+      (screen.getByRole('button', { name: 'Create' }) as HTMLButtonElement).disabled,
       true,
     )
   })
diff --git a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
index cb0c228f..e47a52ad 100644
--- a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
@@ -77,7 +77,7 @@ describe('ExerciseChoiceUtil', () => {
     fireEvent.change(screen.getByLabelText('Choice argument JSON'), {
       target: { value: JSON.stringify({ receiver: 'bob::party', amount: '5.0' }) },
     })
-    await userEvent.click(screen.getByRole('button', { name: 'Exercise choice' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Exercise' }))
 
     await waitFor(() => assert.equal(calls.length, 1))
     assert.equal(calls[0]?.account.partyId, 'alice::party')
@@ -96,7 +96,7 @@ describe('ExerciseChoiceUtil', () => {
       target: { value: '{ broken' },
     })
     assert.equal(
-      (screen.getByRole('button', { name: 'Exercise choice' }) as HTMLButtonElement).disabled,
+      (screen.getByRole('button', { name: 'Exercise' }) as HTMLButtonElement).disabled,
       true,
     )
   })

From c39dd6efcd2816903efce9ddb02060bee7c615ca Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:18 -0300
Subject: [PATCH 094/121] refactor(carpincho-wallet): let tooltips
 auto-position instead of pinning a side

---
 carpincho-wallet/src/components/ui/Tooltip.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/Tooltip.tsx b/carpincho-wallet/src/components/ui/Tooltip.tsx
index dd404eee..95ab1f42 100644
--- a/carpincho-wallet/src/components/ui/Tooltip.tsx
+++ b/carpincho-wallet/src/components/ui/Tooltip.tsx
@@ -11,7 +11,7 @@ type TooltipProps = {
 export const Tooltip = ({
   content,
   label = 'More information',
-  side = 'bottom',
+  side,
 }: TooltipProps): JSX.Element => (
   <RadixTooltip.Root delayDuration={150}>
     <RadixTooltip.Trigger asChild>
@@ -25,10 +25,10 @@ export const Tooltip = ({
     </RadixTooltip.Trigger>
     <RadixTooltip.Portal>
       <RadixTooltip.Content
-        side={side}
+        {...(side !== undefined ? { side } : {})}
         sideOffset={3}
         collisionPadding={8}
-        className="z-50 w-72 rounded-md border border-border bg-surface px-3 py-2 text-[0.78rem] leading-snug text-foreground shadow-[var(--shadow-popover)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+        className="z-50 max-w-[min(18rem,calc(100vw-2rem))] rounded-md border border-border bg-surface px-3 py-2 text-[0.78rem] leading-snug text-foreground shadow-[var(--shadow-popover)] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       >
         {content}
         <RadixTooltip.Arrow className="fill-surface" />

From 2d21605c9d5dd461114343c2af42c32cd0f5a65b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:18 -0300
Subject: [PATCH 095/121] feat(carpincho-wallet): collapse active-contract rows
 to the short id in a fixed-height list

---
 .../components/utils/ActiveContractsUtil.tsx  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 2067fa8b..665171af 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -19,21 +19,23 @@ interface ActiveContractsUtilProps {
 
 // One active contract as a collapsible card: id + chevron, args behind an expander.
 const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
-  <Collapsible className="group rounded-md border border-border bg-surface p-3">
-    <div className="flex items-start gap-2">
-      <div className="min-w-0 flex-1">
+  <Collapsible className="group rounded-md border border-border bg-surface px-3 py-2.5">
+    <div className="flex items-center gap-2">
+      {/* collapsed: shortened id summary; hidden when open */}
+      <span className="min-w-0 flex-1 truncate font-mono text-[0.74rem] leading-5 text-foreground group-data-[state=open]:hidden">
+        {shortMiddle(contract.contractId, 10, 8)}
+      </span>
+      {/* expanded: full contract id label + value; hidden when closed */}
+      <div className="hidden min-w-0 flex-1 group-data-[state=open]:block">
         <CopyableLabel
           className="mb-1"
           label="Contract ID"
           value={contract.contractId}
           copyLabel="contract ID"
         />
-        <div className="break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-[0.74rem] leading-5 text-foreground">
-          <span className="block truncate group-data-[state=open]:hidden">
-            {shortMiddle(contract.contractId, 10, 8)}
-          </span>
-          <span className="hidden group-data-[state=open]:block">{contract.contractId}</span>
-        </div>
+        <span className="break-all font-mono text-[0.74rem] leading-5 text-foreground">
+          {contract.contractId}
+        </span>
       </div>
       <CollapsibleTrigger className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
         <span className="sr-only">Toggle contract details</span>
@@ -136,7 +138,7 @@ export const ActiveContractsUtil = ({
           {loaded ? 'No active contracts.' : 'Loading active contracts...'}
         </p>
       ) : (
-        <div className="-mx-1 flex max-h-[22rem] flex-col gap-3 overflow-y-auto px-1">
+        <div className="-mx-1 flex h-[15.5rem] flex-col gap-3 overflow-y-auto px-1">
           {contracts.map((contract) => (
             <ContractCard
               key={contract.contractId}

From e0c58dfd566d6ad2939e6c5789b17d1b195d3eb0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:18 -0300
Subject: [PATCH 096/121] fix(carpincho-wallet): give the holdings list a fixed
 height to stop modal jumps

---
 carpincho-wallet/src/components/TokenDetailSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index f02a508c..43480904 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -121,7 +121,7 @@ const DetailScreen = ({
       <div className="px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
         Holdings
       </div>
-      <div className="-mx-1 flex max-h-60 flex-col gap-2 overflow-y-auto px-1">
+      <div className="-mx-1 flex h-60 flex-col gap-2 overflow-y-auto px-1">
         {loading && holdings.length === 0 ? (
           <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
         ) : error !== undefined ? (

From 41f44363047abbb96f38fd45503241f04fd532fb Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:34:18 -0300
Subject: [PATCH 097/121] refactor(carpincho-wallet): move the activity row
 time below the title with a status badge

---
 .../src/components/ActivityList.tsx           | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 0acf3a1e..595cd87f 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -153,21 +153,23 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
                   {RECEIPT_ICON}
                 </span>
                 <span className="min-w-0">
-                  <span className="flex items-baseline gap-2">
-                    <span className="truncate text-[0.94rem] font-semibold text-foreground">
-                      {txTitle(tx)}
-                    </span>
-                    <span className="shrink-0 whitespace-nowrap text-[0.72rem] font-normal italic text-muted-foreground">
-                      {TIME_FMT.format(tx.createdAt)}
-                    </span>
+                  <span className="block truncate text-[0.94rem] font-semibold text-foreground">
+                    {txTitle(tx)}
+                  </span>
+                  <span className="mt-0.5 block text-[0.76rem] text-muted-foreground">
+                    {TIME_FMT.format(tx.createdAt)}
                   </span>
-                  <span className="block text-[0.84rem] font-medium text-success">Confirmed</span>
                 </span>
-                <span
-                  aria-hidden="true"
-                  className="grid size-8 place-items-center justify-self-end text-muted-foreground [&_svg]:size-4"
-                >
-                  {EYE_ICON}
+                <span className="flex items-center gap-2 justify-self-end">
+                  <span className="shrink-0 rounded-full border border-success/40 bg-success-soft px-2.5 py-1 text-[0.72rem] font-semibold text-success">
+                    Confirmed
+                  </span>
+                  <span
+                    aria-hidden="true"
+                    className="grid size-8 place-items-center text-muted-foreground [&_svg]:size-4"
+                  >
+                    {EYE_ICON}
+                  </span>
                 </span>
               </button>
             ))}

From e932fdb42c02a5dfb01cb1cf15e25132194959c2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:39:47 -0300
Subject: [PATCH 098/121] refactor(carpincho-wallet): rename the vault export
 confirm button to Accept

---
 carpincho-wallet/src/components/VaultBackupPanel.tsx       | 2 +-
 carpincho-wallet/test/components/VaultBackupPanel.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 1f5ae0c9..527559be 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -30,7 +30,7 @@ export const ExportVaultView = (): JSX.Element => {
     return (
       <ConfirmPasswordForm
         label="Confirm password"
-        submitLabel="Reveal vault backup"
+        submitLabel="Accept"
         onVerified={() => setEnvelope(v.exportVault())}
       >
         <p className="text-[0.85rem] text-muted-foreground">
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
index e81ec81b..0aa9a5f8 100644
--- a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -77,7 +77,7 @@ describe('ExportVaultView', () => {
     )
     assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
     await user.type(screen.getByLabelText(/confirm password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /reveal/i }))
+    await user.click(screen.getByRole('button', { name: /accept/i }))
     // The reveal view (JsonView + Copy/Download) only mounts after a correct password.
     await waitFor(() => assert.ok(screen.getByRole('button', { name: /copy json/i })))
   })

From e9b63adff25858a3c4df30d75f745af76f519dc6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:43:59 -0300
Subject: [PATCH 099/121] refactor(carpincho-wallet): unify status pills and
 section titles behind shared Badge and SectionLabel primitives

---
 .../src/components/ActivityList.tsx           | 15 ++++-----
 .../src/components/ActivityPanel.tsx          | 10 +++---
 .../src/components/AssetsPanel.tsx            |  5 ++-
 .../src/components/TokenDetailSheet.tsx       | 12 +++----
 .../src/components/TransferCard.tsx           |  5 ++-
 carpincho-wallet/src/components/ui/Badge.tsx  | 31 +++++++++++++++++++
 .../src/components/ui/SectionLabel.tsx        | 16 ++++++++++
 .../src/components/utils/UtilsList.tsx        |  7 ++---
 8 files changed, 70 insertions(+), 31 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/Badge.tsx
 create mode 100644 carpincho-wallet/src/components/ui/SectionLabel.tsx

diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 595cd87f..9f7dc645 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -1,8 +1,10 @@
 import { useMemo, useState } from 'react'
+import { Badge } from '@/components/ui/Badge'
 import { CopyableLabel } from '@/components/ui/CopyableLabel'
 import { DetailRow } from '@/components/ui/DetailRow'
 import { EYE_ICON, RECEIPT_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
+import { SectionLabel } from '@/components/ui/SectionLabel'
 import { Sheet } from '@/components/ui/Sheet'
 import type { TransactionRecord } from '@/vault/types'
 import { CANTON_METHOD_PREPARE_EXECUTE_AND_WAIT } from '@/wc/client'
@@ -134,10 +136,11 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
   return (
     <div className="flex flex-col pb-2">
       {groups.map((group) => (
-        <div key={group.label}>
-          <div className="px-1 pb-1.5 pt-3 text-[0.8rem] font-semibold tracking-tight text-muted-foreground">
-            {group.label}
-          </div>
+        <div
+          key={group.label}
+          className="flex flex-col gap-2 pt-3"
+        >
+          <SectionLabel>{group.label}</SectionLabel>
           <div className="flex flex-col gap-2">
             {group.items.map((tx) => (
               <button
@@ -161,9 +164,7 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
                   </span>
                 </span>
                 <span className="flex items-center gap-2 justify-self-end">
-                  <span className="shrink-0 rounded-full border border-success/40 bg-success-soft px-2.5 py-1 text-[0.72rem] font-semibold text-success">
-                    Confirmed
-                  </span>
+                  <Badge tone="success">Confirmed</Badge>
                   <span
                     aria-hidden="true"
                     className="grid size-8 place-items-center text-muted-foreground [&_svg]:size-4"
diff --git a/carpincho-wallet/src/components/ActivityPanel.tsx b/carpincho-wallet/src/components/ActivityPanel.tsx
index 3290d8c3..3b09bed9 100644
--- a/carpincho-wallet/src/components/ActivityPanel.tsx
+++ b/carpincho-wallet/src/components/ActivityPanel.tsx
@@ -5,9 +5,11 @@ import { ActivityList } from '@/components/ActivityList'
 import { TransferCard } from '@/components/TransferCard'
 import { TransferDetailsSheet } from '@/components/TransferDetailsSheet'
 import { LoadingState } from '@/components/ui/LoadingState'
+import { SECTION_LABEL_CLASS } from '@/components/ui/SectionLabel'
 import { toast } from '@/components/ui/toast'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
+import { cn } from '@/utils/cn'
 import type { AccountPublic, TransactionRecord } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
@@ -109,9 +111,7 @@ export const ActivityPanel = ({
 
       {visibleIncoming.length > 0 ? (
         <section className="flex flex-col gap-2">
-          <h2 className="m-0 px-0.5 text-[0.7rem] font-bold uppercase tracking-[0.1em] text-foreground">
-            Needs action
-          </h2>
+          <h2 className={cn('m-0', SECTION_LABEL_CLASS)}>Needs action</h2>
           {visibleIncoming.map((transfer) => (
             <TransferCard
               key={transfer.contractId}
@@ -126,9 +126,7 @@ export const ActivityPanel = ({
 
       {outgoing.length > 0 ? (
         <section className="flex flex-col gap-2">
-          <h2 className="m-0 px-0.5 text-[0.62rem] font-bold uppercase tracking-[0.1em] text-muted-foreground/70">
-            Awaiting acceptance
-          </h2>
+          <h2 className={cn('m-0', SECTION_LABEL_CLASS)}>Awaiting acceptance</h2>
           {outgoing.map((transfer) => (
             <TransferCard
               key={transfer.contractId}
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 026d11d5..c7e8439b 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -5,6 +5,7 @@ import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
 import { TokenRow } from '@/components/TokenRow'
 import { LoadingState } from '@/components/ui/LoadingState'
+import { SectionLabel } from '@/components/ui/SectionLabel'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
@@ -53,9 +54,7 @@ export const AssetsPanel = ({
 
       {summaries.length > 0 ? (
         <div className="flex flex-col gap-2">
-          <div className="px-1 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-            Holdings
-          </div>
+          <SectionLabel>Holdings</SectionLabel>
           {summaries.map((summary) => (
             <TokenRow
               key={summary.key}
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index 43480904..c8a47309 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -7,8 +7,10 @@ import { SendConfirm } from '@/components/SendConfirm'
 import { type Cip56SendApi, SendTokenForm, type TransferDeadline } from '@/components/SendTokenForm'
 import { TokenHoldingDetail } from '@/components/TokenHoldingDetail'
 import { TokenReceive } from '@/components/TokenReceive'
+import { Badge } from '@/components/ui/Badge'
 import { SecondaryButton } from '@/components/ui/Button'
 import { CHEVRON_RIGHT_ICON, RECEIVE_ICON, SEND_ICON } from '@/components/ui/icons'
+import { SectionLabel } from '@/components/ui/SectionLabel'
 import { Sheet } from '@/components/ui/Sheet'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
@@ -62,11 +64,7 @@ const HoldingListRow = ({
           <span className="min-w-0 truncate text-[0.9rem] font-medium text-foreground">
             {formatTokenAmount(view?.amount ?? 'unknown')}
           </span>
-          {view?.lock == null ? null : (
-            <span className="shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[0.62rem] font-semibold uppercase text-muted-foreground">
-              Locked
-            </span>
-          )}
+          {view?.lock == null ? null : <Badge tone="neutral">Locked</Badge>}
         </span>
       </span>
       <span
@@ -118,9 +116,7 @@ const DetailScreen = ({
     </div>
 
     <div className="flex min-h-0 flex-col gap-2">
-      <div className="px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-        Holdings
-      </div>
+      <SectionLabel>Holdings</SectionLabel>
       <div className="-mx-1 flex h-60 flex-col gap-2 overflow-y-auto px-1">
         {loading && holdings.length === 0 ? (
           <p className="m-0 px-1 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index ad746419..a38be4b3 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -2,6 +2,7 @@ import cantonIcon from '@/assets/canton.png'
 import { formatTokenAmount } from '@/cip56/amount'
 import type { PendingTokenTransfer } from '@/cip56/transfers'
 import { tokenDisplayLabel, transferDescription } from '@/cip56/transfers'
+import { Badge } from '@/components/ui/Badge'
 import { PrimaryButton } from '@/components/ui/Button'
 import { Copyable } from '@/components/ui/Copyable'
 import { EYE_ICON } from '@/components/ui/icons'
@@ -80,9 +81,7 @@ export const TransferCard = ({
             )}
           </p>
         </div>
-        <span className="shrink-0 rounded-full border border-warning/40 bg-warning-soft px-2.5 py-1 text-[0.72rem] font-semibold text-warning">
-          Pending
-        </span>
+        <Badge tone="warning">Pending</Badge>
         {detailsButton}
       </article>
     )
diff --git a/carpincho-wallet/src/components/ui/Badge.tsx b/carpincho-wallet/src/components/ui/Badge.tsx
new file mode 100644
index 00000000..8e1346a6
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/Badge.tsx
@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/utils/cn'
+
+type BadgeTone = 'warning' | 'success' | 'neutral'
+
+const TONE_CLASS: Record<BadgeTone, string> = {
+  warning: 'border-warning/40 bg-warning-soft text-warning',
+  success: 'border-success/40 bg-success-soft text-success',
+  neutral: 'border-border bg-muted text-muted-foreground',
+}
+
+// Compact status pill (Pending, Confirmed, Locked, ...). One shape so statuses stay uniform.
+export const Badge = ({
+  tone = 'neutral',
+  className,
+  children,
+}: {
+  tone?: BadgeTone
+  className?: string
+  children: ReactNode
+}): JSX.Element => (
+  <span
+    className={cn(
+      'shrink-0 rounded-[3px] border px-2 py-0.5 text-[0.66rem] font-semibold',
+      TONE_CLASS[tone],
+      className,
+    )}
+  >
+    {children}
+  </span>
+)
diff --git a/carpincho-wallet/src/components/ui/SectionLabel.tsx b/carpincho-wallet/src/components/ui/SectionLabel.tsx
new file mode 100644
index 00000000..6082823d
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/SectionLabel.tsx
@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import { cn } from '@/utils/cn'
+
+// Shared eyebrow heading for list sections (Holdings, Faucet, date groups, ...) so every
+// section title shares one size, colour, and weight. Separation to the content below comes
+// from the parent's `gap`, keeping the bottom spacing uniform across sections.
+export const SECTION_LABEL_CLASS =
+  'px-1 text-[0.72rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground'
+
+export const SectionLabel = ({
+  className,
+  children,
+}: {
+  className?: string
+  children: ReactNode
+}): JSX.Element => <div className={cn(SECTION_LABEL_CLASS, className)}>{children}</div>
diff --git a/carpincho-wallet/src/components/utils/UtilsList.tsx b/carpincho-wallet/src/components/utils/UtilsList.tsx
index bc4f85ca..280263c9 100644
--- a/carpincho-wallet/src/components/utils/UtilsList.tsx
+++ b/carpincho-wallet/src/components/utils/UtilsList.tsx
@@ -9,6 +9,7 @@ import {
   SPINNER_ICON,
   UPLOAD_ICON,
 } from '@/components/ui/icons'
+import { SectionLabel } from '@/components/ui/SectionLabel'
 import { toast } from '@/components/ui/toast'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
@@ -49,8 +50,6 @@ const ROW_CLASS =
   'outline-none transition-colors enabled:hover:border-primary/60 enabled:hover:bg-primary-soft/40 ' +
   'focus-visible:shadow-focus disabled:opacity-70'
 const ICON_WRAP_CLASS = 'grid size-9 shrink-0 place-items-center rounded-full bg-muted text-primary'
-const GROUP_LABEL_CLASS =
-  'px-1 pb-1.5 pt-1 text-[0.72rem] font-semibold uppercase tracking-wider text-muted-foreground'
 
 interface UtilsListProps {
   account: AccountPublic
@@ -86,7 +85,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
   return (
     <div className="flex flex-col gap-4 px-1 py-2">
       <section className="flex flex-col gap-2">
-        <div className={GROUP_LABEL_CLASS}>Faucet</div>
+        <SectionLabel>Faucet</SectionLabel>
         <button
           type="button"
           className={ROW_CLASS}
@@ -111,7 +110,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
       </section>
 
       <section className="flex flex-col gap-2">
-        <div className={GROUP_LABEL_CLASS}>Ledger tools</div>
+        <SectionLabel>Ledger tools</SectionLabel>
         {UTIL_ROWS.map((row) => (
           <button
             key={row.key}

From 55a6262d45cd41d42b26f40fe750e5b950a69a38 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 11:47:03 -0300
Subject: [PATCH 100/121] refactor(carpincho-wallet): unify list-item padding
 and tab content top spacing

---
 carpincho-wallet/src/components/AccountListRow.tsx    | 2 +-
 carpincho-wallet/src/components/AssetsPanel.tsx       | 2 +-
 carpincho-wallet/src/components/AutoAcceptSetting.tsx | 2 +-
 carpincho-wallet/src/components/TransferCard.tsx      | 4 ++--
 carpincho-wallet/src/components/UtilsPanel.tsx        | 2 +-
 carpincho-wallet/src/components/utils/UtilsList.tsx   | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/carpincho-wallet/src/components/AccountListRow.tsx b/carpincho-wallet/src/components/AccountListRow.tsx
index 35f9876b..f98fbdc0 100644
--- a/carpincho-wallet/src/components/AccountListRow.tsx
+++ b/carpincho-wallet/src/components/AccountListRow.tsx
@@ -35,7 +35,7 @@ export const AccountListRow = ({
       onClick={onSelect}
       className="absolute inset-0 z-0 rounded-md outline-none transition-colors group-hover/row:bg-primary-soft focus-visible:shadow-focus"
     />
-    <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 p-2">
+    <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 items-center gap-2 px-3 py-2.5">
       <AccountRow
         account={account}
         withName
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index c7e8439b..bcfef045 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -40,7 +40,7 @@ export const AssetsPanel = ({
   }
 
   return (
-    <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+    <div className="flex min-h-full flex-col gap-3 px-1 pt-3 pb-2">
       <AutoAcceptSetting
         account={activeAccount}
         api={preapprovalApi}
diff --git a/carpincho-wallet/src/components/AutoAcceptSetting.tsx b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
index 5761dcaf..2300d687 100644
--- a/carpincho-wallet/src/components/AutoAcceptSetting.tsx
+++ b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
@@ -56,7 +56,7 @@ export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX
   }
 
   return (
-    <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-surface px-3.5 py-3.5">
+    <div className="flex items-center justify-between gap-3 rounded-md border border-border bg-surface px-3 py-2.5">
       <div className="flex items-center gap-1.5">
         <span className="text-[0.95rem] font-semibold text-foreground">Auto-accept incoming</span>
         <Tooltip content={AUTO_ACCEPT_TOOLTIP} />
diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index a38be4b3..5bdaf647 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -65,7 +65,7 @@ export const TransferCard = ({
     return (
       <article
         aria-label="Outgoing transfer, awaiting acceptance"
-        className="flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-3"
+        className="flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5"
       >
         <div className="min-w-0 flex-1">
           {amountRow}
@@ -90,7 +90,7 @@ export const TransferCard = ({
   return (
     <article
       aria-label="Incoming transfer"
-      className="relative overflow-hidden rounded-md border border-accent/45 bg-gradient-to-b from-accent/15 to-accent/[0.06] py-3 pr-3 pl-4"
+      className="relative overflow-hidden rounded-md border border-accent/45 bg-gradient-to-b from-accent/15 to-accent/[0.06] py-2.5 pr-3 pl-4"
     >
       <span
         aria-hidden="true"
diff --git a/carpincho-wallet/src/components/UtilsPanel.tsx b/carpincho-wallet/src/components/UtilsPanel.tsx
index 69a466cf..bb6febd1 100644
--- a/carpincho-wallet/src/components/UtilsPanel.tsx
+++ b/carpincho-wallet/src/components/UtilsPanel.tsx
@@ -35,7 +35,7 @@ export const UtilsPanel = ({ account, api = defaultApi }: UtilsPanelProps): JSX.
 
   if (account === undefined) {
     return (
-      <section className="px-1 py-2">
+      <section className="px-1 pt-3 pb-2">
         <Alert variant="warning">Create an account before using ledger tools.</Alert>
       </section>
     )
diff --git a/carpincho-wallet/src/components/utils/UtilsList.tsx b/carpincho-wallet/src/components/utils/UtilsList.tsx
index 280263c9..53eb57d7 100644
--- a/carpincho-wallet/src/components/utils/UtilsList.tsx
+++ b/carpincho-wallet/src/components/utils/UtilsList.tsx
@@ -46,7 +46,7 @@ const UTIL_ROWS: UtilRow[] = [
 ]
 
 const ROW_CLASS =
-  'flex w-full items-center gap-3 rounded-md border border-border bg-surface px-3 py-3 text-left ' +
+  'flex w-full items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left ' +
   'outline-none transition-colors enabled:hover:border-primary/60 enabled:hover:bg-primary-soft/40 ' +
   'focus-visible:shadow-focus disabled:opacity-70'
 const ICON_WRAP_CLASS = 'grid size-9 shrink-0 place-items-center rounded-full bg-muted text-primary'
@@ -83,7 +83,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
   }
 
   return (
-    <div className="flex flex-col gap-4 px-1 py-2">
+    <div className="flex flex-col gap-4 px-1 pt-3 pb-2">
       <section className="flex flex-col gap-2">
         <SectionLabel>Faucet</SectionLabel>
         <button

From d3cf7074a5e552bdbc3d24cfd466186c2b091f3c Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:25:47 -0300
Subject: [PATCH 101/121] feat(carpincho-wallet): filter active contracts live,
 refresh via an icon

Drop the full-width Refresh button: the template field now narrows the
already-fetched ACS client-side as you type, and a small animated refresh
icon above the list re-fetches the snapshot. Relabel the field to
"Template id" with an example placeholder.

In the expanded card, render the contract id as a DetailRow so it matches
the other fields, and keep the chevron pinned to the top-right.
---
 carpincho-wallet/src/components/ui/icons.tsx  |  19 +++
 .../components/utils/ActiveContractsUtil.tsx  | 116 +++++++++---------
 carpincho-wallet/src/ledger/contracts.ts      |   2 +-
 .../test/components/UtilsPanel.test.tsx       |  36 ++++--
 .../utils/ActiveContractsUtil.test.tsx        |  67 +++++++---
 .../test/ledger/contracts.test.ts             |  28 +++++
 6 files changed, 184 insertions(+), 84 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index 69f91ab4..ee121897 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -269,6 +269,25 @@ export const SPINNER_ICON = (
   </svg>
 )
 
+export const REFRESH_ICON = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" />
+    <path d="M21 3v5h-5" />
+    <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" />
+    <path d="M8 16H3v5" />
+  </svg>
+)
+
 export const SEARCH_ICON = (
   <svg
     width="15"
diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 665171af..4a9fccd9 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -1,15 +1,20 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Alert } from '@/components/ui/Alert'
-import { PrimaryButton } from '@/components/ui/Button'
+import { ICON_BUTTON_CLASS } from '@/components/ui/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
 import { CopyableLabel } from '@/components/ui/CopyableLabel'
 import { DetailRow } from '@/components/ui/DetailRow'
-import { CHEVRON_DOWN_ICON } from '@/components/ui/icons'
+import { CHEVRON_DOWN_ICON, REFRESH_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
-import { type ActiveContract, listActiveContracts as defaultList } from '@/ledger/contracts'
+import {
+  type ActiveContract,
+  listActiveContracts as defaultList,
+  matchesTemplate,
+} from '@/ledger/contracts'
 import { shortMiddle } from '@/utils/account'
+import { cn } from '@/utils/cn'
 import type { AccountPublic } from '@/vault/types'
 
 interface ActiveContractsUtilProps {
@@ -17,26 +22,14 @@ interface ActiveContractsUtilProps {
   listActiveContracts?: typeof defaultList
 }
 
-// One active contract as a collapsible card: id + chevron, args behind an expander.
+// One active contract as a collapsible card: a shortened id with a top-right chevron, full
+// details (matching the other sheets' field styling) revealed below.
 const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
   <Collapsible className="group rounded-md border border-border bg-surface px-3 py-2.5">
     <div className="flex items-center gap-2">
-      {/* collapsed: shortened id summary; hidden when open */}
-      <span className="min-w-0 flex-1 truncate font-mono text-[0.74rem] leading-5 text-foreground group-data-[state=open]:hidden">
+      <span className="min-w-0 flex-1 truncate font-mono text-[0.74rem] leading-5 text-foreground">
         {shortMiddle(contract.contractId, 10, 8)}
       </span>
-      {/* expanded: full contract id label + value; hidden when closed */}
-      <div className="hidden min-w-0 flex-1 group-data-[state=open]:block">
-        <CopyableLabel
-          className="mb-1"
-          label="Contract ID"
-          value={contract.contractId}
-          copyLabel="contract ID"
-        />
-        <span className="break-all font-mono text-[0.74rem] leading-5 text-foreground">
-          {contract.contractId}
-        </span>
-      </div>
       <CollapsibleTrigger className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
         <span className="sr-only">Toggle contract details</span>
         <span className="transition-transform group-data-[state=open]:rotate-180">
@@ -45,6 +38,11 @@ const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element =
       </CollapsibleTrigger>
     </div>
     <CollapsibleContent className="mt-3 flex flex-col gap-3 border-t border-border pt-3">
+      <DetailRow
+        label="Contract ID"
+        value={contract.contractId}
+        copyLabel="contract ID"
+      />
       <DetailRow
         label="Template"
         value={contract.templateId}
@@ -70,7 +68,7 @@ const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element =
   </Collapsible>
 )
 
-// Browses the active contract set with an optional template filter.
+// Browses the active contract set, narrowing it live by template id as you type.
 export const ActiveContractsUtil = ({
   account,
   listActiveContracts = defaultList,
@@ -81,65 +79,71 @@ export const ActiveContractsUtil = ({
   const [error, setError] = useState<string | undefined>()
   const [loaded, setLoaded] = useState(false)
 
-  const refresh = useCallback(
-    async (templateId: string): Promise<void> => {
-      setBusy(true)
-      setError(undefined)
-      try {
-        setContracts(
-          await listActiveContracts({
-            partyId: account.partyId,
-            ...(templateId.trim() === '' ? {} : { templateId: templateId.trim() }),
-          }),
-        )
-        setLoaded(true)
-      } catch (err) {
-        const message = err instanceof Error ? err.message : String(err)
-        setError(message)
-        toast.error(message)
-      } finally {
-        setBusy(false)
-      }
-    },
-    [account.partyId, listActiveContracts],
-  )
+  const refresh = useCallback(async (): Promise<void> => {
+    setBusy(true)
+    setError(undefined)
+    try {
+      setContracts(await listActiveContracts({ partyId: account.partyId }))
+      setLoaded(true)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(message)
+    } finally {
+      setBusy(false)
+    }
+  }, [account.partyId, listActiveContracts])
 
   useEffect(() => {
-    void refresh('')
+    void refresh()
   }, [refresh])
 
+  const visible = contracts.filter((contract) => matchesTemplate(contract, filterTemplateId))
+  const emptyMessage = !loaded
+    ? 'Loading active contracts...'
+    : contracts.length === 0
+      ? 'No active contracts.'
+      : 'No contracts match the filter.'
+
   return (
     <section className="flex flex-col gap-4">
       <label
         htmlFor="filter-template-id"
         className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
       >
-        Filter template ID
+        Template id
         <TextInput
           id="filter-template-id"
           value={filterTemplateId}
           onChange={(event) => setFilterTemplateId(event.currentTarget.value)}
-          placeholder="optional"
+          placeholder="e.g. Module:Template"
           className="font-mono text-[0.9rem] normal-case tracking-normal"
         />
       </label>
-      <PrimaryButton
-        className="w-full"
-        disabled={busy}
-        onClick={() => {
-          void refresh(filterTemplateId)
-        }}
-      >
-        {busy ? 'Refreshing...' : 'Refresh contracts'}
-      </PrimaryButton>
       {error === undefined ? null : <Alert variant="error">{error}</Alert>}
-      {contracts.length === 0 ? (
+      <div className="flex items-center justify-end">
+        <button
+          type="button"
+          aria-label="Refresh contracts"
+          title="Refresh contracts"
+          disabled={busy}
+          onClick={() => {
+            void refresh()
+          }}
+          className={cn(ICON_BUTTON_CLASS, 'size-8 rounded-md [&_svg]:size-[1.05rem]')}
+        >
+          <span className={cn('inline-grid place-items-center', busy && 'animate-spin')}>
+            {REFRESH_ICON}
+          </span>
+        </button>
+      </div>
+      {visible.length === 0 ? (
         <p className="rounded-md border border-dashed border-border px-3 py-6 text-center text-[0.9rem] font-medium text-muted-foreground">
-          {loaded ? 'No active contracts.' : 'Loading active contracts...'}
+          {emptyMessage}
         </p>
       ) : (
         <div className="-mx-1 flex h-[15.5rem] flex-col gap-3 overflow-y-auto px-1">
-          {contracts.map((contract) => (
+          {visible.map((contract) => (
             <ContractCard
               key={contract.contractId}
               contract={contract}
diff --git a/carpincho-wallet/src/ledger/contracts.ts b/carpincho-wallet/src/ledger/contracts.ts
index 196c4ef6..63228289 100644
--- a/carpincho-wallet/src/ledger/contracts.ts
+++ b/carpincho-wallet/src/ledger/contracts.ts
@@ -168,7 +168,7 @@ const activeContractFromEntry = (entry: JsonActiveContractEntry): ActiveContract
 }
 
 // Matches exact template ids and package-agnostic module/template suffixes for dev-time lookup.
-const matchesTemplate = (contract: ActiveContract, templateId?: string): boolean => {
+export const matchesTemplate = (contract: ActiveContract, templateId?: string): boolean => {
   const trimmed = templateId?.trim()
   if (trimmed === undefined || trimmed === '') {
     return true
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 64b6d387..1e895bcd 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -26,6 +26,13 @@ const CONTRACT: ActiveContract = {
   createdOffset: 42,
 }
 
+const OTHER: ActiveContract = {
+  contractId: 'cid-other',
+  templateId: 'pkg:Module:Other',
+  createArgument: { admin: 'alice::party' },
+  createdOffset: 43,
+}
+
 const baseVault = (): VaultContextValue =>
   ({
     isLocked: false,
@@ -94,29 +101,36 @@ describe('UtilsPanel', () => {
     await waitFor(() => assert.equal(screen.queryByLabelText('Template ID'), null))
   })
 
-  it('drills into Active contracts and applies the template filter', async () => {
+  it('drills into Active contracts, filters locally, and refreshes from the header', async () => {
     const listCalls: Parameters<UtilsApi['listActiveContracts']>[0][] = []
     const api: UtilsApi = {
       createContract: async () => ({ updateId: 'unused' }),
       exerciseContract: async () => ({ updateId: 'unused' }),
       listActiveContracts: async (params) => {
         listCalls.push(params)
-        return [CONTRACT]
+        return [CONTRACT, OTHER]
       },
     }
     renderPanel(api)
 
     await userEvent.click(screen.getByRole('button', { name: /Active contracts/ }))
-    await screen.findAllByText('cid-1')
-    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+    await screen.findByText('cid-1')
+    await screen.findByText('cid-other')
 
-    await waitFor(() =>
-      assert.deepEqual(listCalls.at(-1), {
-        partyId: 'alice::party',
-        templateId: 'pkg:Module:Template',
-      }),
-    )
+    // The list auto-loads the full ACS without a server-side template filter.
+    await waitFor(() => assert.ok(listCalls.length >= 1))
+    assert.deepEqual(listCalls.at(-1), { partyId: 'alice::party' })
+
+    // Typing narrows the already-fetched set client-side, no extra request.
+    await userEvent.type(screen.getByLabelText('Template id'), 'Other')
+    assert.equal(screen.queryByText('cid-1'), null)
+    assert.ok(screen.getByText('cid-other'))
+    assert.equal(listCalls.length, 1)
+
+    // The header refresh icon re-fetches the snapshot.
+    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+    await waitFor(() => assert.equal(listCalls.length, 2))
+    assert.deepEqual(listCalls.at(-1), { partyId: 'alice::party' })
   })
 
   it('warns when there is no account', () => {
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index 30aede81..d6bf2df8 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -25,6 +25,13 @@ const CONTRACT: ActiveContract = {
   createdOffset: 42,
 }
 
+const OTHER: ActiveContract = {
+  contractId: 'cid-other',
+  templateId: 'pkg:Module:Other',
+  createArgument: { admin: 'alice::party' },
+  createdOffset: 43,
+}
+
 const renderUtil = (listActiveContracts: typeof ListFn): void => {
   render(
     <TooltipProvider>
@@ -42,34 +49,62 @@ describe('ActiveContractsUtil', () => {
     toast.clear()
   })
 
-  it('auto-loads contracts on mount and expands the JSON on demand', async () => {
+  it('auto-loads contracts on mount and reveals the details on demand', async () => {
     const listActiveContracts = (async () => [CONTRACT]) as typeof ListFn
     renderUtil(listActiveContracts)
 
-    await screen.findAllByText('cid-1')
-    assert.ok(screen.getByRole('button', { name: /Copy contract ID/i }))
-
+    await screen.findByText('cid-1')
     await userEvent.click(screen.getByRole('button', { name: /toggle contract details/i }))
     await screen.findByText(/admin/)
+    // The contract id is shown as a labelled field, like Template and Offset.
+    assert.ok(screen.getByText('Contract ID'))
+  })
+
+  it('filters the list locally as the template id is typed', async () => {
+    const listActiveContracts = (async () => [CONTRACT, OTHER]) as typeof ListFn
+    renderUtil(listActiveContracts)
+    await screen.findByText('cid-1')
+    await screen.findByText('cid-other')
+
+    // Suffix match keeps only the contract whose template ends with the typed name.
+    await userEvent.type(screen.getByLabelText('Template id'), 'Other')
+    assert.equal(screen.queryByText('cid-1'), null)
+    assert.ok(screen.getByText('cid-other'))
+
+    await userEvent.clear(screen.getByLabelText('Template id'))
+    assert.ok(screen.getByText('cid-1'))
+    assert.ok(screen.getByText('cid-other'))
   })
 
-  it('passes the optional template filter to the helper on refresh', async () => {
-    const calls: Parameters<typeof ListFn>[0][] = []
-    const listActiveContracts = (async (params) => {
-      calls.push(params)
+  it('re-fetches the snapshot when the refresh button is pressed', async () => {
+    let calls = 0
+    const listActiveContracts = (async () => {
+      calls += 1
       return [CONTRACT]
     }) as typeof ListFn
     renderUtil(listActiveContracts)
 
-    await waitFor(() => assert.ok(calls.length >= 1))
-    await userEvent.type(screen.getByLabelText('Filter template ID'), 'pkg:Module:Template')
+    await screen.findByText('cid-1')
+    await waitFor(() => assert.equal(calls, 1))
     await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+    await waitFor(() => assert.equal(calls, 2))
+  })
+
+  it('messages the loading, empty, and no-match states', async () => {
+    const pending = (() => new Promise<ActiveContract[]>(() => {})) as typeof ListFn
+    renderUtil(pending)
+    assert.ok(screen.getByText(/loading active contracts/i))
+    cleanup()
+
+    const none = (async () => []) as typeof ListFn
+    renderUtil(none)
+    await screen.findByText(/no active contracts/i)
+    cleanup()
 
-    await waitFor(() =>
-      assert.deepEqual(calls.at(-1), {
-        partyId: 'alice::party',
-        templateId: 'pkg:Module:Template',
-      }),
-    )
+    const one = (async () => [CONTRACT]) as typeof ListFn
+    renderUtil(one)
+    await screen.findByText('cid-1')
+    await userEvent.type(screen.getByLabelText('Template id'), 'Nope')
+    assert.ok(screen.getByText(/no contracts match/i))
   })
 })
diff --git a/carpincho-wallet/test/ledger/contracts.test.ts b/carpincho-wallet/test/ledger/contracts.test.ts
index 88a23ce2..185382a0 100644
--- a/carpincho-wallet/test/ledger/contracts.test.ts
+++ b/carpincho-wallet/test/ledger/contracts.test.ts
@@ -5,6 +5,7 @@ import {
   createContract,
   exerciseContract,
   listActiveContracts,
+  matchesTemplate,
 } from '@/ledger/contracts'
 import type { AccountPublic } from '@/vault/types'
 
@@ -263,3 +264,30 @@ describe('ledger contract helpers', () => {
     ])
   })
 })
+
+describe('matchesTemplate', () => {
+  const contract: ActiveContract = {
+    contractId: 'cid',
+    templateId: 'pkg:Module:Template',
+    createArgument: {},
+  }
+
+  it('keeps every contract when the filter is empty or whitespace', () => {
+    assert.equal(matchesTemplate(contract, undefined), true)
+    assert.equal(matchesTemplate(contract, ''), true)
+    assert.equal(matchesTemplate(contract, '   '), true)
+  })
+
+  it('matches the exact template id', () => {
+    assert.equal(matchesTemplate(contract, 'pkg:Module:Template'), true)
+  })
+
+  it('matches a package-agnostic module:template suffix', () => {
+    assert.equal(matchesTemplate(contract, 'Module:Template'), true)
+  })
+
+  it('matches a bare template-name suffix', () => {
+    assert.equal(matchesTemplate(contract, 'Template'), true)
+    assert.equal(matchesTemplate(contract, 'Other'), false)
+  })
+})

From 7680394b11708997427f7bd4cef73955125b9c79 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:45:35 -0300
Subject: [PATCH 102/121] feat(carpincho-wallet): filter active contracts by
 template or contract id

Broaden the active-contracts filter so a query matches either the template
id (exact/suffix) or a case-insensitive substring of the contract id.
Relabel the field to "Filter" with a "Template or contract id" placeholder.
---
 .../components/utils/ActiveContractsUtil.tsx  | 18 ++++++-------
 carpincho-wallet/src/ledger/contracts.ts      | 12 +++++++++
 .../test/components/UtilsPanel.test.tsx       |  2 +-
 .../utils/ActiveContractsUtil.test.tsx        | 16 ++++++++----
 .../test/ledger/contracts.test.ts             | 25 +++++++++++++++++++
 5 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 4a9fccd9..49debe9f 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -10,8 +10,8 @@ import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
 import {
   type ActiveContract,
+  contractMatchesQuery,
   listActiveContracts as defaultList,
-  matchesTemplate,
 } from '@/ledger/contracts'
 import { shortMiddle } from '@/utils/account'
 import { cn } from '@/utils/cn'
@@ -73,7 +73,7 @@ export const ActiveContractsUtil = ({
   account,
   listActiveContracts = defaultList,
 }: ActiveContractsUtilProps): JSX.Element => {
-  const [filterTemplateId, setFilterTemplateId] = useState('')
+  const [filterQuery, setFilterQuery] = useState('')
   const [contracts, setContracts] = useState<ActiveContract[]>([])
   const [busy, setBusy] = useState(false)
   const [error, setError] = useState<string | undefined>()
@@ -98,7 +98,7 @@ export const ActiveContractsUtil = ({
     void refresh()
   }, [refresh])
 
-  const visible = contracts.filter((contract) => matchesTemplate(contract, filterTemplateId))
+  const visible = contracts.filter((contract) => contractMatchesQuery(contract, filterQuery))
   const emptyMessage = !loaded
     ? 'Loading active contracts...'
     : contracts.length === 0
@@ -108,15 +108,15 @@ export const ActiveContractsUtil = ({
   return (
     <section className="flex flex-col gap-4">
       <label
-        htmlFor="filter-template-id"
+        htmlFor="contract-filter"
         className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
       >
-        Template id
+        Filter
         <TextInput
-          id="filter-template-id"
-          value={filterTemplateId}
-          onChange={(event) => setFilterTemplateId(event.currentTarget.value)}
-          placeholder="e.g. Module:Template"
+          id="contract-filter"
+          value={filterQuery}
+          onChange={(event) => setFilterQuery(event.currentTarget.value)}
+          placeholder="Template or contract id"
           className="font-mono text-[0.9rem] normal-case tracking-normal"
         />
       </label>
diff --git a/carpincho-wallet/src/ledger/contracts.ts b/carpincho-wallet/src/ledger/contracts.ts
index 63228289..38c2e7fe 100644
--- a/carpincho-wallet/src/ledger/contracts.ts
+++ b/carpincho-wallet/src/ledger/contracts.ts
@@ -180,6 +180,18 @@ export const matchesTemplate = (contract: ActiveContract, templateId?: string):
   return contract.templateId.endsWith(suffix)
 }
 
+// UI filter: a query hits a contract by template (exact/suffix) or contract-id substring.
+export const contractMatchesQuery = (contract: ActiveContract, query: string): boolean => {
+  const trimmed = query.trim()
+  if (trimmed === '') {
+    return true
+  }
+  return (
+    matchesTemplate(contract, trimmed) ||
+    contract.contractId.toLowerCase().includes(trimmed.toLowerCase())
+  )
+}
+
 // Lists active contracts visible to the selected party using JSON Ledger API v2 ACS.
 export const listActiveContracts = async ({
   partyId,
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 1e895bcd..25e6ae4e 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -122,7 +122,7 @@ describe('UtilsPanel', () => {
     assert.deepEqual(listCalls.at(-1), { partyId: 'alice::party' })
 
     // Typing narrows the already-fetched set client-side, no extra request.
-    await userEvent.type(screen.getByLabelText('Template id'), 'Other')
+    await userEvent.type(screen.getByLabelText('Filter'), 'Other')
     assert.equal(screen.queryByText('cid-1'), null)
     assert.ok(screen.getByText('cid-other'))
     assert.equal(listCalls.length, 1)
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index d6bf2df8..1c1187c9 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -60,18 +60,24 @@ describe('ActiveContractsUtil', () => {
     assert.ok(screen.getByText('Contract ID'))
   })
 
-  it('filters the list locally as the template id is typed', async () => {
+  it('filters the list locally by template or contract id as you type', async () => {
     const listActiveContracts = (async () => [CONTRACT, OTHER]) as typeof ListFn
     renderUtil(listActiveContracts)
     await screen.findByText('cid-1')
     await screen.findByText('cid-other')
 
-    // Suffix match keeps only the contract whose template ends with the typed name.
-    await userEvent.type(screen.getByLabelText('Template id'), 'Other')
+    // Template suffix match keeps only the contract whose template ends with the typed name.
+    await userEvent.type(screen.getByLabelText('Filter'), 'Other')
     assert.equal(screen.queryByText('cid-1'), null)
     assert.ok(screen.getByText('cid-other'))
 
-    await userEvent.clear(screen.getByLabelText('Template id'))
+    // A contract-id substring narrows it the other way.
+    await userEvent.clear(screen.getByLabelText('Filter'))
+    await userEvent.type(screen.getByLabelText('Filter'), '-1')
+    assert.ok(screen.getByText('cid-1'))
+    assert.equal(screen.queryByText('cid-other'), null)
+
+    await userEvent.clear(screen.getByLabelText('Filter'))
     assert.ok(screen.getByText('cid-1'))
     assert.ok(screen.getByText('cid-other'))
   })
@@ -104,7 +110,7 @@ describe('ActiveContractsUtil', () => {
     const one = (async () => [CONTRACT]) as typeof ListFn
     renderUtil(one)
     await screen.findByText('cid-1')
-    await userEvent.type(screen.getByLabelText('Template id'), 'Nope')
+    await userEvent.type(screen.getByLabelText('Filter'), 'Nope')
     assert.ok(screen.getByText(/no contracts match/i))
   })
 })
diff --git a/carpincho-wallet/test/ledger/contracts.test.ts b/carpincho-wallet/test/ledger/contracts.test.ts
index 185382a0..a9a41395 100644
--- a/carpincho-wallet/test/ledger/contracts.test.ts
+++ b/carpincho-wallet/test/ledger/contracts.test.ts
@@ -2,6 +2,7 @@ import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import {
   type ActiveContract,
+  contractMatchesQuery,
   createContract,
   exerciseContract,
   listActiveContracts,
@@ -291,3 +292,27 @@ describe('matchesTemplate', () => {
     assert.equal(matchesTemplate(contract, 'Other'), false)
   })
 })
+
+describe('contractMatchesQuery', () => {
+  const contract: ActiveContract = {
+    contractId: '0041299d46bcfba01e',
+    templateId: 'pkg:Module:Template',
+    createArgument: {},
+  }
+
+  it('keeps every contract when the query is empty or whitespace', () => {
+    assert.equal(contractMatchesQuery(contract, ''), true)
+    assert.equal(contractMatchesQuery(contract, '   '), true)
+  })
+
+  it('matches on the template id like matchesTemplate', () => {
+    assert.equal(contractMatchesQuery(contract, 'Module:Template'), true)
+    assert.equal(contractMatchesQuery(contract, 'Other'), false)
+  })
+
+  it('matches a case-insensitive substring of the contract id', () => {
+    assert.equal(contractMatchesQuery(contract, '1299d46'), true)
+    assert.equal(contractMatchesQuery(contract, 'BCFBA01E'), true)
+    assert.equal(contractMatchesQuery(contract, 'deadbeef'), false)
+  })
+})

From e1c837f30cc600b42053dfd8a385f0e28cfdef26 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:52:31 -0300
Subject: [PATCH 103/121] feat(carpincho-wallet): spin the refresh icon and
 make the filter a search field

Rotate the refresh icon a full turn on each click (and keep spinning while a
fetch is in flight) so the action reads even when the local re-filter is
instant. Drop the "Filter" label in favour of a leading magnifier and a clear
button, matching the accounts search field; the input keeps an aria-label.
---
 .../components/utils/ActiveContractsUtil.tsx  | 47 ++++++++++++++-----
 .../test/components/UtilsPanel.test.tsx       |  6 +--
 .../utils/ActiveContractsUtil.test.tsx        | 16 ++++---
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 49debe9f..164c7b5e 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react'
 import { Alert } from '@/components/ui/Alert'
-import { ICON_BUTTON_CLASS } from '@/components/ui/Button'
+import { ICON_BUTTON_CLASS, PLAIN_ICON_BUTTON_CLASS } from '@/components/ui/Button'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/Collapsible'
 import { CopyableLabel } from '@/components/ui/CopyableLabel'
 import { DetailRow } from '@/components/ui/DetailRow'
-import { CHEVRON_DOWN_ICON, REFRESH_ICON } from '@/components/ui/icons'
+import { CHEVRON_DOWN_ICON, REFRESH_ICON, SEARCH_ICON, X_ICON } from '@/components/ui/icons'
 import { JsonView } from '@/components/ui/JsonView'
 import { TextInput } from '@/components/ui/TextInput'
 import { toast } from '@/components/ui/toast'
@@ -68,7 +68,7 @@ const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element =
   </Collapsible>
 )
 
-// Browses the active contract set, narrowing it live by template id as you type.
+// Browses the active contract set, narrowing it live by template or contract id as you type.
 export const ActiveContractsUtil = ({
   account,
   listActiveContracts = defaultList,
@@ -76,6 +76,7 @@ export const ActiveContractsUtil = ({
   const [filterQuery, setFilterQuery] = useState('')
   const [contracts, setContracts] = useState<ActiveContract[]>([])
   const [busy, setBusy] = useState(false)
+  const [spinning, setSpinning] = useState(false)
   const [error, setError] = useState<string | undefined>()
   const [loaded, setLoaded] = useState(false)
 
@@ -107,19 +108,36 @@ export const ActiveContractsUtil = ({
 
   return (
     <section className="flex flex-col gap-4">
-      <label
-        htmlFor="contract-filter"
-        className="flex flex-col gap-2 text-[0.82rem] font-semibold uppercase tracking-wider text-muted-foreground"
-      >
-        Filter
+      <div className="relative">
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+        >
+          {SEARCH_ICON}
+        </span>
         <TextInput
           id="contract-filter"
+          type="text"
           value={filterQuery}
           onChange={(event) => setFilterQuery(event.currentTarget.value)}
           placeholder="Template or contract id"
-          className="font-mono text-[0.9rem] normal-case tracking-normal"
+          aria-label="Filter contracts"
+          className="pl-9 pr-9 font-mono text-[0.9rem]"
         />
-      </label>
+        {filterQuery !== '' && (
+          <button
+            type="button"
+            onClick={() => setFilterQuery('')}
+            aria-label="Clear filter"
+            className={cn(
+              PLAIN_ICON_BUTTON_CLASS,
+              'absolute right-2 top-1/2 size-6 -translate-y-1/2',
+            )}
+          >
+            {X_ICON}
+          </button>
+        )}
+      </div>
       {error === undefined ? null : <Alert variant="error">{error}</Alert>}
       <div className="flex items-center justify-end">
         <button
@@ -128,11 +146,18 @@ export const ActiveContractsUtil = ({
           title="Refresh contracts"
           disabled={busy}
           onClick={() => {
+            setSpinning(true)
             void refresh()
           }}
           className={cn(ICON_BUTTON_CLASS, 'size-8 rounded-md [&_svg]:size-[1.05rem]')}
         >
-          <span className={cn('inline-grid place-items-center', busy && 'animate-spin')}>
+          {/* Spin at least one full turn per click, and keep going while a fetch is in flight. */}
+          <span
+            className={cn('inline-grid place-items-center', spinning && 'animate-spin')}
+            onAnimationIteration={() => {
+              if (!busy) setSpinning(false)
+            }}
+          >
             {REFRESH_ICON}
           </span>
         </button>
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 25e6ae4e..28cd825f 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -101,7 +101,7 @@ describe('UtilsPanel', () => {
     await waitFor(() => assert.equal(screen.queryByLabelText('Template ID'), null))
   })
 
-  it('drills into Active contracts, filters locally, and refreshes from the header', async () => {
+  it('drills into Active contracts, filters locally, and refreshes the snapshot', async () => {
     const listCalls: Parameters<UtilsApi['listActiveContracts']>[0][] = []
     const api: UtilsApi = {
       createContract: async () => ({ updateId: 'unused' }),
@@ -122,12 +122,12 @@ describe('UtilsPanel', () => {
     assert.deepEqual(listCalls.at(-1), { partyId: 'alice::party' })
 
     // Typing narrows the already-fetched set client-side, no extra request.
-    await userEvent.type(screen.getByLabelText('Filter'), 'Other')
+    await userEvent.type(screen.getByLabelText('Filter contracts'), 'Other')
     assert.equal(screen.queryByText('cid-1'), null)
     assert.ok(screen.getByText('cid-other'))
     assert.equal(listCalls.length, 1)
 
-    // The header refresh icon re-fetches the snapshot.
+    // The refresh icon re-fetches the snapshot.
     await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
     await waitFor(() => assert.equal(listCalls.length, 2))
     assert.deepEqual(listCalls.at(-1), { partyId: 'alice::party' })
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index 1c1187c9..26dc121a 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -67,17 +67,17 @@ describe('ActiveContractsUtil', () => {
     await screen.findByText('cid-other')
 
     // Template suffix match keeps only the contract whose template ends with the typed name.
-    await userEvent.type(screen.getByLabelText('Filter'), 'Other')
+    await userEvent.type(screen.getByLabelText('Filter contracts'), 'Other')
     assert.equal(screen.queryByText('cid-1'), null)
     assert.ok(screen.getByText('cid-other'))
 
     // A contract-id substring narrows it the other way.
-    await userEvent.clear(screen.getByLabelText('Filter'))
-    await userEvent.type(screen.getByLabelText('Filter'), '-1')
+    await userEvent.clear(screen.getByLabelText('Filter contracts'))
+    await userEvent.type(screen.getByLabelText('Filter contracts'), '-1')
     assert.ok(screen.getByText('cid-1'))
     assert.equal(screen.queryByText('cid-other'), null)
 
-    await userEvent.clear(screen.getByLabelText('Filter'))
+    await userEvent.clear(screen.getByLabelText('Filter contracts'))
     assert.ok(screen.getByText('cid-1'))
     assert.ok(screen.getByText('cid-other'))
   })
@@ -92,7 +92,11 @@ describe('ActiveContractsUtil', () => {
 
     await screen.findByText('cid-1')
     await waitFor(() => assert.equal(calls, 1))
-    await userEvent.click(screen.getByRole('button', { name: 'Refresh contracts' }))
+
+    const button = screen.getByRole('button', { name: 'Refresh contracts' })
+    await userEvent.click(button)
+    // The icon spins on click, independent of how fast the fetch resolves.
+    assert.ok(button.querySelector('.animate-spin'))
     await waitFor(() => assert.equal(calls, 2))
   })
 
@@ -110,7 +114,7 @@ describe('ActiveContractsUtil', () => {
     const one = (async () => [CONTRACT]) as typeof ListFn
     renderUtil(one)
     await screen.findByText('cid-1')
-    await userEvent.type(screen.getByLabelText('Filter'), 'Nope')
+    await userEvent.type(screen.getByLabelText('Filter contracts'), 'Nope')
     assert.ok(screen.getByText(/no contracts match/i))
   })
 })

From 4089a6c0876aedb36d4dea336dc9dd70d887d298 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 12:56:46 -0300
Subject: [PATCH 104/121] feat(carpincho-wallet): speed up the refresh icon
 spin to a 500ms turn

Add a dedicated spin-fast keyframe (500ms/turn) and use it for the refresh
icon so a click reads as a quick, deliberate rotation instead of a languid
one-second turn.
---
 .../src/components/utils/ActiveContractsUtil.tsx           | 2 +-
 carpincho-wallet/src/index.css                             | 7 +++++++
 .../test/components/utils/ActiveContractsUtil.test.tsx     | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 164c7b5e..2b674331 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -153,7 +153,7 @@ export const ActiveContractsUtil = ({
         >
           {/* Spin at least one full turn per click, and keep going while a fetch is in flight. */}
           <span
-            className={cn('inline-grid place-items-center', spinning && 'animate-spin')}
+            className={cn('inline-grid place-items-center', spinning && 'animate-spin-fast')}
             onAnimationIteration={() => {
               if (!busy) setSpinning(false)
             }}
diff --git a/carpincho-wallet/src/index.css b/carpincho-wallet/src/index.css
index dcfd2113..a618bf6c 100644
--- a/carpincho-wallet/src/index.css
+++ b/carpincho-wallet/src/index.css
@@ -168,6 +168,7 @@
   --animate-soft-pulse: soft-pulse 2600ms ease-in-out infinite;
   --animate-drift: drift 3.2s ease-in-out infinite;
   --animate-logo-shadow: logo-shadow 3.2s ease-in-out infinite;
+  --animate-spin-fast: spin-fast 500ms linear infinite;
 }
 
 @utility w-popup {
@@ -191,6 +192,12 @@
   }
 }
 
+@keyframes spin-fast {
+  to {
+    rotate: 360deg;
+  }
+}
+
 @keyframes slide-down-and-fade {
   from {
     opacity: 0;
diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index 26dc121a..3dd77785 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -96,7 +96,7 @@ describe('ActiveContractsUtil', () => {
     const button = screen.getByRole('button', { name: 'Refresh contracts' })
     await userEvent.click(button)
     // The icon spins on click, independent of how fast the fetch resolves.
-    assert.ok(button.querySelector('.animate-spin'))
+    assert.ok(button.querySelector('.animate-spin-fast'))
     await waitFor(() => assert.equal(calls, 2))
   })
 

From 09bc0ed536ba382a0e1c72512abe5dd2c271ae29 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:08:29 -0300
Subject: [PATCH 105/121] test(carpincho-wallet): cover the refresh spinner
 stop transition

---
 .../utils/ActiveContractsUtil.test.tsx        | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
index 3dd77785..958059e0 100644
--- a/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ActiveContractsUtil.test.tsx
@@ -1,6 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { toast } from '@/components/ui/toast'
@@ -100,6 +100,34 @@ describe('ActiveContractsUtil', () => {
     await waitFor(() => assert.equal(calls, 2))
   })
 
+  it('keeps the icon spinning until the fetch settles, then stops on the next turn', async () => {
+    let calls = 0
+    let resolveRefresh: (contracts: ActiveContract[]) => void = () => {}
+    const listActiveContracts = (() => {
+      calls += 1
+      if (calls === 1) return Promise.resolve([CONTRACT])
+      return new Promise<ActiveContract[]>((resolve) => {
+        resolveRefresh = resolve
+      })
+    }) as typeof ListFn
+    renderUtil(listActiveContracts)
+
+    await screen.findByText('cid-1')
+    const button = screen.getByRole('button', { name: 'Refresh contracts' })
+    await userEvent.click(button)
+    await waitFor(() => assert.equal((button as HTMLButtonElement).disabled, true))
+
+    // A full turn while the fetch is still in flight does not stop the spin.
+    fireEvent.animationIteration(button.querySelector('.animate-spin-fast') as Element)
+    assert.ok(button.querySelector('.animate-spin-fast'))
+
+    // Once the fetch settles, the next completed turn ends the spin.
+    resolveRefresh([CONTRACT])
+    await waitFor(() => assert.equal((button as HTMLButtonElement).disabled, false))
+    fireEvent.animationIteration(button.querySelector('.animate-spin-fast') as Element)
+    await waitFor(() => assert.equal(button.querySelector('.animate-spin-fast'), null))
+  })
+
   it('messages the loading, empty, and no-match states', async () => {
     const pending = (() => new Promise<ActiveContract[]>(() => {})) as typeof ListFn
     renderUtil(pending)

From 3e6d64f398f61d57959ac30b925b8ddd8f43da76 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:14:23 -0300
Subject: [PATCH 106/121] refactor(carpincho-wallet): drop redundant type=text
 on the contract filter input

---
 carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 2b674331..7633358c 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -117,7 +117,6 @@ export const ActiveContractsUtil = ({
         </span>
         <TextInput
           id="contract-filter"
-          type="text"
           value={filterQuery}
           onChange={(event) => setFilterQuery(event.currentTarget.value)}
           placeholder="Template or contract id"

From 69dad28d0a68e61fe0ef60c7c8b8ec7c7b6518be Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:17:52 -0300
Subject: [PATCH 107/121] docs(carpincho-wallet): list REFRESH_ICON and the
 spin-fast keyframe

---
 carpincho-wallet/AGENTS.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index e67de2b3..4636d05c 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -10,10 +10,10 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 |----------|-----------|-------|
 | Language | TypeScript (strict mode) | |
 | Framework | Vite 6 + React 18 | SPA; also builds as a Chrome extension |
-| Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
+| Styling | Tailwind CSS v4 | `@tailwindcss/vite` plugin; utility classes inline in JSX; `src/index.css` declares semantic CSS variables on `:root` / `[data-theme='dark']`, rebinds the `dark:` variant via `@custom-variant`, exposes tokens to Tailwind through `@theme inline`, and holds `@layer base` resets plus named keyframes (`fade-in`, `slide-down-and-fade`, `slide-up-and-fade`, `sheet-up`, `sheet-slide-right`, `slide-in-right`, `slide-in-left`, `soft-pulse`, `drift`, `spin-fast`). A brand-tinted radial top-glow (`--bg-radial`) sits behind the page; there is no paper-grain overlay |
 | Theming | Light / Dark / System selector in the drawer menu (dappbooster brand palette) | `src/theme/ThemeProvider.tsx` owns a persisted `mode` (`light` \| `dark` \| `system`, default `system`), exposes `{ mode, setMode }` via `useTheme()`, resolves `system` against `prefers-color-scheme` (and re-resolves on media changes while in `system`), and writes the resolved `data-theme` on `<html>` after mount. The selector lives in the drawer menu under Theme (`src/components/menu/ThemeMenu.tsx`); there is no header toggle. Use semantic colour utilities (`bg-surface`, `text-foreground`, `border-border`, `bg-primary-soft`, `bg-scrim`, etc.) so styles flip automatically. The dark theme is cool navy (`#14152b`) matching `dappbooster-canton-landing`; the light theme is neutral grey (`#f7f7f7`, primary `#692581`) matching the `dAppBooster` boilerplate. A shared purple→pink brand accent — `--bg-gradient-brand` (`linear-gradient(135deg, #c670e5, #e71d73)`) plus `--shadow-glow` — reveals on primary-button hover and tints the hero wordmark. `--color-success` is green (used for the connected-state indicator); `--color-scrim` is the theme-aware overlay tint used by modal/sheet backdrops |
 | Fonts | Self-hosted via `@fontsource-variable/manrope`, `@fontsource-variable/jetbrains-mono` | Imported once in `src/main.tsx`; works offline in the extension popup. Manrope is the entire UI: `font-display` for hero wordmarks, view-level headings, section markers (heavier weight for hierarchy) and `font-sans` for UI chrome / body / labels / buttons. `font-mono` (JetBrains Mono) is for party IDs, hashes, RPC URLs, JSON payloads, status eyebrows |
-| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, FileDropInput, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`, `CREATE_ICON`, `EXERCISE_ICON`, `CONTRACTS_ICON`, `UPLOAD_ICON`, `DROPLET_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` auto-accept-incoming-transfers toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `UtilsPanel` (Utils — developer ledger tools rendered as a scannable list where each item opens in a centered modal `Sheet`: Create contract, Exercise choice, Active contracts, and Upload DAR, plus a Tap Amulet faucet action row that requests 100 AMT and reports progress via toast — the faucet moved here from the Assets tab); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
+| UI primitives | Radix UI | `@radix-ui/react-avatar`, `@radix-ui/react-collapsible`, `@radix-ui/react-dialog`, `@radix-ui/react-select`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for avatars (the dApp favicon with monogram fallback in `ConnectionFooter`), modals (incl. bottom sheets), the deadline dropdown, on/off toggles, tabs, toasts, and tooltips (auto-positioning with collision detection; `TooltipProvider` mounted once in `App.tsx`); styled with Tailwind via `data-[state=...]` and `data-[highlighted]` variants and animated through the `animate-*` tokens above. **When adding a new interactive component, check the [Radix UI primitives catalogue](https://www.radix-ui.com/primitives) first — prefer a Radix primitive over a hand-rolled implementation.** Local primitives in `src/components/ui/` (Button family, TextInput, PasswordInput, Alert (info / error / warning / success variants), Card, AccountAvatar, PendingActionCard, Sheet, Tabs, Switch, Select, OptionList, Stepper, DangerConfirm, MenuRow, DetailRow, FileDropInput, Collapsible, Copyable, CopyableLabel, JsonView, ToastProvider, Tooltip) compose Tailwind utilities + Radix where applicable; reuse them before writing one-off styling. `TextInput` and `PasswordInput` accept an `error?: boolean` prop that applies a danger border + persistent focus ring (`--shadow-focus-danger`) and sets `aria-invalid`; use this for field-level error state instead of wrapping in an `Alert`. Icon SVG literals live in [`src/components/ui/icons.tsx`](src/components/ui/icons.tsx) (`X_ICON`, `BACK_ICON`, `MENU_ICON`, `CHECK_ICON`, `COPY_ICON`, `EYE_ICON`, `EYE_OFF_ICON`, `GLOBE_ICON`, `INFO_ICON`, `ALERT_TRIANGLE_ICON`, `ALERT_CIRCLE_ICON`, `SPINNER_ICON`, `REFRESH_ICON`, `SEARCH_ICON`, `DISCONNECT_ICON`, `CHEVRON_DOWN_ICON`, `CHEVRON_RIGHT_ICON`, `SEND_ICON`, `RECEIVE_ICON`, `RECEIPT_ICON`, `LOCK_ICON`, `TRASH_ICON`, `WALLET_CONNECT_ICON`, `CONTACTS_ICON`, `CREATE_ICON`, `EXERCISE_ICON`, `CONTRACTS_ICON`, `UPLOAD_ICON`, `DROPLET_ICON`); add new icons there instead of inlining `<svg>`. Custom width/height tokens (`w-popup`, `w-drawer`, `max-h-sheet`) are declared as `@utility` in `src/index.css`. `Sheet` wraps Radix Dialog with the shared overlay, title, and close-button chrome and takes `side: 'bottom' | 'right' | 'center'` (default `'bottom'`); the bottom variant uses `animate-sheet-up`, the right variant uses `animate-sheet-slide-right` (caps at 400px wide clamped by `100vw`, full-height, top-aligned content), and the center variant renders a centered modal dialog (used for account management, token detail, approval prompts, and danger confirmations) -- always use `Sheet` for sheet-style flows. `Button.tsx` also exports `GHOST_BUTTON_CLASS` and `ICON_BUTTON_CLASS` for places that need the interactive base without the button element. Larger shared building blocks live one level up in `src/components/` (`WelcomeHero` for the Setup/Unlock hero; `AccountCard`, `HomeTabs`, `ConnectionFooter` compose the Home view. The Home view is a fixed-height (`h-screen`) flex shell: the account selector and footer (no longer `fixed` — it lives in the column flow, bled full-width with `-mx-3`) stay pinned while only the active tab body scrolls. `HomeTabs` (the `Tabs` underline bar acts as the view title — no heading) holds three tabs, in order: `AssetsPanel` (token balances/holdings, with the `AutoAcceptSetting` auto-accept-incoming-transfers toggle pinned above balance-first token rows — each token row opens a centered `TokenDetailSheet` modal showing the balance, Send/Receive actions, and a per-UTXO holdings list; Send is a multi-step flow inside that same `TokenDetailSheet`: a controlled `SendTokenForm` (recipient field with an icon-only contacts button, an `AmountField` with a MAX button and spendable-balance line, a Radix `Select` deadline, a memo field with an info tooltip, and a Review action) → a `ContactsPicker` screen (the user's other accounts as a fixed 4-row list) → a `SendConfirm` screen (To/Amount/Expires/Memo summary, a collapsible "View data" raw-request payload, and Cancel/Confirm; confirming submits then closes the whole sheet), and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `ActivityPanel` (pending CIP-56 transfers split by direction through `transferDirection`, pinned above the executed-transaction history: incoming transfers the active party can Accept under a "Needs action" group, and the party's own outgoing transfers shown read-only under "Awaiting acceptance" — a transfer to oneself stays incoming so it remains acceptable; each transfer's full metadata opens in a centered `TransferDetailsSheet` via an eye button, and accepting optimistically hides the card while a progress toast tracks the result; beneath the pending groups, `ActivityList` renders executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `UtilsPanel` (Utils — developer ledger tools rendered as a scannable list where each item opens in a centered modal `Sheet`: Create contract, Exercise choice, Active contracts, and Upload DAR, plus a Tap Amulet faucet action row that requests 100 AMT and reports progress via toast — the faucet moved here from the Assets tab); Assets is the default landing tab. The Activity tab is force-mounted so its React Query polling keeps the incoming-transfer count badge live while hidden; the Assets tab is force-mounted too so the auto-accept toggle's optimistic state survives tab switches. WalletConnect URI pairing lives in the drawer via `WalletConnectMenu`, the first root menu screen, web-only; `PasswordStrengthIndicator` renders the live strength meter; `NewPasswordFields` owns the "new password + confirm + strength meter + validity callback" trio used by both the Setup form and the change-password form -- callers control the visible-vs-aria label mode and receive validity via `onValidityChange`). ConnectionSettings renders as a bottom `Sheet` from `HomeView`; account management (add / remove / switch) lives in `AccountsDialog`, a centered `Sheet` opened from `AccountCard` (the active account is omitted from the switch list, since switching to the account you are already on is a no-op). Neither is a full-view replacement. `MenuSheet` (the burger-button drawer, right-anchored, 400px wide capped at `100vw`) drives multi-screen flows by toggling an internal `Screen` state inside one `Sheet`; every new sub-section in the drawer must be added as another `Screen` entry (drill-down with title + back + close + `animate-slide-in-*` transitions) — no accordion-style expansion |
 | Feedback | Toast vs inline Alert vs error prop | Transient system feedback (action results, async errors, network failures, copy confirmations) renders via `toast.*` from [`@/components/ui/toast.ts`](src/components/ui/toast.ts) — never as inline `Alert`. Mount the `ToastProvider` once in `App.tsx`. Field-level error state (mismatched passwords, wrong current password on a verify step, invalid input) uses the `error` prop on `TextInput` / `PasswordInput` (danger border + `aria-invalid`); pair it with `aria-errormessage` pointing at a sibling caption `<p>` when there is a human-readable reason to render. Inline `Alert` is reserved for form-level errors that cannot be attributed to a single field and for persistent contextual hints inside cards. All callers (React components, WalletConnect handlers in `src/wc/`, vault errors, extension bridge) use the imperative `toast` import directly. Variant durations: non-critical variants (`info` / `success` / `warning`) auto-dismiss after 5 s; only `error` (must-read) persists until dismissed. Identical messages collapse — emitting a string message that matches a visible toast of the same variant replaces it with a fresh entry (so rapid repeats like copy clicks collapse to a single toast and restart its timer); distinct messages of the same variant (a copy confirmation vs an RPC test result) stack separately. Toasts render as elevated `bg-surface` cards (border + `shadow-popover`) with a variant-tinted icon badge and a left accent rail, sized to the app content width (`w-popup`). The message body caps at `max-h-40` and scrolls when longer; `error` toasts (only) carry a copy-icon button that copies the rendered message text. Max 3 visible, top-center, newest on top |
 | Package manager | npm | lockfile: `package-lock.json` |
 | Data fetching | @tanstack/react-query | Polls CIP-56 token holdings, pending transfers, and Amulet preapproval status (5 s); a single `QueryClient` is mounted in `App.tsx`. Read/list logic lives in `src/cip56/*`, wrapped by hooks in `src/hooks/*` |

From 0c506b7b3a30fbb767c662dc73b20423b938b320 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:21:13 -0300
Subject: [PATCH 108/121] refactor(carpincho-wallet): drop the unused
 templateId filter from listActiveContracts

---
 carpincho-wallet/src/ledger/contracts.ts       | 4 +---
 carpincho-wallet/test/ledger/contracts.test.ts | 3 +--
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/ledger/contracts.ts b/carpincho-wallet/src/ledger/contracts.ts
index 38c2e7fe..9f085984 100644
--- a/carpincho-wallet/src/ledger/contracts.ts
+++ b/carpincho-wallet/src/ledger/contracts.ts
@@ -30,7 +30,6 @@ export interface ExerciseContractParams {
 
 export interface ListActiveContractsParams {
   partyId: string
-  templateId?: string
 }
 
 interface LedgerEndResponse {
@@ -195,7 +194,6 @@ export const contractMatchesQuery = (contract: ActiveContract, query: string): b
 // Lists active contracts visible to the selected party using JSON Ledger API v2 ACS.
 export const listActiveContracts = async ({
   partyId,
-  templateId,
 }: ListActiveContractsParams): Promise<ActiveContract[]> => {
   const activeAtOffset = await ledgerEnd()
   const entries = await ledgerApi<JsonActiveContractEntry[]>({
@@ -219,6 +217,6 @@ export const listActiveContracts = async ({
   })
   return entries.flatMap((entry) => {
     const contract = activeContractFromEntry(entry)
-    return contract === undefined || !matchesTemplate(contract, templateId) ? [] : [contract]
+    return contract === undefined ? [] : [contract]
   })
 }
diff --git a/carpincho-wallet/test/ledger/contracts.test.ts b/carpincho-wallet/test/ledger/contracts.test.ts
index a9a41395..62bb860c 100644
--- a/carpincho-wallet/test/ledger/contracts.test.ts
+++ b/carpincho-wallet/test/ledger/contracts.test.ts
@@ -222,10 +222,9 @@ describe('ledger contract helpers', () => {
 
     const result = await listActiveContracts({
       partyId: 'alice::party',
-      templateId: 'pkg:Module:Template',
     })
 
-    assert.deepEqual(result, [contracts[0]])
+    assert.deepEqual(result, contracts)
     assert.deepEqual(calls, [
       {
         method: 'ledgerApi',

From 18728971c1be41d0441bbce6ba77c2d5b7ef3548 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:28:14 -0300
Subject: [PATCH 109/121] feat(carpincho-wallet): add encrypted backup
 container type and guard

---
 carpincho-wallet/src/vault/backup.ts       | 43 ++++++++++++++++++
 carpincho-wallet/src/vault/types.ts        |  9 ++++
 carpincho-wallet/test/vault/backup.test.ts | 53 ++++++++++++++++++++++
 3 files changed, 105 insertions(+)
 create mode 100644 carpincho-wallet/src/vault/backup.ts
 create mode 100644 carpincho-wallet/test/vault/backup.test.ts

diff --git a/carpincho-wallet/src/vault/backup.ts b/carpincho-wallet/src/vault/backup.ts
new file mode 100644
index 00000000..df1f151a
--- /dev/null
+++ b/carpincho-wallet/src/vault/backup.ts
@@ -0,0 +1,43 @@
+// Domain-marked container around an EncryptedVault, plus the guard that protects the
+// import path from being fed a raw vault blob (or any unrelated JSON).
+import type { CarpinchoBackup, EncryptedVault } from '@/vault/types'
+
+export const BACKUP_KIND = 'carpincho-backup' as const
+export const BACKUP_VERSION = 1 as const
+
+const isEncryptedVault = (x: unknown): x is EncryptedVault => {
+  if (x === null || typeof x !== 'object') {
+    return false
+  }
+  const o = x as Record<string, unknown>
+  return (
+    o.v === 1 &&
+    typeof o.kdf === 'object' &&
+    o.kdf !== null &&
+    typeof o.cipher === 'object' &&
+    o.cipher !== null
+  )
+}
+
+const isCarpinchoBackup = (x: unknown): x is CarpinchoBackup => {
+  if (x === null || typeof x !== 'object') {
+    return false
+  }
+  const o = x as Record<string, unknown>
+  return o.kind === BACKUP_KIND && o.version === BACKUP_VERSION && isEncryptedVault(o.vault)
+}
+
+export const wrapBackup = (vault: EncryptedVault): CarpinchoBackup => ({
+  kind: BACKUP_KIND,
+  version: BACKUP_VERSION,
+  vault,
+})
+
+// Returns the embedded EncryptedVault, or throws a human-readable error if the value
+// is not a recognizable Carpincho backup container.
+export const parseBackupContainer = (file: unknown): EncryptedVault => {
+  if (!isCarpinchoBackup(file)) {
+    throw new Error("This file isn't a Carpincho backup.")
+  }
+  return file.vault
+}
diff --git a/carpincho-wallet/src/vault/types.ts b/carpincho-wallet/src/vault/types.ts
index e26a247c..e3546b6e 100644
--- a/carpincho-wallet/src/vault/types.ts
+++ b/carpincho-wallet/src/vault/types.ts
@@ -80,3 +80,12 @@ export interface ImportVaultResult {
   skipped: number
   rejected: number
 }
+
+// Self-describing encrypted backup file. `kind` + `version` are the type-confusion guard:
+// an on-disk EncryptedVault has no `kind`, so it can never be imported as a backup.
+// `vault` is encryptVault(JSON.stringify(VaultEnvelope)).
+export interface CarpinchoBackup {
+  kind: 'carpincho-backup'
+  version: 1
+  vault: EncryptedVault
+}
diff --git a/carpincho-wallet/test/vault/backup.test.ts b/carpincho-wallet/test/vault/backup.test.ts
new file mode 100644
index 00000000..ef01c2e3
--- /dev/null
+++ b/carpincho-wallet/test/vault/backup.test.ts
@@ -0,0 +1,53 @@
+import { strict as assert } from 'node:assert'
+import { describe, it } from 'node:test'
+import { parseBackupContainer, wrapBackup } from '@/vault/backup'
+import type { EncryptedVault } from '@/vault/types'
+
+const sampleVault: EncryptedVault = {
+  v: 1,
+  kdf: { name: 'PBKDF2', hash: 'SHA-256', iterations: 600_000, salt: 'c2FsdA==' },
+  cipher: { name: 'AES-GCM', iv: 'aXY=', data: 'ZGF0YQ==' },
+}
+
+describe('vault backup container', () => {
+  it('wraps an EncryptedVault with the domain marker', () => {
+    const backup = wrapBackup(sampleVault)
+    assert.equal(backup.kind, 'carpincho-backup')
+    assert.equal(backup.version, 1)
+    assert.deepEqual(backup.vault, sampleVault)
+  })
+
+  it('returns the embedded vault for a valid container', () => {
+    assert.deepEqual(parseBackupContainer(wrapBackup(sampleVault)), sampleVault)
+  })
+
+  it('rejects a raw EncryptedVault (no kind marker)', () => {
+    assert.throws(() => parseBackupContainer(sampleVault), /isn't a Carpincho backup/i)
+  })
+
+  it('rejects a wrong kind', () => {
+    assert.throws(
+      () => parseBackupContainer({ kind: 'other', version: 1, vault: sampleVault }),
+      /isn't a Carpincho backup/i,
+    )
+  })
+
+  it('rejects an unsupported container version', () => {
+    assert.throws(
+      () => parseBackupContainer({ kind: 'carpincho-backup', version: 2, vault: sampleVault }),
+      /isn't a Carpincho backup/i,
+    )
+  })
+
+  it('rejects a container whose payload is not an EncryptedVault', () => {
+    assert.throws(
+      () => parseBackupContainer({ kind: 'carpincho-backup', version: 1, vault: { nope: true } }),
+      /isn't a Carpincho backup/i,
+    )
+  })
+
+  it('rejects null and non-objects', () => {
+    assert.throws(() => parseBackupContainer(null), /isn't a Carpincho backup/i)
+    assert.throws(() => parseBackupContainer('x'), /isn't a Carpincho backup/i)
+  })
+})

From 074bb570dd27e621ecde5d5c81f5e1e587f3d4c5 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:32:36 -0300
Subject: [PATCH 110/121] feat(carpincho-wallet): add encrypted vault
 export/import to VaultContext

---
 carpincho-wallet/src/vault/VaultContext.tsx   |  42 ++++
 .../test/vault/exportVault.test.tsx           |  55 +++--
 .../test/vault/importVault.test.tsx           | 231 +++++++++++-------
 3 files changed, 213 insertions(+), 115 deletions(-)

diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 438b5dcc..6002cd0e 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -14,6 +14,7 @@ import { clearDirectConnectedOrigins } from '@/extension/directConnections'
 import { broadcastWalletEvent } from '@/extension/eventBroadcast'
 import { persistWalletSnapshot } from '@/extension/walletSnapshot'
 import { accountToCip103Wallet } from '@/provider/accounts'
+import { parseBackupContainer, wrapBackup } from '@/vault/backup'
 import { assertSecureContext, decryptVault, encryptVault } from '@/vault/crypto'
 import { derivePublicKeyBase64, signMessageBase64 } from '@/vault/keypair'
 import { ensurePasswordStrengthReady, isPasswordAcceptable } from '@/vault/passwordStrength'
@@ -39,6 +40,7 @@ import {
 import type {
   AccountPublic,
   AccountSecret,
+  CarpinchoBackup,
   ImportVaultResult,
   TransactionRecord,
   VaultEnvelope,
@@ -114,6 +116,8 @@ export interface VaultContextValue {
   removeAccount: (id: string) => Promise<void>
   exportVault: () => VaultEnvelope
   importVault: (envelope: VaultEnvelope) => Promise<ImportVaultResult>
+  exportEncryptedVault: (password: string) => Promise<CarpinchoBackup>
+  importEncryptedVault: (file: unknown, password: string) => Promise<ImportVaultResult>
   signMessage: (accountId: string, messageBase64: string) => Promise<string>
   recordTransaction: (
     args: Omit<TransactionRecord, 'id' | 'createdAt'>,
@@ -431,6 +435,40 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     [addAccount],
   )
 
+  const exportEncryptedVault = useCallback(
+    async (password: string): Promise<CarpinchoBackup> => {
+      if (unlockedPlaintext === null) {
+        throw new Error('vault locked')
+      }
+      // Enforces file-password == vault-password and re-authenticates the user.
+      if (cachedPassword !== password) {
+        throw new Error('invalid password')
+      }
+      const envelope = exportVault()
+      const vault = await encryptVault(password, JSON.stringify(envelope))
+      return wrapBackup(vault)
+    },
+    [exportVault],
+  )
+
+  const importEncryptedVault = useCallback(
+    async (file: unknown, password: string): Promise<ImportVaultResult> => {
+      if (unlockedPlaintext === null) {
+        throw new Error('vault locked')
+      }
+      const encrypted = parseBackupContainer(file)
+      let plaintext: string
+      try {
+        plaintext = await decryptVault(password, encrypted)
+      } catch {
+        throw new Error('Wrong password for this file.')
+      }
+      const envelope = JSON.parse(plaintext) as VaultEnvelope
+      return await importVault(envelope)
+    },
+    [importVault],
+  )
+
   const verifyPassword = useCallback(
     (password: string): boolean => cachedPassword !== null && cachedPassword === password,
     [],
@@ -581,6 +619,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       removeAccount,
       exportVault,
       importVault,
+      exportEncryptedVault,
+      importEncryptedVault,
       signMessage,
       recordTransaction,
       changePassword,
@@ -602,6 +642,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     removeAccount,
     exportVault,
     importVault,
+    exportEncryptedVault,
+    importEncryptedVault,
     signMessage,
     recordTransaction,
     changePassword,
diff --git a/carpincho-wallet/test/vault/exportVault.test.tsx b/carpincho-wallet/test/vault/exportVault.test.tsx
index ebce90ea..3173a008 100644
--- a/carpincho-wallet/test/vault/exportVault.test.tsx
+++ b/carpincho-wallet/test/vault/exportVault.test.tsx
@@ -1,6 +1,8 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, beforeEach, describe, it } from 'node:test'
 import { act, cleanup, render } from '@testing-library/react'
+import { decryptVault } from '@/vault/crypto'
+import type { CarpinchoBackup, VaultEnvelope } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
 
@@ -18,14 +20,14 @@ const captureVault = (): { ref: { current: VaultContextValue | null } } => {
   return { ref }
 }
 
-describe('VaultContext.exportVault', () => {
+describe('VaultContext.exportEncryptedVault', () => {
   beforeEach(() => localStorage.clear())
   afterEach(() => {
     cleanup()
     localStorage.clear()
   })
 
-  it('builds a v1 envelope of every account, omitting id and createdAt', async () => {
+  it('produces a carpincho-backup whose ciphertext decrypts to the account envelope', async () => {
     const { ref } = captureVault()
     await act(async () => {
       await ref.current?.setup('correct-horse-battery')
@@ -36,27 +38,35 @@ describe('VaultContext.exportVault', () => {
         privateKeyHex: 'aa'.repeat(32),
         publicKeyBase64: 'alice-pub',
       })
-      await ref.current?.addAccount({
-        name: 'bob',
-        partyId: 'bob::ns',
-        network: 'devnet',
-        privateKeyHex: 'bb'.repeat(32),
-        publicKeyBase64: 'bob-pub',
-      })
     })
 
-    const envelope = ref.current?.exportVault()
-    assert.equal(envelope?.v, 1)
-    assert.equal(envelope?.accounts.length, 2)
-    assert.deepEqual(envelope?.accounts[0], {
-      name: 'alice',
-      partyId: 'alice::ns',
-      publicKeyBase64: 'alice-pub',
-      privateKeyHex: 'aa'.repeat(32),
-      network: 'localnet',
+    let backup: CarpinchoBackup | null = null
+    await act(async () => {
+      backup = (await ref.current?.exportEncryptedVault('correct-horse-battery')) ?? null
+    })
+    if (backup === null) {
+      throw new Error('no backup produced')
+    }
+    assert.equal(backup.kind, 'carpincho-backup')
+    assert.equal(backup.version, 1)
+
+    const plaintext = await decryptVault('correct-horse-battery', backup.vault)
+    const envelope = JSON.parse(plaintext) as VaultEnvelope
+    assert.equal(envelope.v, 1)
+    assert.equal(envelope.accounts.length, 1)
+    assert.equal(envelope.accounts[0]?.partyId, 'alice::ns')
+    assert.equal(envelope.accounts[0]?.privateKeyHex, 'aa'.repeat(32))
+  })
+
+  it('throws when the typed password is not the current vault password', async () => {
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup('correct-horse-battery')
     })
-    assert.equal(Object.hasOwn(envelope?.accounts[0] ?? {}, 'id'), false)
-    assert.equal(Object.hasOwn(envelope?.accounts[0] ?? {}, 'createdAt'), false)
+    await assert.rejects(
+      () => ref.current?.exportEncryptedVault('wrong-password-here') ?? Promise.resolve(),
+      /invalid password/i,
+    )
   })
 
   it('throws when the vault is locked', async () => {
@@ -65,6 +75,9 @@ describe('VaultContext.exportVault', () => {
       await ref.current?.setup('correct-horse-battery')
       ref.current?.lock()
     })
-    assert.throws(() => ref.current?.exportVault(), /vault locked/i)
+    await assert.rejects(
+      () => ref.current?.exportEncryptedVault('correct-horse-battery') ?? Promise.resolve(),
+      /vault locked/i,
+    )
   })
 })
diff --git a/carpincho-wallet/test/vault/importVault.test.tsx b/carpincho-wallet/test/vault/importVault.test.tsx
index 2f706618..95bab6bc 100644
--- a/carpincho-wallet/test/vault/importVault.test.tsx
+++ b/carpincho-wallet/test/vault/importVault.test.tsx
@@ -1,8 +1,10 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, beforeEach, describe, it } from 'node:test'
 import { act, cleanup, render } from '@testing-library/react'
+import { wrapBackup } from '@/vault/backup'
+import { encryptVault } from '@/vault/crypto'
 import { generateKeypair } from '@/vault/keypair'
-import type { VaultEnvelope } from '@/vault/types'
+import type { CarpinchoBackup, ImportVaultResult, VaultEnvelope } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 import { type VaultContextValue, VaultProvider } from '@/vault/VaultContext'
 
@@ -20,145 +22,186 @@ const captureVault = (): { ref: { current: VaultContextValue | null } } => {
   return { ref }
 }
 
-const envelopeOf = (accounts: VaultEnvelope['accounts']): VaultEnvelope => ({ v: 1, accounts })
+const SOURCE_PW = 'staple-galaxy-printer'
+const DEST_PW = 'correct-horse-battery'
 
-describe('VaultContext.importVault', () => {
+const makeBackup = async (
+  password: string,
+  accounts: VaultEnvelope['accounts'],
+): Promise<CarpinchoBackup> =>
+  wrapBackup(await encryptVault(password, JSON.stringify({ v: 1, accounts })))
+
+describe('VaultContext.importEncryptedVault', () => {
   beforeEach(() => localStorage.clear())
   afterEach(() => {
     cleanup()
     localStorage.clear()
   })
 
-  it('imports valid entries and reports counts, using the envelope network', async () => {
+  it('decrypts with the file password and merges, re-persisting under the destination vault password', async () => {
     const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
     const { ref } = captureVault()
     await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.setup(DEST_PW)
     })
 
-    let result: { imported: number; skipped: number; rejected: number } | undefined
+    let result: ImportVaultResult | undefined
     await act(async () => {
-      result = await ref.current?.importVault(
-        envelopeOf([
-          {
-            name: 'alice',
-            partyId: 'alice::ns',
-            publicKeyBase64: kp.publicKeyBase64,
-            privateKeyHex: kp.privateKeyHex,
-            network: 'devnet',
-          },
-        ]),
-      )
+      result = await ref.current?.importEncryptedVault(backup, SOURCE_PW)
     })
-
     assert.deepEqual(result, { imported: 1, skipped: 0, rejected: 0 })
-    const alice = ref.current?.accounts.find((a) => a.name === 'alice')
-    assert.equal(alice?.network, 'devnet')
-    assert.equal(alice?.partyId, 'alice::ns')
+
+    // Proves re-encryption under the destination password: lock, then unlock with it.
+    await act(async () => {
+      ref.current?.lock()
+    })
+    await act(async () => {
+      await ref.current?.unlock(DEST_PW)
+    })
+    assert.equal(ref.current?.accounts.find((a) => a.name === 'alice')?.partyId, 'alice::ns')
   })
 
-  it('rejects entries whose key does not derive the stored public key', async () => {
+  it('rejects a wrong file password', async () => {
     const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
     const { ref } = captureVault()
     await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.setup(DEST_PW)
     })
+    await assert.rejects(
+      () => ref.current?.importEncryptedVault(backup, 'totally-wrong-pw') ?? Promise.resolve(),
+      /wrong password for this file/i,
+    )
+  })
 
-    let result: { imported: number; skipped: number; rejected: number } | undefined
+  it('rejects a tampered ciphertext as a wrong password', async () => {
+    const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const head = backup.vault.cipher.data[0] === 'A' ? 'B' : 'A'
+    const tampered: CarpinchoBackup = {
+      ...backup,
+      vault: {
+        ...backup.vault,
+        cipher: { ...backup.vault.cipher, data: head + backup.vault.cipher.data.slice(1) },
+      },
+    }
+    const { ref } = captureVault()
     await act(async () => {
-      result = await ref.current?.importVault(
-        envelopeOf([
-          {
-            name: 'eve',
-            partyId: 'eve::ns',
-            publicKeyBase64: 'not-the-matching-key',
-            privateKeyHex: kp.privateKeyHex,
-            network: 'localnet',
-          },
-        ]),
-      )
+      await ref.current?.setup(DEST_PW)
     })
-
-    assert.deepEqual(result, { imported: 0, skipped: 0, rejected: 1 })
-    assert.equal(ref.current?.accounts.length, 0)
+    await assert.rejects(
+      () => ref.current?.importEncryptedVault(tampered, SOURCE_PW) ?? Promise.resolve(),
+      /wrong password for this file/i,
+    )
   })
 
-  it('rejects malformed partyIds and skips duplicates', async () => {
-    const good = await generateKeypair()
-    const bad = await generateKeypair()
-    const { ref } = captureVault()
-    await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
-      await ref.current?.addAccount({
+  it('rejects a raw EncryptedVault (no backup marker)', async () => {
+    const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
         name: 'alice',
         partyId: 'alice::ns',
-        network: 'localnet',
-        privateKeyHex: good.privateKeyHex,
-        publicKeyBase64: good.publicKeyBase64,
-      })
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup(DEST_PW)
     })
+    await assert.rejects(
+      () => ref.current?.importEncryptedVault(backup.vault, SOURCE_PW) ?? Promise.resolve(),
+      /isn't a Carpincho backup/i,
+    )
+  })
 
-    let result: { imported: number; skipped: number; rejected: number } | undefined
+  it('rejects an unsupported container version', async () => {
+    const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const { ref } = captureVault()
     await act(async () => {
-      result = await ref.current?.importVault(
-        envelopeOf([
-          {
-            name: 'alice',
-            partyId: 'alice::ns',
-            publicKeyBase64: good.publicKeyBase64,
-            privateKeyHex: good.privateKeyHex,
-            network: 'localnet',
-          },
-          {
-            name: 'nocolons',
-            partyId: 'nocolons',
-            publicKeyBase64: bad.publicKeyBase64,
-            privateKeyHex: bad.privateKeyHex,
-            network: 'localnet',
-          },
-        ]),
-      )
+      await ref.current?.setup(DEST_PW)
     })
-
-    assert.deepEqual(result, { imported: 0, skipped: 1, rejected: 1 })
+    await assert.rejects(
+      () =>
+        ref.current?.importEncryptedVault({ ...backup, version: 2 }, SOURCE_PW) ??
+        Promise.resolve(),
+      /isn't a Carpincho backup/i,
+    )
   })
 
-  it('rejects entries whose required fields are not strings', async () => {
+  it('still applies per-entry validation after decryption', async () => {
     const good = await generateKeypair()
+    const bad = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: good.publicKeyBase64,
+        privateKeyHex: good.privateKeyHex,
+        network: 'devnet',
+      },
+      {
+        name: 'eve',
+        partyId: 'eve::ns',
+        publicKeyBase64: 'not-the-matching-key',
+        privateKeyHex: bad.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
     const { ref } = captureVault()
     await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.setup(DEST_PW)
     })
-
-    let result: { imported: number; skipped: number; rejected: number } | undefined
+    let result: ImportVaultResult | undefined
     await act(async () => {
-      result = await ref.current?.importVault(
-        envelopeOf([
-          null as unknown as never,
-          {
-            name: 42 as unknown as string,
-            partyId: 'alice::ns',
-            publicKeyBase64: good.publicKeyBase64,
-            privateKeyHex: good.privateKeyHex,
-            network: 'localnet',
-          },
-        ]),
-      )
+      result = await ref.current?.importEncryptedVault(backup, SOURCE_PW)
     })
-
-    assert.deepEqual(result, { imported: 0, skipped: 0, rejected: 2 })
-    assert.equal(ref.current?.accounts.length, 0)
+    assert.deepEqual(result, { imported: 1, skipped: 0, rejected: 1 })
   })
 
-  it('throws on a malformed envelope', async () => {
+  it('propagates an unsupported inner envelope version', async () => {
+    const backup = wrapBackup(await encryptVault(SOURCE_PW, JSON.stringify({ v: 2, accounts: [] })))
     const { ref } = captureVault()
     await act(async () => {
-      await ref.current?.setup('correct-horse-battery')
+      await ref.current?.setup(DEST_PW)
     })
     await assert.rejects(
-      () =>
-        ref.current?.importVault({ v: 2, accounts: [] } as unknown as VaultEnvelope) ??
-        Promise.resolve(),
+      () => ref.current?.importEncryptedVault(backup, SOURCE_PW) ?? Promise.resolve(),
       /unsupported vault envelope/i,
     )
   })

From 9a29c5f1049379958236ed38a0c2d284c09b6ab7 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:40:39 -0300
Subject: [PATCH 111/121] feat(carpincho-wallet): encrypted, file-only vault
 backup UI

---
 .../src/components/VaultBackupPanel.tsx       | 196 +++++++-----------
 .../src/components/menu/screens.ts            |   4 +-
 .../test/components/MenuSheet.test.tsx        |  17 +-
 .../test/components/VaultBackupPanel.test.tsx | 178 +++++++++++-----
 4 files changed, 214 insertions(+), 181 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 527559be..80b522fd 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -1,41 +1,50 @@
 import { type FormEvent, useState } from 'react'
 import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
+import { Alert } from '@/components/ui/Alert'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { FileDropInput } from '@/components/ui/FileDropInput'
-import { COPY_ICON } from '@/components/ui/icons'
-import { JsonView } from '@/components/ui/JsonView'
-import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
-import { INPUT_CLASS } from '@/components/ui/TextInput'
+import { PasswordInput } from '@/components/ui/PasswordInput'
 import { toast } from '@/components/ui/toast'
-import { copySecret } from '@/utils/clipboard'
-import { cn } from '@/utils/cn'
 import { downloadJson } from '@/utils/download'
-import type { VaultEnvelope } from '@/vault/types'
+import type { CarpinchoBackup } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
+const ENCRYPTED_BANNER =
+  'This file is encrypted with the password of the vault it was exported from.'
+
 const backupFilename = (): string => {
   const d = new Date()
   const p = (n: number): string => String(n).padStart(2, '0')
   const stamp = `${d.getFullYear()}${p(d.getMonth() + 1)}${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}${p(d.getSeconds())}`
-  return `carpincho-vault-${stamp}.json`
+  return `carpincho-backup-${stamp}.json`
 }
 
-// Reveals a backup of every account only after a fresh password re-check. The plaintext
-// envelope lives in state ONLY while this view is mounted; navigating away drops it.
+// Confirms the vault password, encrypts a backup of every account under it, then offers
+// a single download. The encrypted container is safe to hold in state (no plaintext keys).
 export const ExportVaultView = (): JSX.Element => {
   const v = useVault()
-  const [envelope, setEnvelope] = useState<VaultEnvelope | null>(null)
+  const [backup, setBackup] = useState<CarpinchoBackup | null>(null)
+
+  const onVerified = (password: string): void => {
+    void (async () => {
+      try {
+        setBackup(await v.exportEncryptedVault(password))
+      } catch (err) {
+        toast.error(err instanceof Error ? err.message : 'Export failed.')
+      }
+    })()
+  }
 
-  if (envelope === null) {
+  if (backup === null) {
     return (
       <ConfirmPasswordForm
         label="Confirm password"
-        submitLabel="Accept"
-        onVerified={() => setEnvelope(v.exportVault())}
+        submitLabel="Encrypt backup"
+        onVerified={onVerified}
       >
+        <Alert variant="info">{ENCRYPTED_BANNER}</Alert>
         <p className="text-[0.85rem] text-muted-foreground">
-          Confirm your password to reveal a backup of every account in this vault, including their
-          private keys.
+          This is the password used to encrypt your file. You'll need it to import.
         </p>
       </ConfirmPasswordForm>
     )
@@ -43,7 +52,7 @@ export const ExportVaultView = (): JSX.Element => {
 
   const onDownload = (): void => {
     try {
-      downloadJson(backupFilename(), envelope)
+      downloadJson(backupFilename(), backup)
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Download failed.')
     }
@@ -51,27 +60,8 @@ export const ExportVaultView = (): JSX.Element => {
 
   return (
     <div className="flex flex-col gap-4">
-      <JsonView value={envelope} />
-      <div className="flex gap-3">
-        <SecondaryButton
-          className="flex-1"
-          onClick={() =>
-            copySecret(
-              JSON.stringify(envelope, null, 2),
-              'Vault backup copied. Clipboard clears in 60s.',
-            )
-          }
-        >
-          {COPY_ICON}
-          Copy JSON
-        </SecondaryButton>
-        <SecondaryButton
-          className="flex-1"
-          onClick={onDownload}
-        >
-          Download JSON
-        </SecondaryButton>
-      </div>
+      <Alert variant="success">Encrypted backup ready.</Alert>
+      <SecondaryButton onClick={onDownload}>Download backup</SecondaryButton>
     </div>
   )
 }
@@ -80,109 +70,75 @@ interface ImportVaultFormProps {
   onImported?: () => void
 }
 
-// Restores accounts from a pasted or uploaded envelope. No password gate: the vault
-// is already unlocked and the user is adding their own keys.
+// Restores accounts from an encrypted backup file. Decryption (with the file's password)
+// is the gate; the per-entry validation inside importEncryptedVault is defense-in-depth.
 export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Element => {
   const v = useVault()
-  const [text, setText] = useState('')
   const [file, setFile] = useState<File | null>(null)
+  const [password, setPassword] = useState('')
   const [busy, setBusy] = useState(false)
 
-  const runImport = async (raw: string): Promise<void> => {
-    let envelope: VaultEnvelope
+  const onSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+    e.preventDefault()
+    if (file === null) {
+      toast.warning('Choose a backup file.')
+      return
+    }
+    let parsed: unknown
     try {
-      envelope = JSON.parse(raw) as VaultEnvelope
+      parsed = JSON.parse(await file.text())
     } catch {
-      toast.error('Invalid JSON.')
+      toast.error('Invalid file.')
       return
     }
     setBusy(true)
     try {
-      const r = await v.importVault(envelope)
+      const r = await v.importEncryptedVault(parsed, password)
       toast.success(`Imported ${r.imported}, skipped ${r.skipped}, rejected ${r.rejected}.`)
-      // Only leave the screen when something landed; otherwise stay so the counts
-      // (all skipped/rejected) remain readable and the user can retry.
+      // Only leave the screen when something landed; otherwise stay so the counts remain readable.
       if (r.imported > 0) {
         onImported?.()
       }
     } catch (err) {
-      toast.error(`Import vault failed: ${err instanceof Error ? err.message : String(err)}`)
+      toast.error(err instanceof Error ? err.message : 'Import failed.')
     } finally {
       setBusy(false)
     }
   }
 
-  const onPasteSubmit = (e: FormEvent<HTMLFormElement>): void => {
-    e.preventDefault()
-    void runImport(text)
-  }
-
-  const onUploadSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
-    e.preventDefault()
-    if (file === null) {
-      toast.warning('Choose a JSON file.')
-      return
-    }
-    await runImport(await file.text())
-  }
-
   return (
-    <Tabs defaultValue="paste">
-      <p className="mb-4 text-[0.85rem] text-muted-foreground">
-        Restore accounts from a backup created by Export Vault.
-      </p>
-      <TabsList className="mb-4">
-        <TabTrigger value="paste">Paste</TabTrigger>
-        <TabTrigger value="upload">Upload file</TabTrigger>
-      </TabsList>
-      <TabContent value="paste">
-        <form
-          onSubmit={onPasteSubmit}
-          className="flex flex-col gap-4"
-        >
-          <label
-            htmlFor="import-vault-json"
-            className="sr-only"
-          >
-            Vault JSON
-          </label>
-          <textarea
-            id="import-vault-json"
-            className={cn(INPUT_CLASS, 'min-h-40 resize-y font-mono text-[0.82rem]')}
-            value={text}
-            onChange={(e) => setText(e.target.value)}
-            placeholder='{"v":1,"accounts":[...]}'
-            spellCheck={false}
-          />
-          <PrimaryButton
-            type="submit"
-            disabled={busy || text.trim() === ''}
-          >
-            {busy ? 'Importing...' : 'Import vault'}
-          </PrimaryButton>
-        </form>
-      </TabContent>
-      <TabContent value="upload">
-        <form
-          onSubmit={onUploadSubmit}
-          className="flex flex-col gap-4"
-        >
-          <FileDropInput
-            id="import-vault-file"
-            accept=".json,application/json"
-            ariaLabel="Vault JSON file"
-            prompt="Drop a .json file or click to choose."
-            fileName={file?.name ?? null}
-            onSelect={setFile}
-          />
-          <PrimaryButton
-            type="submit"
-            disabled={busy || file === null}
-          >
-            {busy ? 'Importing...' : 'Import vault'}
-          </PrimaryButton>
-        </form>
-      </TabContent>
-    </Tabs>
+    <form
+      onSubmit={onSubmit}
+      className="flex flex-col gap-4"
+    >
+      <Alert variant="info">{ENCRYPTED_BANNER}</Alert>
+      <FileDropInput
+        id="import-vault-file"
+        accept=".json,application/json"
+        ariaLabel="Backup file"
+        prompt="Drop a .json backup or click to choose."
+        fileName={file?.name ?? null}
+        onSelect={setFile}
+      />
+      <div>
+        <label htmlFor="import-vault-password">Backup password</label>
+        <PasswordInput
+          id="import-vault-password"
+          autoComplete="off"
+          placeholder="Backup password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <p className="mt-1.5 text-[0.8rem] leading-relaxed text-muted-foreground">
+          Enter the password you used when you exported this file.
+        </p>
+      </div>
+      <PrimaryButton
+        type="submit"
+        disabled={busy || file === null || password === ''}
+      >
+        {busy ? 'Importing...' : 'Import backup'}
+      </PrimaryButton>
+    </form>
   )
 }
diff --git a/carpincho-wallet/src/components/menu/screens.ts b/carpincho-wallet/src/components/menu/screens.ts
index 1982ecf9..df4bb741 100644
--- a/carpincho-wallet/src/components/menu/screens.ts
+++ b/carpincho-wallet/src/components/menu/screens.ts
@@ -51,12 +51,12 @@ export const SCREENS: Record<Screen, ScreenConfig> = {
   },
   'export-vault': {
     title: 'Export Vault',
-    description: 'Reveal a JSON backup of every account in this vault.',
+    description: 'Download an encrypted backup of every account in this vault.',
     parent: 'vault',
   },
   'import-vault': {
     title: 'Import Vault',
-    description: 'Restore accounts from a vault JSON backup.',
+    description: 'Restore accounts from an encrypted backup file.',
     parent: 'vault',
   },
 }
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index f194f6fc..89767f74 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -32,6 +32,17 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
   removeAccount: async () => undefined,
   exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
   importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
+  exportEncryptedVault: async () =>
+    ({
+      kind: 'carpincho-backup',
+      version: 1,
+      vault: {
+        v: 1,
+        kdf: { name: 'PBKDF2', hash: 'SHA-256', iterations: 600_000, salt: '' },
+        cipher: { name: 'AES-GCM', iv: '', data: '' },
+      },
+    }) as import('@/vault/types').CarpinchoBackup,
+  importEncryptedVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
@@ -134,7 +145,7 @@ describe('MenuSheet', () => {
     assert.ok(screen.getByRole('button', { name: /^export vault$/i }))
   })
 
-  it('drills into Import Vault and shows the paste/upload tabs', async () => {
+  it('drills into Import Vault and shows the file and password fields', async () => {
     const user = userEvent.setup()
     render(
       wrap(
@@ -147,8 +158,8 @@ describe('MenuSheet', () => {
     )
     await user.click(screen.getByRole('button', { name: /^vault$/i }))
     await user.click(screen.getByRole('button', { name: /^import vault$/i }))
-    assert.ok(screen.getByRole('tab', { name: /paste/i }))
-    assert.ok(screen.getByRole('tab', { name: /upload file/i }))
+    assert.ok(screen.getByLabelText(/backup file/i))
+    assert.ok(screen.getByLabelText(/backup password/i))
   })
 
   it('log out calls vault.lock and closes the sheet', async () => {
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
index 0aa9a5f8..5d78ee7d 100644
--- a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -1,14 +1,24 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { ReactNode } from 'react'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { getToastEntries, toast } from '@/components/ui/toast'
 import { ExportVaultView, ImportVaultForm } from '@/components/VaultBackupPanel'
-import type { VaultEnvelope } from '@/vault/types'
+import type { CarpinchoBackup } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
+const sampleBackup: CarpinchoBackup = {
+  kind: 'carpincho-backup',
+  version: 1,
+  vault: {
+    v: 1,
+    kdf: { name: 'PBKDF2', hash: 'SHA-256', iterations: 600_000, salt: 'c2FsdA==' },
+    cipher: { name: 'AES-GCM', iv: 'aXY=', data: 'ZGF0YQ==' },
+  },
+}
+
 const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue =>
   ({
     isLocked: false,
@@ -32,8 +42,8 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
+    exportEncryptedVault: async () => sampleBackup,
+    importEncryptedVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
@@ -57,29 +67,50 @@ describe('ExportVaultView', () => {
     cleanup()
   })
 
-  it('reveals the envelope JSON only after a correct password', async () => {
+  it('encrypts then downloads a backup after a correct password; no copy/plaintext reveal', async () => {
     const user = userEvent.setup()
-    const envelope: VaultEnvelope = {
-      v: 1,
-      accounts: [
-        {
-          name: 'alice',
-          partyId: 'alice::ns',
-          publicKeyBase64: 'pub',
-          privateKeyHex: 'aa',
-          network: 'localnet',
-        },
-      ],
-    }
+    let askedPassword: string | null = null
     renderWithVault(
-      { verifyPassword: () => true, exportVault: () => envelope },
+      {
+        verifyPassword: () => true,
+        exportEncryptedVault: async (pw) => {
+          askedPassword = pw
+          return sampleBackup
+        },
+      },
       <ExportVaultView />,
     )
+
+    // Before verifying: no download, and never a Copy-JSON control.
+    assert.equal(screen.queryByRole('button', { name: /download backup/i }), null)
+    assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
+
+    await user.type(screen.getByLabelText(/confirm password/i), 'correct-horse-battery')
+    await user.click(screen.getByRole('button', { name: /encrypt backup/i }))
+    await waitFor(() => assert.ok(screen.getByRole('button', { name: /download backup/i })))
+    assert.equal(askedPassword, 'correct-horse-battery')
     assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
-    await user.type(screen.getByLabelText(/confirm password/i), 'right-right-1')
-    await user.click(screen.getByRole('button', { name: /accept/i }))
-    // The reveal view (JsonView + Copy/Download) only mounts after a correct password.
-    await waitFor(() => assert.ok(screen.getByRole('button', { name: /copy json/i })))
+
+    // Stub the download surface and assert the encrypted file is written with the right name.
+    const clicks: Array<{ download: string }> = []
+    Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true })
+    const originalCreate = URL.createObjectURL
+    const originalRevoke = URL.revokeObjectURL
+    const originalClick = HTMLAnchorElement.prototype.click
+    URL.createObjectURL = () => 'blob:fake'
+    URL.revokeObjectURL = () => undefined
+    HTMLAnchorElement.prototype.click = function click(this: HTMLAnchorElement): void {
+      clicks.push({ download: this.download })
+    }
+    try {
+      await user.click(screen.getByRole('button', { name: /download backup/i }))
+      assert.equal(clicks.length, 1)
+      assert.match(clicks[0]?.download ?? '', /^carpincho-backup-.*\.json$/)
+    } finally {
+      URL.createObjectURL = originalCreate
+      URL.revokeObjectURL = originalRevoke
+      HTMLAnchorElement.prototype.click = originalClick
+    }
   })
 })
 
@@ -89,61 +120,96 @@ describe('ImportVaultForm', () => {
     cleanup()
   })
 
-  it('parses pasted JSON, calls importVault, and toasts the counts', async () => {
+  it('uploads a file, imports with the typed password, and toasts the counts', async () => {
     const user = userEvent.setup()
-    const calls: VaultEnvelope[] = []
+    const calls: Array<{ file: unknown; password: string }> = []
+    let imported = false
     renderWithVault(
       {
-        importVault: async (env) => {
-          calls.push(env)
+        importEncryptedVault: async (file, password) => {
+          calls.push({ file, password })
           return { imported: 2, skipped: 1, rejected: 0 }
         },
       },
-      <ImportVaultForm />,
+      <ImportVaultForm
+        onImported={() => {
+          imported = true
+        }}
+      />,
     )
-    const envelope: VaultEnvelope = {
-      v: 1,
-      accounts: [
-        {
-          name: 'a',
-          partyId: 'a::ns',
-          publicKeyBase64: 'p',
-          privateKeyHex: 'aa',
-          network: 'localnet',
-        },
-      ],
-    }
-    // userEvent escapes braces; use fireEvent.change to drive the controlled textarea value.
-    const textarea = screen.getByLabelText(/vault json/i) as HTMLTextAreaElement
-    fireEvent.change(textarea, { target: { value: JSON.stringify(envelope) } })
-    await user.click(screen.getByRole('button', { name: /^import vault$/i }))
+
+    const file = new File([JSON.stringify(sampleBackup)], 'backup.json', {
+      type: 'application/json',
+    })
+    await user.upload(screen.getByLabelText(/backup file/i), file)
+    await user.type(screen.getByLabelText(/backup password/i), 'correct-horse-battery')
+    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+
     await waitFor(() => assert.equal(calls.length, 1))
-    assert.deepEqual(calls[0], envelope)
-    const entries = getToastEntries()
-    assert.ok(entries.some((e) => typeof e.message === 'string' && /imported 2/i.test(e.message)))
+    assert.deepEqual(calls[0]?.file, sampleBackup)
+    assert.equal(calls[0]?.password, 'correct-horse-battery')
+    assert.equal(imported, true)
+    assert.ok(
+      getToastEntries().some((e) => typeof e.message === 'string' && /imported 2/i.test(e.message)),
+    )
   })
 
-  it('toasts an error for invalid JSON and does not call importVault', async () => {
+  it('surfaces a wrong-password error as a toast and does not navigate', async () => {
+    const user = userEvent.setup()
+    let imported = false
+    renderWithVault(
+      {
+        importEncryptedVault: async () => {
+          throw new Error('Wrong password for this file.')
+        },
+      },
+      <ImportVaultForm
+        onImported={() => {
+          imported = true
+        }}
+      />,
+    )
+    const file = new File([JSON.stringify(sampleBackup)], 'backup.json', {
+      type: 'application/json',
+    })
+    await user.upload(screen.getByLabelText(/backup file/i), file)
+    await user.type(screen.getByLabelText(/backup password/i), 'wrong-pw-typed')
+    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+
+    await waitFor(() =>
+      assert.ok(
+        getToastEntries().some(
+          (e) => typeof e.message === 'string' && /wrong password for this file/i.test(e.message),
+        ),
+      ),
+    )
+    assert.equal(imported, false)
+  })
+
+  it('rejects an unparseable file before calling import', async () => {
     const user = userEvent.setup()
     let called = 0
     renderWithVault(
       {
-        importVault: async () => {
+        importEncryptedVault: async () => {
           called += 1
           return { imported: 0, skipped: 0, rejected: 0 }
         },
       },
       <ImportVaultForm />,
     )
-    const textarea = screen.getByLabelText(/vault json/i) as HTMLTextAreaElement
-    // Native input event does not drive React's controlled onChange; use fireEvent.change.
-    fireEvent.change(textarea, { target: { value: 'not json' } })
-    await user.click(screen.getByRole('button', { name: /^import vault$/i }))
-    assert.equal(called, 0)
-    assert.ok(
-      getToastEntries().some(
-        (e) => typeof e.message === 'string' && /invalid json/i.test(e.message),
+    const file = new File(['not json'], 'backup.json', { type: 'application/json' })
+    await user.upload(screen.getByLabelText(/backup file/i), file)
+    await user.type(screen.getByLabelText(/backup password/i), 'whatever-pw')
+    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+
+    await waitFor(() =>
+      assert.ok(
+        getToastEntries().some(
+          (e) => typeof e.message === 'string' && /invalid file/i.test(e.message),
+        ),
       ),
     )
+    assert.equal(called, 0)
   })
 })

From 89d107224a26a8870c092a6b0c7272ffd2c2ca99 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:45:04 -0300
Subject: [PATCH 112/121] feat(carpincho-wallet): restore-from-backup option in
 onboarding account step

---
 .../views/onboarding/CreateFirstAccount.tsx   | 20 ++++++++++++++++---
 .../test/views/CreateFirstAccount.test.tsx    | 20 +++++++++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
index 3211874d..c201b87f 100644
--- a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
+++ b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
@@ -1,10 +1,24 @@
 import { CreateAccountForm } from '@/components/CreateAccountForm'
 import { Card } from '@/components/ui/Card'
+import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
+import { ImportVaultForm } from '@/components/VaultBackupPanel'
 
-// First-account creation. Connection lives in its own onboarding step now, so this is
-// just the account form.
+// Step 3 of onboarding. The vault exists and is unlocked, so a restore here merges the
+// backup's accounts under the new local vault password (decrypting with the file's own
+// password). Restore reuses the dashboard import; it never creates a Canton party.
 export const CreateFirstAccount = (): JSX.Element => (
   <Card>
-    <CreateAccountForm showIntro />
+    <Tabs defaultValue="create">
+      <TabsList className="mb-4">
+        <TabTrigger value="create">Create new account</TabTrigger>
+        <TabTrigger value="restore">Restore from backup</TabTrigger>
+      </TabsList>
+      <TabContent value="create">
+        <CreateAccountForm showIntro />
+      </TabContent>
+      <TabContent value="restore">
+        <ImportVaultForm />
+      </TabContent>
+    </Tabs>
   </Card>
 )
diff --git a/carpincho-wallet/test/views/CreateFirstAccount.test.tsx b/carpincho-wallet/test/views/CreateFirstAccount.test.tsx
index 81a7d7f4..13051acc 100644
--- a/carpincho-wallet/test/views/CreateFirstAccount.test.tsx
+++ b/carpincho-wallet/test/views/CreateFirstAccount.test.tsx
@@ -1,11 +1,15 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 import { CreateFirstAccount } from '@/views/onboarding/CreateFirstAccount'
 
-const vaultStub = { addAccount: async () => undefined } as unknown as VaultContextValue
+const vaultStub = {
+  addAccount: async () => undefined,
+  importEncryptedVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
+} as unknown as VaultContextValue
 
 const renderStep = (): void => {
   render(
@@ -20,11 +24,23 @@ const renderStep = (): void => {
 describe('CreateFirstAccount', () => {
   afterEach(() => cleanup())
 
-  it('renders only the account form', () => {
+  it('defaults to the create-account form', () => {
     renderStep()
     assert.ok(screen.getByTestId('add-account-hint-input'))
   })
 
+  it('offers a restore tab that swaps in the encrypted-backup upload form', async () => {
+    const user = userEvent.setup()
+    renderStep()
+    // Restore controls are not mounted until the tab is selected.
+    assert.equal(screen.queryByLabelText(/backup file/i), null)
+    await user.click(screen.getByRole('tab', { name: /restore from backup/i }))
+    assert.ok(screen.getByLabelText(/backup file/i))
+    assert.ok(screen.getByLabelText(/backup password/i))
+    // The restore path never offers party creation.
+    assert.equal(screen.queryByTestId('add-account-hint-input'), null)
+  })
+
   it('does not render the connection footer or its settings control', () => {
     renderStep()
     assert.equal(screen.queryByRole('button', { name: 'Connection settings' }), null)

From bc996b57fc856c2182a7a113e9222b306604abb0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:49:55 -0300
Subject: [PATCH 113/121] refactor(carpincho-wallet): make plaintext envelope
 build/merge internal to the vault

---
 carpincho-wallet/src/vault/VaultContext.tsx   | 22 +++++++------------
 .../test/components/AccountCard.test.tsx      |  2 --
 .../test/components/AccountsDialog.test.tsx   |  2 --
 .../test/components/ActivityPanel.test.tsx    |  2 --
 .../test/components/AssetsPanel.test.tsx      |  2 --
 .../components/AutoAcceptSetting.test.tsx     |  2 --
 .../components/CreateAccountForm.test.tsx     |  2 --
 .../test/components/Header.test.tsx           |  2 --
 .../test/components/HomeTabs.test.tsx         |  2 --
 .../test/components/MenuSheet.test.tsx        |  2 --
 .../test/components/SendConfirm.test.tsx      |  2 --
 .../test/components/TokenDetailSheet.test.tsx |  2 --
 .../test/components/UtilsPanel.test.tsx       |  2 --
 .../test/components/VaultPanel.test.tsx       |  2 --
 .../utils/CreateContractUtil.test.tsx         |  2 --
 .../utils/ExerciseChoiceUtil.test.tsx         |  2 --
 .../test/components/utils/UtilsList.test.tsx  |  2 --
 .../test/views/CreateVault.test.tsx           |  2 --
 18 files changed, 8 insertions(+), 48 deletions(-)

diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index 6002cd0e..d2cf7e90 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -114,8 +114,6 @@ export interface VaultContextValue {
     publicKeyBase64: string
   }) => Promise<AccountPublic>
   removeAccount: (id: string) => Promise<void>
-  exportVault: () => VaultEnvelope
-  importVault: (envelope: VaultEnvelope) => Promise<ImportVaultResult>
   exportEncryptedVault: (password: string) => Promise<CarpinchoBackup>
   importEncryptedVault: (file: unknown, password: string) => Promise<ImportVaultResult>
   signMessage: (accountId: string, messageBase64: string) => Promise<string>
@@ -364,8 +362,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
   )
 
   // Builds a portable backup of every account. Pure projection: omits id/createdAt,
-  // never logged or persisted. Callers must drop the result as soon as it is shown.
-  const exportVault = useCallback((): VaultEnvelope => {
+  // never logged or persisted. Internal: consumed only by exportEncryptedVault.
+  const buildEnvelope = useCallback((): VaultEnvelope => {
     if (unlockedPlaintext === null) {
       throw new Error('vault locked')
     }
@@ -383,8 +381,8 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
 
   // Restores accounts from an envelope. Per entry: the private key must derive the
   // stored public key and the partyId must be `hint::namespace`; duplicates are skipped.
-  // One bad entry never aborts the rest. No Canton fingerprint check (not derivable here).
-  const importVault = useCallback(
+  // Internal: consumed only by importEncryptedVault.
+  const mergeEnvelope = useCallback(
     async (envelope: VaultEnvelope): Promise<ImportVaultResult> => {
       if (unlockedPlaintext === null) {
         throw new Error('vault locked')
@@ -444,11 +442,11 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       if (cachedPassword !== password) {
         throw new Error('invalid password')
       }
-      const envelope = exportVault()
+      const envelope = buildEnvelope()
       const vault = await encryptVault(password, JSON.stringify(envelope))
       return wrapBackup(vault)
     },
-    [exportVault],
+    [buildEnvelope],
   )
 
   const importEncryptedVault = useCallback(
@@ -464,9 +462,9 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
         throw new Error('Wrong password for this file.')
       }
       const envelope = JSON.parse(plaintext) as VaultEnvelope
-      return await importVault(envelope)
+      return await mergeEnvelope(envelope)
     },
-    [importVault],
+    [mergeEnvelope],
   )
 
   const verifyPassword = useCallback(
@@ -617,8 +615,6 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
       setPrimary,
       addAccount,
       removeAccount,
-      exportVault,
-      importVault,
       exportEncryptedVault,
       importEncryptedVault,
       signMessage,
@@ -640,8 +636,6 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     setPrimary,
     addAccount,
     removeAccount,
-    exportVault,
-    importVault,
     exportEncryptedVault,
     importEncryptedVault,
     signMessage,
diff --git a/carpincho-wallet/test/components/AccountCard.test.tsx b/carpincho-wallet/test/components/AccountCard.test.tsx
index 85275ead..3cc6c306 100644
--- a/carpincho-wallet/test/components/AccountCard.test.tsx
+++ b/carpincho-wallet/test/components/AccountCard.test.tsx
@@ -49,8 +49,6 @@ const baseVault = (): VaultContextValue =>
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AccountsDialog.test.tsx b/carpincho-wallet/test/components/AccountsDialog.test.tsx
index 75022fa9..74b649b1 100644
--- a/carpincho-wallet/test/components/AccountsDialog.test.tsx
+++ b/carpincho-wallet/test/components/AccountsDialog.test.tsx
@@ -49,8 +49,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/ActivityPanel.test.tsx b/carpincho-wallet/test/components/ActivityPanel.test.tsx
index cd2a8d14..7dec1b60 100644
--- a/carpincho-wallet/test/components/ActivityPanel.test.tsx
+++ b/carpincho-wallet/test/components/ActivityPanel.test.tsx
@@ -35,8 +35,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index ebcf9693..252eb515 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -39,8 +39,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
index 1d060e4e..32ad056b 100644
--- a/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
+++ b/carpincho-wallet/test/components/AutoAcceptSetting.test.tsx
@@ -35,8 +35,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/CreateAccountForm.test.tsx b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
index fe799d67..4818c1b0 100644
--- a/carpincho-wallet/test/components/CreateAccountForm.test.tsx
+++ b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
@@ -32,8 +32,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
       createdAt: 0,
     }),
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => '',
     recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/Header.test.tsx b/carpincho-wallet/test/components/Header.test.tsx
index 6f569dd0..132d25a3 100644
--- a/carpincho-wallet/test/components/Header.test.tsx
+++ b/carpincho-wallet/test/components/Header.test.tsx
@@ -29,8 +29,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index c0c73fe7..0056c884 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -64,8 +64,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/MenuSheet.test.tsx b/carpincho-wallet/test/components/MenuSheet.test.tsx
index 89767f74..31f1bffc 100644
--- a/carpincho-wallet/test/components/MenuSheet.test.tsx
+++ b/carpincho-wallet/test/components/MenuSheet.test.tsx
@@ -30,8 +30,6 @@ const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValu
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   exportEncryptedVault: async () =>
     ({
       kind: 'carpincho-backup',
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
index 50e26cbe..01385951 100644
--- a/carpincho-wallet/test/components/SendConfirm.test.tsx
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -42,8 +42,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index af8b1e09..bb10681d 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -66,8 +66,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/UtilsPanel.test.tsx b/carpincho-wallet/test/components/UtilsPanel.test.tsx
index 28cd825f..38124582 100644
--- a/carpincho-wallet/test/components/UtilsPanel.test.tsx
+++ b/carpincho-wallet/test/components/UtilsPanel.test.tsx
@@ -48,8 +48,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/VaultPanel.test.tsx b/carpincho-wallet/test/components/VaultPanel.test.tsx
index 07715036..4a88ee90 100644
--- a/carpincho-wallet/test/components/VaultPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultPanel.test.tsx
@@ -30,8 +30,6 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
index a0423228..9a1f7ec3 100644
--- a/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/CreateContractUtil.test.tsx
@@ -34,8 +34,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
index e47a52ad..da294585 100644
--- a/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
+++ b/carpincho-wallet/test/components/utils/ExerciseChoiceUtil.test.tsx
@@ -34,8 +34,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/components/utils/UtilsList.test.tsx b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
index 7501afaf..b9188663 100644
--- a/carpincho-wallet/test/components/utils/UtilsList.test.tsx
+++ b/carpincho-wallet/test/components/utils/UtilsList.test.tsx
@@ -33,8 +33,6 @@ const baseVault = (): VaultContextValue =>
     setPrimary: async () => undefined,
     addAccount: async () => ACCOUNT,
     removeAccount: async () => undefined,
-    exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-    importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
     signMessage: async () => 'signature',
     recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
     changePassword: async () => undefined,
diff --git a/carpincho-wallet/test/views/CreateVault.test.tsx b/carpincho-wallet/test/views/CreateVault.test.tsx
index 489a6f8b..ec3b6c55 100644
--- a/carpincho-wallet/test/views/CreateVault.test.tsx
+++ b/carpincho-wallet/test/views/CreateVault.test.tsx
@@ -28,8 +28,6 @@ const baseVault = (): VaultContextValue => ({
     createdAt: 0,
   }),
   removeAccount: async () => undefined,
-  exportVault: () => ({ v: 1, accounts: [] }) as import('@/vault/types').VaultEnvelope,
-  importVault: async () => ({ imported: 0, skipped: 0, rejected: 0 }),
   signMessage: async () => '',
   recordTransaction: async () => ({}) as unknown as import('@/vault/types').TransactionRecord,
   changePassword: async () => undefined,

From c4a8eacd63ae539190ab456564106cf6a0a1cf04 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 13:57:23 -0300
Subject: [PATCH 114/121] test(carpincho-wallet): cover dedupe-skip,
 malformed-partyId, and locked-vault import

---
 .../test/vault/importVault.test.tsx           | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)

diff --git a/carpincho-wallet/test/vault/importVault.test.tsx b/carpincho-wallet/test/vault/importVault.test.tsx
index 95bab6bc..09582e48 100644
--- a/carpincho-wallet/test/vault/importVault.test.tsx
+++ b/carpincho-wallet/test/vault/importVault.test.tsx
@@ -205,4 +205,66 @@ describe('VaultContext.importEncryptedVault', () => {
       /unsupported vault envelope/i,
     )
   })
+
+  it('counts dedupe-skip and malformed-partyId reject independently', async () => {
+    const alice = await generateKeypair()
+    const dupe = await generateKeypair()
+    const bob = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: alice.publicKeyBase64,
+        privateKeyHex: alice.privateKeyHex,
+        network: 'devnet',
+      },
+      {
+        name: 'alice-dupe',
+        partyId: 'alice::ns',
+        publicKeyBase64: dupe.publicKeyBase64,
+        privateKeyHex: dupe.privateKeyHex,
+        network: 'devnet',
+      },
+      {
+        name: 'bob',
+        partyId: 'bob',
+        publicKeyBase64: bob.publicKeyBase64,
+        privateKeyHex: bob.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup(DEST_PW)
+    })
+    let result: ImportVaultResult | undefined
+    await act(async () => {
+      result = await ref.current?.importEncryptedVault(backup, SOURCE_PW)
+    })
+    assert.deepEqual(result, { imported: 1, skipped: 1, rejected: 1 })
+  })
+
+  it('rejects import when the destination vault is locked', async () => {
+    const kp = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: kp.publicKeyBase64,
+        privateKeyHex: kp.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup(DEST_PW)
+    })
+    await act(async () => {
+      ref.current?.lock()
+    })
+    await assert.rejects(
+      () => ref.current?.importEncryptedVault(backup, SOURCE_PW) ?? Promise.resolve(),
+      /vault locked/i,
+    )
+  })
 })

From 224697cbba440fbf8c4f9e515c8a558f83b211ae Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:11:51 -0300
Subject: [PATCH 115/121] refactor(carpincho-wallet): one-step vault export,
 plainer backup copy, Export/Import button labels

---
 .../src/components/VaultBackupPanel.tsx       | 63 +++++++------------
 .../src/components/menu/MenuSheet.tsx         |  4 +-
 .../test/components/VaultBackupPanel.test.tsx | 38 ++++++-----
 3 files changed, 48 insertions(+), 57 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 80b522fd..cdd83fb2 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -1,17 +1,12 @@
 import { type FormEvent, useState } from 'react'
 import { ConfirmPasswordForm } from '@/components/ConfirmPasswordForm'
-import { Alert } from '@/components/ui/Alert'
-import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { PrimaryButton } from '@/components/ui/Button'
 import { FileDropInput } from '@/components/ui/FileDropInput'
 import { PasswordInput } from '@/components/ui/PasswordInput'
 import { toast } from '@/components/ui/toast'
 import { downloadJson } from '@/utils/download'
-import type { CarpinchoBackup } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
-const ENCRYPTED_BANNER =
-  'This file is encrypted with the password of the vault it was exported from.'
-
 const backupFilename = (): string => {
   const d = new Date()
   const p = (n: number): string => String(n).padStart(2, '0')
@@ -19,50 +14,39 @@ const backupFilename = (): string => {
   return `carpincho-backup-${stamp}.json`
 }
 
-// Confirms the vault password, encrypts a backup of every account under it, then offers
-// a single download. The encrypted container is safe to hold in state (no plaintext keys).
-export const ExportVaultView = (): JSX.Element => {
+interface ExportVaultViewProps {
+  onExported?: () => void
+}
+
+// Confirms the vault password, encrypts a backup of every account under it, and downloads
+// the file directly. The encrypted container never lands in React state and is never logged.
+export const ExportVaultView = ({ onExported }: ExportVaultViewProps): JSX.Element => {
   const v = useVault()
-  const [backup, setBackup] = useState<CarpinchoBackup | null>(null)
 
   const onVerified = (password: string): void => {
     void (async () => {
       try {
-        setBackup(await v.exportEncryptedVault(password))
+        const backup = await v.exportEncryptedVault(password)
+        downloadJson(backupFilename(), backup)
+        toast.success('Encrypted backup downloaded.')
+        onExported?.()
       } catch (err) {
         toast.error(err instanceof Error ? err.message : 'Export failed.')
       }
     })()
   }
 
-  if (backup === null) {
-    return (
-      <ConfirmPasswordForm
-        label="Confirm password"
-        submitLabel="Encrypt backup"
-        onVerified={onVerified}
-      >
-        <Alert variant="info">{ENCRYPTED_BANNER}</Alert>
-        <p className="text-[0.85rem] text-muted-foreground">
-          This is the password used to encrypt your file. You'll need it to import.
-        </p>
-      </ConfirmPasswordForm>
-    )
-  }
-
-  const onDownload = (): void => {
-    try {
-      downloadJson(backupFilename(), backup)
-    } catch (err) {
-      toast.error(err instanceof Error ? err.message : 'Download failed.')
-    }
-  }
-
   return (
-    <div className="flex flex-col gap-4">
-      <Alert variant="success">Encrypted backup ready.</Alert>
-      <SecondaryButton onClick={onDownload}>Download backup</SecondaryButton>
-    </div>
+    <ConfirmPasswordForm
+      label="Confirm password"
+      submitLabel="Export"
+      onVerified={onVerified}
+    >
+      <p className="text-[0.85rem] text-muted-foreground">
+        The current vault's password will be used to encrypt the exported file. You'll need it to
+        import the accounts, so make sure not to lose or forget it.
+      </p>
+    </ConfirmPasswordForm>
   )
 }
 
@@ -111,7 +95,6 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
       onSubmit={onSubmit}
       className="flex flex-col gap-4"
     >
-      <Alert variant="info">{ENCRYPTED_BANNER}</Alert>
       <FileDropInput
         id="import-vault-file"
         accept=".json,application/json"
@@ -137,7 +120,7 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
         type="submit"
         disabled={busy || file === null || password === ''}
       >
-        {busy ? 'Importing...' : 'Import backup'}
+        {busy ? 'Importing...' : 'Import'}
       </PrimaryButton>
     </form>
   )
diff --git a/carpincho-wallet/src/components/menu/MenuSheet.tsx b/carpincho-wallet/src/components/menu/MenuSheet.tsx
index bafc521c..3d2c0ed7 100644
--- a/carpincho-wallet/src/components/menu/MenuSheet.tsx
+++ b/carpincho-wallet/src/components/menu/MenuSheet.tsx
@@ -98,7 +98,9 @@ export const MenuSheet = ({ open, onOpenChange }: MenuSheetProps): JSX.Element =
         {screen === 'theme' && <ThemeMenu />}
         {screen === 'password' && <PasswordForm />}
         {screen === 'auto-lock' && <AutoLockList />}
-        {screen === 'export-vault' && <ExportVaultView />}
+        {screen === 'export-vault' && (
+          <ExportVaultView onExported={() => handleOpenChange(false)} />
+        )}
         {screen === 'import-vault' && (
           <ImportVaultForm onImported={() => handleOpenChange(false)} />
         )}
diff --git a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
index 5d78ee7d..76d6e93d 100644
--- a/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
+++ b/carpincho-wallet/test/components/VaultBackupPanel.test.tsx
@@ -67,9 +67,10 @@ describe('ExportVaultView', () => {
     cleanup()
   })
 
-  it('encrypts then downloads a backup after a correct password; no copy/plaintext reveal', async () => {
+  it('downloads the encrypted backup, toasts, and closes the menu after a correct password', async () => {
     const user = userEvent.setup()
     let askedPassword: string | null = null
+    let closed = false
     renderWithVault(
       {
         verifyPassword: () => true,
@@ -78,20 +79,17 @@ describe('ExportVaultView', () => {
           return sampleBackup
         },
       },
-      <ExportVaultView />,
+      <ExportVaultView
+        onExported={() => {
+          closed = true
+        }}
+      />,
     )
 
-    // Before verifying: no download, and never a Copy-JSON control.
-    assert.equal(screen.queryByRole('button', { name: /download backup/i }), null)
-    assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
-
-    await user.type(screen.getByLabelText(/confirm password/i), 'correct-horse-battery')
-    await user.click(screen.getByRole('button', { name: /encrypt backup/i }))
-    await waitFor(() => assert.ok(screen.getByRole('button', { name: /download backup/i })))
-    assert.equal(askedPassword, 'correct-horse-battery')
+    // Never a Copy-JSON control, and no intermediate reveal step.
     assert.equal(screen.queryByRole('button', { name: /copy json/i }), null)
 
-    // Stub the download surface and assert the encrypted file is written with the right name.
+    // Export is a single action: verifying the password downloads immediately.
     const clicks: Array<{ download: string }> = []
     Object.defineProperty(window, 'isSecureContext', { value: true, configurable: true })
     const originalCreate = URL.createObjectURL
@@ -103,9 +101,17 @@ describe('ExportVaultView', () => {
       clicks.push({ download: this.download })
     }
     try {
-      await user.click(screen.getByRole('button', { name: /download backup/i }))
-      assert.equal(clicks.length, 1)
+      await user.type(screen.getByLabelText(/confirm password/i), 'correct-horse-battery')
+      await user.click(screen.getByRole('button', { name: /^export$/i }))
+      await waitFor(() => assert.equal(clicks.length, 1))
       assert.match(clicks[0]?.download ?? '', /^carpincho-backup-.*\.json$/)
+      assert.equal(askedPassword, 'correct-horse-battery')
+      assert.equal(closed, true)
+      assert.ok(
+        getToastEntries().some(
+          (e) => typeof e.message === 'string' && /backup downloaded/i.test(e.message),
+        ),
+      )
     } finally {
       URL.createObjectURL = originalCreate
       URL.revokeObjectURL = originalRevoke
@@ -143,7 +149,7 @@ describe('ImportVaultForm', () => {
     })
     await user.upload(screen.getByLabelText(/backup file/i), file)
     await user.type(screen.getByLabelText(/backup password/i), 'correct-horse-battery')
-    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+    await user.click(screen.getByRole('button', { name: /^import$/i }))
 
     await waitFor(() => assert.equal(calls.length, 1))
     assert.deepEqual(calls[0]?.file, sampleBackup)
@@ -174,7 +180,7 @@ describe('ImportVaultForm', () => {
     })
     await user.upload(screen.getByLabelText(/backup file/i), file)
     await user.type(screen.getByLabelText(/backup password/i), 'wrong-pw-typed')
-    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+    await user.click(screen.getByRole('button', { name: /^import$/i }))
 
     await waitFor(() =>
       assert.ok(
@@ -201,7 +207,7 @@ describe('ImportVaultForm', () => {
     const file = new File(['not json'], 'backup.json', { type: 'application/json' })
     await user.upload(screen.getByLabelText(/backup file/i), file)
     await user.type(screen.getByLabelText(/backup password/i), 'whatever-pw')
-    await user.click(screen.getByRole('button', { name: /^import backup$/i }))
+    await user.click(screen.getByRole('button', { name: /^import$/i }))
 
     await waitFor(() =>
       assert.ok(

From a7cbc634757525c6d3121792a534b807f83b88a6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:23:54 -0300
Subject: [PATCH 116/121] perf(carpincho-wallet): re-encrypt once per batch
 import, not per account

Extract an in-memory insertAccount helper shared by addAccount and the
import merge so a multi-account restore runs a single PBKDF2 derive +
AES-GCM re-encryption and one accountsChanged broadcast instead of one
per imported account.
---
 carpincho-wallet/src/vault/VaultContext.tsx   | 79 +++++++++++--------
 .../test/vault/importVault.test.tsx           | 40 ++++++++++
 2 files changed, 84 insertions(+), 35 deletions(-)

diff --git a/carpincho-wallet/src/vault/VaultContext.tsx b/carpincho-wallet/src/vault/VaultContext.tsx
index d2cf7e90..49e6d19b 100644
--- a/carpincho-wallet/src/vault/VaultContext.tsx
+++ b/carpincho-wallet/src/vault/VaultContext.tsx
@@ -56,6 +56,14 @@ const AUTO_LOCK_MS: Record<AutoLockOption, number | null> = {
 }
 const MAX_TRANSACTION_HISTORY = 50
 
+interface NewAccountArgs {
+  name: string
+  partyId: string
+  network: string
+  privateKeyHex: string
+  publicKeyBase64: string
+}
+
 let unlockedPlaintext: VaultPlaintext | null = null
 let cachedPassword: string | null = null
 
@@ -106,13 +114,7 @@ export interface VaultContextValue {
   primary: AccountPublic | null
   transactions: TransactionRecord[]
   setPrimary: (id: string) => Promise<void>
-  addAccount: (args: {
-    name: string
-    partyId: string
-    network: string
-    privateKeyHex: string
-    publicKeyBase64: string
-  }) => Promise<AccountPublic>
+  addAccount: (args: NewAccountArgs) => Promise<AccountPublic>
   removeAccount: (id: string) => Promise<void>
   exportEncryptedVault: (password: string) => Promise<CarpinchoBackup>
   importEncryptedVault: (file: unknown, password: string) => Promise<ImportVaultResult>
@@ -272,39 +274,40 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
     [persist, bump, accountsChangedPayload],
   )
 
+  // In-memory insert shared by addAccount and the import merge: pushes the secret
+  // and seeds primary if unset. Caller owns persist()/bump()/broadcast so a batch
+  // import re-encrypts once instead of once per account. Assumes an unlocked vault.
+  const insertAccount = useCallback((args: NewAccountArgs): AccountSecret => {
+    if (unlockedPlaintext === null) {
+      throw new Error('vault locked')
+    }
+    const secret: AccountSecret = {
+      id: generateId(),
+      name: args.name,
+      partyId: args.partyId,
+      privateKeyHex: args.privateKeyHex,
+      publicKeyBase64: args.publicKeyBase64,
+      network: args.network,
+      createdAt: Date.now(),
+    }
+    unlockedPlaintext.accounts.push(secret)
+    if (unlockedPlaintext.primaryAccountId === null) {
+      unlockedPlaintext.primaryAccountId = secret.id
+    }
+    return secret
+  }, [])
+
   // Caller supplies the keypair (already used to create the Canton party);
   // generating one here would desync the vault entry from the account.
   const addAccount = useCallback(
-    async (args: {
-      name: string
-      partyId: string
-      network: string
-      privateKeyHex: string
-      publicKeyBase64: string
-    }): Promise<AccountPublic> => {
-      if (unlockedPlaintext === null) {
-        throw new Error('vault locked')
-      }
-      const id = generateId()
-      const secret: AccountSecret = {
-        id,
-        name: args.name,
-        partyId: args.partyId,
-        privateKeyHex: args.privateKeyHex,
-        publicKeyBase64: args.publicKeyBase64,
-        network: args.network,
-        createdAt: Date.now(),
-      }
-      unlockedPlaintext.accounts.push(secret)
-      if (unlockedPlaintext.primaryAccountId === null) {
-        unlockedPlaintext.primaryAccountId = id
-      }
+    async (args: NewAccountArgs): Promise<AccountPublic> => {
+      const secret = insertAccount(args)
       await persist()
       bump()
       void broadcastWalletEvent('accountsChanged', accountsChangedPayload())
-      return toPublic(secret, unlockedPlaintext.primaryAccountId)
+      return toPublic(secret, unlockedPlaintext?.primaryAccountId ?? null)
     },
-    [persist, bump, accountsChangedPayload],
+    [insertAccount, persist, bump, accountsChangedPayload],
   )
 
   const recordTransaction = useCallback(
@@ -425,12 +428,18 @@ export const VaultProvider = ({ children }: PropsWithChildren): JSX.Element => {
           skipped += 1
           continue
         }
-        await addAccount({ name, partyId, network, privateKeyHex, publicKeyBase64 })
+        insertAccount({ name, partyId, network, privateKeyHex, publicKeyBase64 })
         imported += 1
       }
+      // Re-encrypt once for the whole batch rather than per account.
+      if (imported > 0) {
+        await persist()
+        bump()
+        void broadcastWalletEvent('accountsChanged', accountsChangedPayload())
+      }
       return { imported, skipped, rejected }
     },
-    [addAccount],
+    [insertAccount, persist, bump, accountsChangedPayload],
   )
 
   const exportEncryptedVault = useCallback(
diff --git a/carpincho-wallet/test/vault/importVault.test.tsx b/carpincho-wallet/test/vault/importVault.test.tsx
index 09582e48..c769ac00 100644
--- a/carpincho-wallet/test/vault/importVault.test.tsx
+++ b/carpincho-wallet/test/vault/importVault.test.tsx
@@ -244,6 +244,46 @@ describe('VaultContext.importEncryptedVault', () => {
     assert.deepEqual(result, { imported: 1, skipped: 1, rejected: 1 })
   })
 
+  it('persists every account from a multi-account batch in one re-encryption', async () => {
+    const alice = await generateKeypair()
+    const bob = await generateKeypair()
+    const backup = await makeBackup(SOURCE_PW, [
+      {
+        name: 'alice',
+        partyId: 'alice::ns',
+        publicKeyBase64: alice.publicKeyBase64,
+        privateKeyHex: alice.privateKeyHex,
+        network: 'devnet',
+      },
+      {
+        name: 'bob',
+        partyId: 'bob::ns',
+        publicKeyBase64: bob.publicKeyBase64,
+        privateKeyHex: bob.privateKeyHex,
+        network: 'devnet',
+      },
+    ])
+    const { ref } = captureVault()
+    await act(async () => {
+      await ref.current?.setup(DEST_PW)
+    })
+    let result: ImportVaultResult | undefined
+    await act(async () => {
+      result = await ref.current?.importEncryptedVault(backup, SOURCE_PW)
+    })
+    assert.deepEqual(result, { imported: 2, skipped: 0, rejected: 0 })
+
+    // Both must survive a lock/unlock, proving the batch was re-encrypted to disk.
+    await act(async () => {
+      ref.current?.lock()
+    })
+    await act(async () => {
+      await ref.current?.unlock(DEST_PW)
+    })
+    const names = ref.current?.accounts.map((a) => a.name).sort()
+    assert.deepEqual(names, ['alice', 'bob'])
+  })
+
   it('rejects import when the destination vault is locked', async () => {
     const kp = await generateKeypair()
     const backup = await makeBackup(SOURCE_PW, [

From 96bec02d8e9ce579cf14bbf084207db2c2bc475b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:28:46 -0300
Subject: [PATCH 117/121] refactor(carpincho-wallet): reuse isRecord guard,
 single source for backup markers

Replace the hand-rolled null/object narrowing in backup.ts with the shared
isRecord guard, type BACKUP_KIND/BACKUP_VERSION by the CarpinchoBackup
interface so the on-disk format markers have one source of truth, and drop
the export-only IIFE in the export panel for a named handler.
---
 .../src/components/VaultBackupPanel.tsx       | 22 +++++++-------
 carpincho-wallet/src/vault/backup.ts          | 30 +++++--------------
 2 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index cdd83fb2..8eadd567 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -23,24 +23,22 @@ interface ExportVaultViewProps {
 export const ExportVaultView = ({ onExported }: ExportVaultViewProps): JSX.Element => {
   const v = useVault()
 
-  const onVerified = (password: string): void => {
-    void (async () => {
-      try {
-        const backup = await v.exportEncryptedVault(password)
-        downloadJson(backupFilename(), backup)
-        toast.success('Encrypted backup downloaded.')
-        onExported?.()
-      } catch (err) {
-        toast.error(err instanceof Error ? err.message : 'Export failed.')
-      }
-    })()
+  const exportBackup = async (password: string): Promise<void> => {
+    try {
+      const backup = await v.exportEncryptedVault(password)
+      downloadJson(backupFilename(), backup)
+      toast.success('Encrypted backup downloaded.')
+      onExported?.()
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : 'Export failed.')
+    }
   }
 
   return (
     <ConfirmPasswordForm
       label="Confirm password"
       submitLabel="Export"
-      onVerified={onVerified}
+      onVerified={(password) => void exportBackup(password)}
     >
       <p className="text-[0.85rem] text-muted-foreground">
         The current vault's password will be used to encrypt the exported file. You'll need it to
diff --git a/carpincho-wallet/src/vault/backup.ts b/carpincho-wallet/src/vault/backup.ts
index df1f151a..9c4889da 100644
--- a/carpincho-wallet/src/vault/backup.ts
+++ b/carpincho-wallet/src/vault/backup.ts
@@ -1,31 +1,17 @@
 // Domain-marked container around an EncryptedVault, plus the guard that protects the
 // import path from being fed a raw vault blob (or any unrelated JSON).
+import { isRecord } from '@/extension/messages'
 import type { CarpinchoBackup, EncryptedVault } from '@/vault/types'
 
-export const BACKUP_KIND = 'carpincho-backup' as const
-export const BACKUP_VERSION = 1 as const
+// Typed by the interface so the on-disk format markers have a single source of truth.
+const BACKUP_KIND: CarpinchoBackup['kind'] = 'carpincho-backup'
+const BACKUP_VERSION: CarpinchoBackup['version'] = 1
 
-const isEncryptedVault = (x: unknown): x is EncryptedVault => {
-  if (x === null || typeof x !== 'object') {
-    return false
-  }
-  const o = x as Record<string, unknown>
-  return (
-    o.v === 1 &&
-    typeof o.kdf === 'object' &&
-    o.kdf !== null &&
-    typeof o.cipher === 'object' &&
-    o.cipher !== null
-  )
-}
+const isEncryptedVault = (x: unknown): x is EncryptedVault =>
+  isRecord(x) && x.v === 1 && isRecord(x.kdf) && isRecord(x.cipher)
 
-const isCarpinchoBackup = (x: unknown): x is CarpinchoBackup => {
-  if (x === null || typeof x !== 'object') {
-    return false
-  }
-  const o = x as Record<string, unknown>
-  return o.kind === BACKUP_KIND && o.version === BACKUP_VERSION && isEncryptedVault(o.vault)
-}
+const isCarpinchoBackup = (x: unknown): x is CarpinchoBackup =>
+  isRecord(x) && x.kind === BACKUP_KIND && x.version === BACKUP_VERSION && isEncryptedVault(x.vault)
 
 export const wrapBackup = (vault: EncryptedVault): CarpinchoBackup => ({
   kind: BACKUP_KIND,

From d6fd182931d524c22eba7a4bc1965ebe0a9b11f3 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:32:22 -0300
Subject: [PATCH 118/121] docs(carpincho-wallet): sync vault backup API and
 onboarding restore in architecture

VaultContext now exposes exportEncryptedVault/importEncryptedVault over an
encrypted CarpinchoBackup container (plaintext envelope build/merge is
internal), add the backup.ts module, and note the create-first-account
restore-from-backup tab.
---
 carpincho-wallet/architecture.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 4505a858..7330c87a 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -84,8 +84,9 @@ Transient system feedback — action results, async errors, network failures, co
 
 The vault is the security core of the wallet. It holds encrypted account secrets in `localStorage` and exposes a React context so views can read and mutate wallet state without ever touching the raw ciphertext.
 
-- **`VaultContext.tsx`** — React context that owns all in-memory plaintext. Module-scope closures hide the decrypted vault and session password from browser DevTools. Exposes `exportVault()` / `importVault()` for a whole-vault JSON backup envelope (`{ v: 1, accounts: [{ name, partyId, publicKeyBase64, privateKeyHex, network }] }`); import validates each entry's Ed25519 derivation and partyId shape, skips duplicates, and reuses `addAccount`.
+- **`VaultContext.tsx`** — React context that owns all in-memory plaintext. Module-scope closures hide the decrypted vault and session password from browser DevTools. Exposes `exportEncryptedVault(password)` / `importEncryptedVault(file, password)`: export returns a `CarpinchoBackup` — an encrypted container (`encryptVault(JSON.stringify(envelope))`), never plaintext — and import decrypts the file with its own password before merging. The plaintext `VaultEnvelope` (`{ v: 1, accounts: [{ name, partyId, publicKeyBase64, privateKeyHex, network }] }`) is now built and merged internally via the `buildEnvelope` / `mergeEnvelope` helpers; only the encrypted container crosses the public API. Import still validates each entry's Ed25519 derivation and partyId shape and skips duplicates, but inserts accounts in-memory through a shared `insertAccount` helper and re-encrypts the whole batch once (a single persist) rather than persisting per account. Both export and import refuse when the vault is locked.
 - **`crypto.ts`** — Stateless encryption helpers: PBKDF2-HMAC-SHA256 (600 000 iterations) for key derivation; AES-256-GCM via `SubtleCrypto` for encryption/decryption.
+- **`backup.ts`** — Owns the domain-marked `CarpinchoBackup` container: `wrapBackup` wraps an `EncryptedVault` with `kind: 'carpincho-backup'` + `version`, and `parseBackupContainer` is the type-confusion guard that rejects a raw on-disk `EncryptedVault` (which has no `kind`) or any unrelated JSON before it reaches decryption.
 - **`storage.ts`** — Two-step localStorage write (`KEY_VAULT_NEXT` then `KEY_VAULT`) for crash-safe rotation. On load, checks for an interrupted rotation and recovers automatically.
 - **`keypair.ts`** — Ed25519 sign/verify wrappers around `@noble/ed25519`.
 - **`sessionUnlock.ts`** — Caches the session password and the absolute auto-lock deadline (`lockAt`) in `sessionStorage` (or `chrome.storage.session` when running as an extension) so the vault can survive page reloads while still honouring the configured idle timeout.
@@ -212,7 +213,7 @@ Three providers wrap the app. `ThemeProvider` is mounted outermost (in `src/main
       </TooltipProvider>
 ```
 
-There is no router. `Shell` picks one view from `useVault()` via the pure `selectShellView` helper in `src/App.tsx`, branching on `hasVault`, `isLocked`, and `accounts.length`: no vault → `OnboardingFlow` starting at the create-vault step; unlocked vault with no account yet → `OnboardingFlow` which runs the Configure RPC step (gated on a wallet-service probe) then the create-first-account step; locked vault → `UnlockView`; unlocked vault with at least one account → `HomeView`. While `useVault()` reports `isLoading`, `Shell` renders a centred spinner instead of any view so the session-restore decision lands in one paint and the Unlock screen never flashes.
+There is no router. `Shell` picks one view from `useVault()` via the pure `selectShellView` helper in `src/App.tsx`, branching on `hasVault`, `isLocked`, and `accounts.length`: no vault → `OnboardingFlow` starting at the create-vault step; unlocked vault with no account yet → `OnboardingFlow` which runs the Configure RPC step (gated on a wallet-service probe) then the create-first-account step, which presents two tabs — "Create new account" and "Restore from backup", where the restore tab reuses the dashboard `ImportVaultForm` to merge a backup's accounts under the new local vault password and never creates a Canton party; locked vault → `UnlockView`; unlocked vault with at least one account → `HomeView`. While `useVault()` reports `isLoading`, `Shell` renders a centred spinner instead of any view so the session-restore decision lands in one paint and the Unlock screen never flashes.
 
 The Menu drawer lives in `src/components/menu/`: `MenuSheet.tsx` is the navigation orchestrator (wraps the shared `Sheet` primitive with `side="right"`, opening as a 400px-wide top-aligned panel clamped by `100vw` that slides in via `animate-sheet-slide-right`), `screens.ts` holds the `Screen` union plus the `SCREENS` metadata map and the `MENU_LISTS` row data for the navigation-list screens, `MenuList.tsx` renders those rows, and `ThemeMenu.tsx` is the Theme leaf. It manages internal screen state (`root` → `theme` | `vault`; `vault` → `password` | `auto-lock` | `export-vault` | `import-vault`); each in-drawer transition uses `animate-slide-in-right` (forward) or `animate-slide-in-left` (back). Navigation-list screens are data-driven via `MENU_LISTS`; leaf screens (`theme`, `password`, `auto-lock`, `export-vault`, `import-vault`) render a component. Every new option must be added as another `Screen` with an entry in the `SCREENS` map (`title`, `description`, `parent`); accordion-style expansion inside a screen is disallowed.
 

From 83a4126107630ad372491d8f3fd2e08e7a6d6c0e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 19 Jun 2026 14:46:03 -0300
Subject: [PATCH 119/121] test(carpincho-wallet): add stable data-testid
 selectors across UI flows

Add data-testid hooks to every interactive control, list row, modal/sheet
container, and copy affordance across onboarding, accounts, assets/send/receive,
activity & transfers, utils/ledger tools, DAR upload, connection settings &
footer, and the drawer menu, so end-to-end tooling never relies on text, role,
or DOM-position selectors.

Extend the prop-fixed shared primitives that hide their DOM node (Sheet, Select,
TabTrigger, MenuRow, FileDropInput, Collapsible, DetailRow, AmountField,
ConfirmPasswordForm) with a forwarded testId prop, matching the existing
Copyable/DangerConfirm convention.

Document data-testid coverage as a hard requirement for new UI in AGENTS.md.
---
 carpincho-wallet/AGENTS.md                    |  9 +++++
 .../src/components/AccountsDialog.tsx         |  1 +
 .../src/components/ActivityList.tsx           |  2 +
 .../src/components/AmountField.tsx            |  4 ++
 .../src/components/AutoAcceptSetting.tsx      |  1 +
 .../src/components/ConfirmPasswordForm.tsx    | 12 +++++-
 .../src/components/ConnectionFooter.tsx       |  2 +
 .../src/components/ContactsPicker.tsx         |  2 +
 .../src/components/DarUploadPanel.tsx         |  2 +
 carpincho-wallet/src/components/Header.tsx    |  1 +
 carpincho-wallet/src/components/HomeTabs.tsx  | 19 +++++++--
 .../src/components/SendConfirm.tsx            |  7 +++-
 .../src/components/SendTokenForm.tsx          |  6 +++
 .../src/components/TokenDetailSheet.tsx       | 12 +++++-
 .../src/components/TokenReceive.tsx           |  1 +
 carpincho-wallet/src/components/TokenRow.tsx  |  2 +
 .../src/components/TransferCard.tsx           |  6 +++
 .../src/components/TransferDetailsSheet.tsx   |  1 +
 .../src/components/UtilsPanel.tsx             |  1 +
 .../src/components/VaultBackupPanel.tsx       |  5 +++
 .../src/components/menu/MenuList.tsx          |  1 +
 .../src/components/menu/MenuSheet.tsx         |  1 +
 .../src/components/ui/Collapsible.tsx         |  3 ++
 .../src/components/ui/DetailRow.tsx           |  4 +-
 .../src/components/ui/FileDropInput.tsx       |  3 ++
 .../src/components/ui/MenuRow.tsx             | 10 ++++-
 carpincho-wallet/src/components/ui/Select.tsx |  3 ++
 carpincho-wallet/src/components/ui/Sheet.tsx  |  7 +++-
 carpincho-wallet/src/components/ui/Tabs.tsx   |  3 ++
 .../components/utils/ActiveContractsUtil.tsx  | 12 +++++-
 .../components/utils/CreateContractUtil.tsx   |  2 +
 .../components/utils/ExerciseChoiceUtil.tsx   |  4 ++
 .../src/components/utils/UtilsList.tsx        |  2 +
 carpincho-wallet/src/utils/clipboard.ts       | 40 +------------------
 .../src/views/ConnectionSettingsView.tsx      |  3 ++
 carpincho-wallet/src/views/HomeView.tsx       |  3 ++
 .../views/onboarding/CreateFirstAccount.tsx   | 14 ++++++-
 carpincho-wallet/test/utils/clipboard.test.ts | 28 -------------
 38 files changed, 159 insertions(+), 80 deletions(-)
 delete mode 100644 carpincho-wallet/test/utils/clipboard.test.ts

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index 4636d05c..e754772d 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -29,6 +29,15 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 - **Imports:** every import that resolves inside `src/` must use the `@/*` alias (e.g. `import { Foo } from '@/components/Foo'`); relative `./` and `../` paths are banned by Biome's `style/noRestrictedImports`. Do **not** add the `.ts` / `.tsx` extension on import paths — `moduleResolution: bundler` (Vite + the tsx test loader) resolves extensionless. Because resolution is extensionless, two modules in the same directory must not differ only by case and extension (e.g. `Toast.tsx` vs `toast.ts`), or the import becomes ambiguous on a case-insensitive filesystem. The alias is declared in `tsconfig.app.json`, `test/tsconfig.json`, and `vite.config.ts`
 - **Functional style:** prefer `const` with expression-returning forms (ternaries, IIFEs, helper functions, lookup objects, destructured ternaries) over `let` + reassignment. Reach for `let` only when no clean expression form exists.
 
+## Test selectors (`data-testid`)
+
+Every interactive or assertion-worthy element ships a stable `data-testid` so end-to-end tooling never falls back on text, role, or DOM-position selectors. This is a hard requirement: do not merge new UI without it, and add one when you touch an existing element that lacks it.
+
+- **What gets one:** every control a user acts on (buttons, links, inputs, selects, toggles, file pickers); every list row that can be opened, selected, or actioned; every modal / sheet / dialog container; and any value with a copy affordance. Result and landing containers worth asserting (home tabs, connection footer, the pending-approval modal) get one too.
+- **Naming:** kebab-case, area-prefixed, action- or role-descriptive — e.g. `send-confirm`, `account-remove`, `utils-tap-amulet`, `transfer-accept`, `rpc-save`. Mirror the existing names and keep them stable; tests depend on them. For repeated rows use one constant testid plus a `data-*` discriminator (`data-testid="token-row" data-token-label={…}`) rather than interpolating unstable values into the id.
+- **Native elements** (`<button>`, `<input>`, …) and prop-spreading primitives (`Button` family, `TextInput`, `PasswordInput`, `Switch`) take `data-testid` directly via `{...rest}`.
+- **Shared primitives that don't spread props** expose an explicit `testId` prop forwarded to their root DOM node — `Sheet`, `Select`, `TabTrigger`, `MenuRow`, `FileDropInput`, `Collapsible`, `Copyable`, `DangerConfirm` (`testId` / `confirmTestId`), `DetailRow` (`copyTestId`), `AmountField`, `ConfirmPasswordForm` (`passwordTestId` / `submitTestId`). When you build a new primitive that hides its DOM element, add the same `testId` passthrough so callers can label it instead of reaching past the abstraction.
+
 ## Working Rules
 
 - Use **npm** only (never pnpm or yarn)
diff --git a/carpincho-wallet/src/components/AccountsDialog.tsx b/carpincho-wallet/src/components/AccountsDialog.tsx
index 63e7c4a6..c5e7b028 100644
--- a/carpincho-wallet/src/components/AccountsDialog.tsx
+++ b/carpincho-wallet/src/components/AccountsDialog.tsx
@@ -71,6 +71,7 @@ export const AccountsDialog = ({ open, onOpenChange }: AccountsDialogProps): JSX
     <Sheet
       open={open}
       onOpenChange={handleOpenChange}
+      testId="accounts-sheet"
       side="center"
       title={
         removeTarget !== null ? `Remove ${removeTarget.name}?` : isAdd ? 'Add account' : 'Accounts'
diff --git a/carpincho-wallet/src/components/ActivityList.tsx b/carpincho-wallet/src/components/ActivityList.tsx
index 9f7dc645..6fe371eb 100644
--- a/carpincho-wallet/src/components/ActivityList.tsx
+++ b/carpincho-wallet/src/components/ActivityList.tsx
@@ -146,6 +146,7 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
               <button
                 key={tx.id}
                 type="button"
+                data-testid="activity-row"
                 onClick={() => setSelected(tx)}
                 className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left outline-none transition-colors hover:border-primary/60 hover:bg-primary-soft/40 focus-visible:shadow-focus"
               >
@@ -183,6 +184,7 @@ export const ActivityList = ({ transactions }: ActivityListProps): JSX.Element =
         onOpenChange={(open) => {
           if (!open) setSelected(null)
         }}
+        testId="activity-detail-sheet"
         side="center"
         title={selected === null ? '' : txTitle(selected)}
         description="Transaction details."
diff --git a/carpincho-wallet/src/components/AmountField.tsx b/carpincho-wallet/src/components/AmountField.tsx
index fe042c4e..84e7eefc 100644
--- a/carpincho-wallet/src/components/AmountField.tsx
+++ b/carpincho-wallet/src/components/AmountField.tsx
@@ -8,6 +8,7 @@ export interface AmountFieldProps {
   balance: string
   tokenLabel: string
   error?: boolean
+  testId?: string
 }
 
 const FIELD_CLASS =
@@ -21,6 +22,7 @@ export const AmountField = ({
   balance,
   tokenLabel,
   error,
+  testId,
 }: AmountFieldProps): JSX.Element => (
   <div className="grid gap-1">
     <span className="text-[0.78rem] font-semibold text-muted-foreground">Amount</span>
@@ -34,6 +36,7 @@ export const AmountField = ({
     >
       <input
         aria-label="Amount"
+        data-testid={testId}
         aria-invalid={error ? true : undefined}
         inputMode="decimal"
         autoComplete="off"
@@ -44,6 +47,7 @@ export const AmountField = ({
       />
       <button
         type="button"
+        data-testid={testId === undefined ? undefined : `${testId}-max`}
         onClick={onMax}
         className="shrink-0 rounded-sm px-2 py-1 text-[0.72rem] font-bold uppercase tracking-wide text-primary transition-colors hover:bg-primary-soft focus-visible:outline-none focus-visible:shadow-focus"
       >
diff --git a/carpincho-wallet/src/components/AutoAcceptSetting.tsx b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
index 2300d687..af594047 100644
--- a/carpincho-wallet/src/components/AutoAcceptSetting.tsx
+++ b/carpincho-wallet/src/components/AutoAcceptSetting.tsx
@@ -63,6 +63,7 @@ export const AutoAcceptSetting = ({ account, api }: AutoAcceptSettingProps): JSX
       </div>
       <Switch
         aria-label="Auto-accept incoming"
+        data-testid="auto-accept-toggle"
         checked={checked}
         disabled={preapproval.busy || (preapproval.loading && status === undefined)}
         onCheckedChange={() => {
diff --git a/carpincho-wallet/src/components/ConfirmPasswordForm.tsx b/carpincho-wallet/src/components/ConfirmPasswordForm.tsx
index dfd8c652..f3c47eba 100644
--- a/carpincho-wallet/src/components/ConfirmPasswordForm.tsx
+++ b/carpincho-wallet/src/components/ConfirmPasswordForm.tsx
@@ -12,6 +12,8 @@ interface ConfirmPasswordFormProps {
   initialError?: string | null
   // Content rendered above the password field (account summary, description).
   children?: ReactNode
+  passwordTestId?: string
+  submitTestId?: string
 }
 
 // Re-checks the unlocked vault password before a sensitive action (change password,
@@ -22,6 +24,8 @@ export const ConfirmPasswordForm = ({
   onVerified,
   initialError = null,
   children,
+  passwordTestId,
+  submitTestId,
 }: ConfirmPasswordFormProps): JSX.Element => {
   const v = useVault()
   const [current, setCurrent] = useState('')
@@ -47,6 +51,7 @@ export const ConfirmPasswordForm = ({
       {children}
       <PasswordInput
         aria-label={label}
+        data-testid={passwordTestId}
         aria-errormessage={hasError ? 'confirm-password-error' : undefined}
         placeholder="Current password"
         autoComplete="current-password"
@@ -65,7 +70,12 @@ export const ConfirmPasswordForm = ({
           {error}
         </p>
       )}
-      <PrimaryButton type="submit">{submitLabel}</PrimaryButton>
+      <PrimaryButton
+        type="submit"
+        data-testid={submitTestId}
+      >
+        {submitLabel}
+      </PrimaryButton>
     </form>
   )
 }
diff --git a/carpincho-wallet/src/components/ConnectionFooter.tsx b/carpincho-wallet/src/components/ConnectionFooter.tsx
index a5e194af..3fc32a99 100644
--- a/carpincho-wallet/src/components/ConnectionFooter.tsx
+++ b/carpincho-wallet/src/components/ConnectionFooter.tsx
@@ -103,6 +103,7 @@ export const ConnectionFooter = ({
               {connected && onDisconnectDapp !== undefined && (
                 <button
                   type="button"
+                  data-testid="footer-disconnect"
                   onClick={onDisconnectDapp}
                   aria-label="Disconnect"
                   title="Disconnect"
@@ -121,6 +122,7 @@ export const ConnectionFooter = ({
 
       <button
         type="button"
+        data-testid="connection-pill"
         onClick={onOpenSettings}
         aria-label="Connection settings"
         title={walletService.reason ?? 'Connection settings'}
diff --git a/carpincho-wallet/src/components/ContactsPicker.tsx b/carpincho-wallet/src/components/ContactsPicker.tsx
index ca53589f..695a1271 100644
--- a/carpincho-wallet/src/components/ContactsPicker.tsx
+++ b/carpincho-wallet/src/components/ContactsPicker.tsx
@@ -24,6 +24,8 @@ export const ContactsPicker = ({ contacts, onSelect }: ContactsPickerProps): JSX
         <button
           key={account.id}
           type="button"
+          data-testid="contact-row"
+          data-party-id={account.partyId}
           aria-label={account.name}
           onClick={() => onSelect(account.partyId)}
           className="flex h-14 shrink-0 items-center rounded-sm px-2 text-left outline-none transition-colors hover:bg-primary-soft focus-visible:shadow-focus"
diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index 378830c9..0a999412 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -43,6 +43,7 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
     <section className="flex flex-col gap-4">
       <FileDropInput
         id="dar-file"
+        testId="dar-file-input"
         accept=".dar,application/octet-stream"
         ariaLabel="DAR file"
         prompt="Drop a .dar file or click to choose."
@@ -54,6 +55,7 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
       />
       <PrimaryButton
         className="w-full"
+        data-testid="dar-upload-submit"
         disabled={file === undefined || uploading}
         onClick={() => {
           void onUpload()
diff --git a/carpincho-wallet/src/components/Header.tsx b/carpincho-wallet/src/components/Header.tsx
index 6d537e76..87af610f 100644
--- a/carpincho-wallet/src/components/Header.tsx
+++ b/carpincho-wallet/src/components/Header.tsx
@@ -21,6 +21,7 @@ export const Header = ({ onOpenMenu }: HeaderProps): JSX.Element => {
       {!vault.isLocked && (
         <button
           type="button"
+          data-testid="menu-open"
           onClick={onOpenMenu}
           aria-label="Menu"
           title="Menu"
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 41b1efd0..d38d07e6 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -60,8 +60,16 @@ export const HomeTabs = ({
       className="flex min-h-0 flex-1 flex-col"
     >
       <TabsList>
-        <TabTrigger value="assets">Assets</TabTrigger>
-        <TabTrigger value="activity">
+        <TabTrigger
+          value="assets"
+          testId="tab-assets"
+        >
+          Assets
+        </TabTrigger>
+        <TabTrigger
+          value="activity"
+          testId="tab-activity"
+        >
           <span>Activity</span>
           {pendingTransferCount > 0 ? (
             <span className="ml-1 inline-grid min-w-5 place-items-center rounded-full bg-accent px-1.5 text-[0.72rem] leading-5 text-primary-foreground">
@@ -69,7 +77,12 @@ export const HomeTabs = ({
             </span>
           ) : null}
         </TabTrigger>
-        <TabTrigger value="utils">Utils</TabTrigger>
+        <TabTrigger
+          value="utils"
+          testId="tab-utils"
+        >
+          Utils
+        </TabTrigger>
       </TabsList>
       <TabContent
         forceMount
diff --git a/carpincho-wallet/src/components/SendConfirm.tsx b/carpincho-wallet/src/components/SendConfirm.tsx
index 6d50ad87..29e734ee 100644
--- a/carpincho-wallet/src/components/SendConfirm.tsx
+++ b/carpincho-wallet/src/components/SendConfirm.tsx
@@ -106,7 +106,10 @@ export const SendConfirm = ({
       </div>
 
       <details className="rounded-md border border-border bg-surface">
-        <summary className="cursor-pointer select-none px-3 py-2 text-[0.78rem] font-semibold text-muted-foreground">
+        <summary
+          data-testid="send-view-data"
+          className="cursor-pointer select-none px-3 py-2 text-[0.78rem] font-semibold text-muted-foreground"
+        >
           View data
         </summary>
         <div className="border-t border-border">
@@ -119,12 +122,14 @@ export const SendConfirm = ({
 
       <div className="grid grid-cols-2 gap-3">
         <SecondaryButton
+          data-testid="send-cancel"
           onClick={onCancel}
           disabled={submitting}
         >
           Cancel
         </SecondaryButton>
         <PrimaryButton
+          data-testid="send-confirm"
           disabled={submitting}
           onClick={() => {
             void onConfirm()
diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
index a62d5434..2b6ff71a 100644
--- a/carpincho-wallet/src/components/SendTokenForm.tsx
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -103,6 +103,7 @@ export const SendTokenForm = ({
           </label>
           <button
             type="button"
+            data-testid="send-contacts"
             aria-label="Contacts"
             onClick={onOpenContacts}
             className="inline-flex items-center justify-center rounded-sm text-primary transition-colors hover:text-primary-hover focus-visible:outline-none focus-visible:shadow-focus"
@@ -114,6 +115,7 @@ export const SendTokenForm = ({
           aria-label="Recipient"
           autoComplete="off"
           id="send-recipient"
+          data-testid="send-recipient"
           value={recipient}
           onChange={(event) => onRecipientChange(event.target.value)}
         />
@@ -126,6 +128,7 @@ export const SendTokenForm = ({
         balance={spendableBalance}
         tokenLabel={summary.tokenLabel}
         error={overBalance}
+        testId="send-amount"
       />
 
       <div className="grid gap-1">
@@ -137,6 +140,7 @@ export const SendTokenForm = ({
         </label>
         <Select
           id="send-deadline"
+          testId="send-deadline"
           ariaLabel="Deadline"
           value={deadline}
           onValueChange={(value) => onDeadlineChange(value as TransferDeadline)}
@@ -155,6 +159,7 @@ export const SendTokenForm = ({
         <TextInput
           aria-label="Memo"
           id="send-memo"
+          data-testid="send-memo"
           value={memo}
           onChange={(event) => onMemoChange(event.target.value)}
         />
@@ -162,6 +167,7 @@ export const SendTokenForm = ({
 
       <PrimaryButton
         className="mt-1"
+        data-testid="send-review"
         disabled={!canReview}
         onClick={onReview}
       >
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index c8a47309..40d40b4c 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -53,6 +53,7 @@ const HoldingListRow = ({
   return (
     <button
       type="button"
+      data-testid="holding-row"
       onClick={onOpen}
       className="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left outline-none transition-colors hover:bg-primary-soft/40 focus-visible:bg-primary-soft/60"
     >
@@ -105,11 +106,17 @@ const DetailScreen = ({
     </div>
 
     <div className="grid grid-cols-2 gap-3">
-      <SecondaryButton onClick={onSend}>
+      <SecondaryButton
+        data-testid="token-send"
+        onClick={onSend}
+      >
         {SEND_ICON}
         Send
       </SecondaryButton>
-      <SecondaryButton onClick={onReceive}>
+      <SecondaryButton
+        data-testid="token-receive"
+        onClick={onReceive}
+      >
         {RECEIVE_ICON}
         Receive
       </SecondaryButton>
@@ -258,6 +265,7 @@ export const TokenDetailSheet = ({
     <Sheet
       open={open}
       onOpenChange={handleOpenChange}
+      testId="token-detail-sheet"
       title={title}
       description={`${summary.tokenLabel} token details`}
       hideTitle={screen === 'detail'}
diff --git a/carpincho-wallet/src/components/TokenReceive.tsx b/carpincho-wallet/src/components/TokenReceive.tsx
index d20abbf2..a2289e80 100644
--- a/carpincho-wallet/src/components/TokenReceive.tsx
+++ b/carpincho-wallet/src/components/TokenReceive.tsx
@@ -26,6 +26,7 @@ export const TokenReceive = ({ partyId }: TokenReceiveProps): JSX.Element => (
         label="Your party ID"
         value={partyId}
         copyLabel="party ID"
+        copyTestId="receive-copy-party-id"
       />
     </dl>
   </div>
diff --git a/carpincho-wallet/src/components/TokenRow.tsx b/carpincho-wallet/src/components/TokenRow.tsx
index 4fe34817..a6dd487f 100644
--- a/carpincho-wallet/src/components/TokenRow.tsx
+++ b/carpincho-wallet/src/components/TokenRow.tsx
@@ -14,6 +14,8 @@ export const TokenRow = ({ summary, onOpen }: TokenRowProps): JSX.Element => {
   return (
     <button
       type="button"
+      data-testid="token-row"
+      data-token-label={summary.tokenLabel}
       onClick={onOpen}
       className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5 text-left outline-none transition-colors hover:border-primary/60 hover:bg-primary-soft/40 focus-visible:shadow-focus"
     >
diff --git a/carpincho-wallet/src/components/TransferCard.tsx b/carpincho-wallet/src/components/TransferCard.tsx
index 5bdaf647..de981745 100644
--- a/carpincho-wallet/src/components/TransferCard.tsx
+++ b/carpincho-wallet/src/components/TransferCard.tsx
@@ -53,6 +53,7 @@ export const TransferCard = ({
   const detailsButton = (
     <button
       type="button"
+      data-testid="transfer-details"
       aria-label="Transfer details"
       className={EYE_BUTTON_CLASS}
       onClick={() => onOpenDetails(transfer)}
@@ -64,6 +65,8 @@ export const TransferCard = ({
   if (direction === 'outgoing') {
     return (
       <article
+        data-testid="transfer-card"
+        data-direction="outgoing"
         aria-label="Outgoing transfer, awaiting acceptance"
         className="flex items-center gap-3 rounded-md border border-border bg-surface px-3 py-2.5"
       >
@@ -89,6 +92,8 @@ export const TransferCard = ({
 
   return (
     <article
+      data-testid="transfer-card"
+      data-direction="incoming"
       aria-label="Incoming transfer"
       className="relative overflow-hidden rounded-md border border-accent/45 bg-gradient-to-b from-accent/15 to-accent/[0.06] py-2.5 pr-3 pl-4"
     >
@@ -117,6 +122,7 @@ export const TransferCard = ({
         <div className="flex shrink-0 items-center gap-2">
           <PrimaryButton
             className="px-3 py-1.5 text-[0.82rem]"
+            data-testid="transfer-accept"
             onClick={() => {
               void onAccept?.(transfer.contractId)
             }}
diff --git a/carpincho-wallet/src/components/TransferDetailsSheet.tsx b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
index 27752bb5..0b8fce06 100644
--- a/carpincho-wallet/src/components/TransferDetailsSheet.tsx
+++ b/carpincho-wallet/src/components/TransferDetailsSheet.tsx
@@ -20,6 +20,7 @@ export const TransferDetailsSheet = ({
       onOpenChange={(open) => {
         if (!open) onClose()
       }}
+      testId="transfer-details-sheet"
       side="center"
       title="Transfer details"
       description="Full details for this transfer instruction."
diff --git a/carpincho-wallet/src/components/UtilsPanel.tsx b/carpincho-wallet/src/components/UtilsPanel.tsx
index bb6febd1..77ffc9e9 100644
--- a/carpincho-wallet/src/components/UtilsPanel.tsx
+++ b/carpincho-wallet/src/components/UtilsPanel.tsx
@@ -52,6 +52,7 @@ export const UtilsPanel = ({ account, api = defaultApi }: UtilsPanelProps): JSX.
         onOpenChange={(open) => {
           if (!open) setSelected(null)
         }}
+        testId="utils-sheet"
         title={selected === null ? '' : UTIL_TITLES[selected]}
         description="Ledger development tool."
         side="center"
diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 8eadd567..67802447 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -38,6 +38,8 @@ export const ExportVaultView = ({ onExported }: ExportVaultViewProps): JSX.Eleme
     <ConfirmPasswordForm
       label="Confirm password"
       submitLabel="Export"
+      passwordTestId="vault-export-password"
+      submitTestId="vault-export-submit"
       onVerified={(password) => void exportBackup(password)}
     >
       <p className="text-[0.85rem] text-muted-foreground">
@@ -95,6 +97,7 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
     >
       <FileDropInput
         id="import-vault-file"
+        testId="vault-import-file"
         accept=".json,application/json"
         ariaLabel="Backup file"
         prompt="Drop a .json backup or click to choose."
@@ -105,6 +108,7 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
         <label htmlFor="import-vault-password">Backup password</label>
         <PasswordInput
           id="import-vault-password"
+          data-testid="vault-import-password"
           autoComplete="off"
           placeholder="Backup password"
           value={password}
@@ -116,6 +120,7 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
       </div>
       <PrimaryButton
         type="submit"
+        data-testid="vault-import-submit"
         disabled={busy || file === null || password === ''}
       >
         {busy ? 'Importing...' : 'Import'}
diff --git a/carpincho-wallet/src/components/menu/MenuList.tsx b/carpincho-wallet/src/components/menu/MenuList.tsx
index 3a6364b6..9526f924 100644
--- a/carpincho-wallet/src/components/menu/MenuList.tsx
+++ b/carpincho-wallet/src/components/menu/MenuList.tsx
@@ -17,6 +17,7 @@ export const MenuList = ({ rows, onNavigate, onLogout }: MenuListProps): JSX.Ele
         label={label}
         tone={tone}
         icon={icon}
+        testId={`menu-row-${to}`}
         onClick={to === 'logout' ? onLogout : () => onNavigate(to)}
       />
     ))}
diff --git a/carpincho-wallet/src/components/menu/MenuSheet.tsx b/carpincho-wallet/src/components/menu/MenuSheet.tsx
index 3d2c0ed7..e3f73d00 100644
--- a/carpincho-wallet/src/components/menu/MenuSheet.tsx
+++ b/carpincho-wallet/src/components/menu/MenuSheet.tsx
@@ -72,6 +72,7 @@ export const MenuSheet = ({ open, onOpenChange }: MenuSheetProps): JSX.Element =
     <Sheet
       open={open}
       onOpenChange={handleOpenChange}
+      testId="menu-sheet"
       title={config.title}
       description={config.description}
       onBack={goBack}
diff --git a/carpincho-wallet/src/components/ui/Collapsible.tsx b/carpincho-wallet/src/components/ui/Collapsible.tsx
index 0371c62c..0953fc6b 100644
--- a/carpincho-wallet/src/components/ui/Collapsible.tsx
+++ b/carpincho-wallet/src/components/ui/Collapsible.tsx
@@ -6,12 +6,15 @@ export const Collapsible = CollapsiblePrimitive.Root
 
 export const CollapsibleTrigger = ({
   className,
+  testId,
   children,
 }: {
   className?: string
+  testId?: string
   children: ReactNode
 }): JSX.Element => (
   <CollapsiblePrimitive.Trigger
+    data-testid={testId}
     className={cn(
       'flex w-full items-center gap-2 outline-none focus-visible:shadow-focus',
       className,
diff --git a/carpincho-wallet/src/components/ui/DetailRow.tsx b/carpincho-wallet/src/components/ui/DetailRow.tsx
index 11cca663..e25368f4 100644
--- a/carpincho-wallet/src/components/ui/DetailRow.tsx
+++ b/carpincho-wallet/src/components/ui/DetailRow.tsx
@@ -4,17 +4,19 @@ interface DetailRowProps {
   label: string
   value: string
   copyLabel?: string
+  copyTestId?: string
 }
 
 // Label/value pair for the detail sheets: a copy control sits by the title and the value
 // renders in a framed box. copyLabel overrides the copy button's accessible label.
-export const DetailRow = ({ label, value, copyLabel }: DetailRowProps): JSX.Element => (
+export const DetailRow = ({ label, value, copyLabel, copyTestId }: DetailRowProps): JSX.Element => (
   <div className="grid gap-1">
     <div className="flex items-center gap-1.5">
       <dt className="text-[0.7rem] font-semibold uppercase text-muted-foreground">{label}</dt>
       <Copyable
         value={value}
         label={copyLabel ?? label}
+        testId={copyTestId}
       />
     </div>
     <dd className="m-0 break-all rounded-md border border-border bg-muted px-3 py-2 font-mono text-[0.74rem] leading-5 text-foreground">
diff --git a/carpincho-wallet/src/components/ui/FileDropInput.tsx b/carpincho-wallet/src/components/ui/FileDropInput.tsx
index 39acf1db..7afd066f 100644
--- a/carpincho-wallet/src/components/ui/FileDropInput.tsx
+++ b/carpincho-wallet/src/components/ui/FileDropInput.tsx
@@ -5,6 +5,7 @@ interface FileDropInputProps {
   prompt: string
   fileName: string | null
   onSelect: (file: File | null) => void
+  testId?: string
 }
 
 // Visually-hidden file input fronted by a dashed dropzone label; shows the chosen
@@ -16,10 +17,12 @@ export const FileDropInput = ({
   prompt,
   fileName,
   onSelect,
+  testId,
 }: FileDropInputProps): JSX.Element => (
   <>
     <input
       id={id}
+      data-testid={testId}
       type="file"
       accept={accept}
       aria-label={ariaLabel}
diff --git a/carpincho-wallet/src/components/ui/MenuRow.tsx b/carpincho-wallet/src/components/ui/MenuRow.tsx
index b20d7a90..a635cf9b 100644
--- a/carpincho-wallet/src/components/ui/MenuRow.tsx
+++ b/carpincho-wallet/src/components/ui/MenuRow.tsx
@@ -11,12 +11,20 @@ interface MenuRowProps {
   tone?: 'default' | 'danger'
   // Optional trailing icon rendered at the right edge of the row.
   icon?: ReactNode
+  testId?: string
 }
 
-export const MenuRow = ({ label, onClick, tone = 'default', icon }: MenuRowProps): JSX.Element => (
+export const MenuRow = ({
+  label,
+  onClick,
+  tone = 'default',
+  icon,
+  testId,
+}: MenuRowProps): JSX.Element => (
   <li>
     <button
       type="button"
+      data-testid={testId}
       onClick={onClick}
       className={cn(
         MENU_ROW_BASE_CLASS,
diff --git a/carpincho-wallet/src/components/ui/Select.tsx b/carpincho-wallet/src/components/ui/Select.tsx
index 51ca9ab3..ccff92a6 100644
--- a/carpincho-wallet/src/components/ui/Select.tsx
+++ b/carpincho-wallet/src/components/ui/Select.tsx
@@ -13,6 +13,7 @@ export interface SelectProps {
   options: SelectOption[]
   ariaLabel: string
   id?: string
+  testId?: string
 }
 
 const TRIGGER_CLASS =
@@ -34,6 +35,7 @@ export const Select = ({
   options,
   ariaLabel,
   id,
+  testId,
 }: SelectProps): JSX.Element => (
   <RadixSelect.Root
     value={value}
@@ -41,6 +43,7 @@ export const Select = ({
   >
     <RadixSelect.Trigger
       id={id}
+      data-testid={testId}
       aria-label={ariaLabel}
       className={TRIGGER_CLASS}
     >
diff --git a/carpincho-wallet/src/components/ui/Sheet.tsx b/carpincho-wallet/src/components/ui/Sheet.tsx
index 77d72245..563e9108 100644
--- a/carpincho-wallet/src/components/ui/Sheet.tsx
+++ b/carpincho-wallet/src/components/ui/Sheet.tsx
@@ -40,6 +40,7 @@ interface SheetProps {
   onOpenChange: (open: boolean) => void
   title: string
   description: string
+  testId?: string
   onBack?: () => void
   hideClose?: boolean
   // Visually hide the title (kept for screen readers) while leaving the back chevron in place.
@@ -57,6 +58,7 @@ export const Sheet = ({
   onOpenChange,
   title,
   description,
+  testId,
   onBack,
   hideClose = false,
   hideTitle = false,
@@ -71,7 +73,10 @@ export const Sheet = ({
   >
     <Dialog.Portal>
       <Dialog.Overlay className={OVERLAY_CLASS} />
-      <Dialog.Content className={CONTENT_CLASS_BY_SIDE[side]}>
+      <Dialog.Content
+        data-testid={testId}
+        className={CONTENT_CLASS_BY_SIDE[side]}
+      >
         <div className="flex items-center justify-between gap-3 mb-6">
           <div className="flex items-center gap-2 min-w-0">
             {onBack !== undefined && (
diff --git a/carpincho-wallet/src/components/ui/Tabs.tsx b/carpincho-wallet/src/components/ui/Tabs.tsx
index 3804f856..adaa9f2f 100644
--- a/carpincho-wallet/src/components/ui/Tabs.tsx
+++ b/carpincho-wallet/src/components/ui/Tabs.tsx
@@ -21,13 +21,16 @@ export const TabsList = ({
 
 export const TabTrigger = ({
   value,
+  testId,
   children,
 }: {
   value: string
+  testId?: string
   children: ReactNode
 }): JSX.Element => (
   <TabsPrimitive.Trigger
     value={value}
+    data-testid={testId}
     className={cn(
       '-mb-px border-b-2 border-transparent px-0.5 pb-2.5 pt-1.5 text-[0.95rem] font-semibold outline-none transition-colors',
       'text-muted-foreground hover:text-foreground focus-visible:text-foreground',
diff --git a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
index 7633358c..336a6169 100644
--- a/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ActiveContractsUtil.tsx
@@ -25,12 +25,18 @@ interface ActiveContractsUtilProps {
 // One active contract as a collapsible card: a shortened id with a top-right chevron, full
 // details (matching the other sheets' field styling) revealed below.
 const ContractCard = ({ contract }: { contract: ActiveContract }): JSX.Element => (
-  <Collapsible className="group rounded-md border border-border bg-surface px-3 py-2.5">
+  <Collapsible
+    data-testid="active-contract"
+    className="group rounded-md border border-border bg-surface px-3 py-2.5"
+  >
     <div className="flex items-center gap-2">
       <span className="min-w-0 flex-1 truncate font-mono text-[0.74rem] leading-5 text-foreground">
         {shortMiddle(contract.contractId, 10, 8)}
       </span>
-      <CollapsibleTrigger className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5">
+      <CollapsibleTrigger
+        testId="active-contract-toggle"
+        className="grid size-8 shrink-0 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:shadow-focus [&_svg]:size-5"
+      >
         <span className="sr-only">Toggle contract details</span>
         <span className="transition-transform group-data-[state=open]:rotate-180">
           {CHEVRON_DOWN_ICON}
@@ -117,6 +123,7 @@ export const ActiveContractsUtil = ({
         </span>
         <TextInput
           id="contract-filter"
+          data-testid="contract-filter"
           value={filterQuery}
           onChange={(event) => setFilterQuery(event.currentTarget.value)}
           placeholder="Template or contract id"
@@ -141,6 +148,7 @@ export const ActiveContractsUtil = ({
       <div className="flex items-center justify-end">
         <button
           type="button"
+          data-testid="contracts-refresh"
           aria-label="Refresh contracts"
           title="Refresh contracts"
           disabled={busy}
diff --git a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
index 7abdb5fc..1d5c6754 100644
--- a/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
+++ b/carpincho-wallet/src/components/utils/CreateContractUtil.tsx
@@ -64,6 +64,7 @@ export const CreateContractUtil = ({
         Template ID
         <TextInput
           id="create-template-id"
+          data-testid="create-template-id"
           value={templateId}
           onChange={(event) => setTemplateId(event.currentTarget.value)}
           placeholder="package:Module:Template"
@@ -81,6 +82,7 @@ export const CreateContractUtil = ({
       <PrimaryButton
         type="submit"
         className="w-full"
+        data-testid="create-contract-submit"
         disabled={!canSubmit}
       >
         {busy ? 'Creating...' : 'Create'}
diff --git a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
index ebd024bd..f65afbc7 100644
--- a/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
+++ b/carpincho-wallet/src/components/utils/ExerciseChoiceUtil.tsx
@@ -73,6 +73,7 @@ export const ExerciseChoiceUtil = ({
         Template ID
         <TextInput
           id="exercise-template-id"
+          data-testid="exercise-template-id"
           value={templateId}
           onChange={(event) => setTemplateId(event.currentTarget.value)}
           placeholder="package:Module:TemplateOrInterface"
@@ -86,6 +87,7 @@ export const ExerciseChoiceUtil = ({
         Contract ID
         <TextInput
           id="exercise-contract-id"
+          data-testid="exercise-contract-id"
           value={contractId}
           onChange={(event) => setContractId(event.currentTarget.value)}
           placeholder="active contract id"
@@ -99,6 +101,7 @@ export const ExerciseChoiceUtil = ({
         Choice
         <TextInput
           id="exercise-choice"
+          data-testid="exercise-choice-input"
           value={choice}
           onChange={(event) => setChoice(event.currentTarget.value)}
           placeholder="Template_Choice"
@@ -116,6 +119,7 @@ export const ExerciseChoiceUtil = ({
       <PrimaryButton
         type="submit"
         className="w-full"
+        data-testid="exercise-choice-submit"
         disabled={!canSubmit}
       >
         {busy ? 'Exercising...' : 'Exercise'}
diff --git a/carpincho-wallet/src/components/utils/UtilsList.tsx b/carpincho-wallet/src/components/utils/UtilsList.tsx
index 53eb57d7..26c244b7 100644
--- a/carpincho-wallet/src/components/utils/UtilsList.tsx
+++ b/carpincho-wallet/src/components/utils/UtilsList.tsx
@@ -88,6 +88,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
         <SectionLabel>Faucet</SectionLabel>
         <button
           type="button"
+          data-testid="utils-tap-amulet"
           className={ROW_CLASS}
           disabled={tapping}
           onClick={() => {
@@ -115,6 +116,7 @@ export const UtilsList = ({ account, tapApi, onSelect }: UtilsListProps): JSX.El
           <button
             key={row.key}
             type="button"
+            data-testid={`utils-${row.key}`}
             className={ROW_CLASS}
             onClick={() => onSelect(row.key)}
           >
diff --git a/carpincho-wallet/src/utils/clipboard.ts b/carpincho-wallet/src/utils/clipboard.ts
index 55138bcb..082ee95b 100644
--- a/carpincho-wallet/src/utils/clipboard.ts
+++ b/carpincho-wallet/src/utils/clipboard.ts
@@ -1,45 +1,9 @@
 import { toast } from '@/components/ui/toast'
 
-// How long a copied secret may sit on the clipboard before we try to wipe it.
-const SECRET_CLIPBOARD_CLEAR_MS = 60_000
-
 // Copies arbitrary wallet text while keeping success and failure feedback consistent.
-// onSuccess runs only after a successful copy (used to schedule a secret wipe).
-export const copyText = (value: string, successMessage: string, onSuccess?: () => void): void => {
+export const copyText = (value: string, successMessage: string): void => {
   void navigator.clipboard
     .writeText(value)
-    .then(() => {
-      toast.success(successMessage)
-      onSuccess?.()
-    })
+    .then(() => toast.success(successMessage))
     .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
 }
-
-// Best-effort clipboard wipe: only clears if the clipboard still holds the secret,
-// so we never clobber whatever the user copied afterwards. Silently skips when the
-// browser denies clipboard reads (no extra permission is requested).
-const scheduleSecretClear = (secret: string): void => {
-  const handle = setTimeout(() => {
-    void (async () => {
-      try {
-        if ((await navigator.clipboard.readText()) === secret) {
-          await navigator.clipboard.writeText('')
-        }
-      } catch {
-        // readText unavailable or denied: leave the clipboard untouched.
-      }
-    })()
-  }, SECRET_CLIPBOARD_CLEAR_MS)
-  // Don't keep a Node event loop (tests) alive waiting on the wipe; harmless in the browser.
-  ;(handle as unknown as { unref?: () => void }).unref?.()
-}
-
-// Copies a sensitive value (e.g. a private key) and schedules a best-effort clipboard wipe.
-export const copySecret = (value: string, successMessage: string): void => {
-  copyText(value, successMessage, () => scheduleSecretClear(value))
-}
-
-// Copies a party id from account surfaces with a domain-specific confirmation.
-export const copyPartyId = (partyId: string): void => {
-  copyText(partyId, 'Party ID copied')
-}
diff --git a/carpincho-wallet/src/views/ConnectionSettingsView.tsx b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
index 10f44763..0ecbaa29 100644
--- a/carpincho-wallet/src/views/ConnectionSettingsView.tsx
+++ b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
@@ -57,6 +57,7 @@ export const ConnectionSettingsView = (): JSX.Element => {
           <label htmlFor="wallet-service-rpc">Wallet-service RPC URL</label>
           <GhostButton
             type="button"
+            data-testid="rpc-test"
             onClick={() => {
               void onTest()
             }}
@@ -68,6 +69,7 @@ export const ConnectionSettingsView = (): JSX.Element => {
         </div>
         <TextInput
           id="wallet-service-rpc"
+          data-testid="rpc-endpoint-input"
           type="url"
           className="font-mono"
           value={draft.walletServiceRpcUrl}
@@ -78,6 +80,7 @@ export const ConnectionSettingsView = (): JSX.Element => {
 
       <PrimaryButton
         className="w-full mt-1"
+        data-testid="rpc-save"
         onClick={onSave}
       >
         Save
diff --git a/carpincho-wallet/src/views/HomeView.tsx b/carpincho-wallet/src/views/HomeView.tsx
index 097b03f0..ce22838c 100644
--- a/carpincho-wallet/src/views/HomeView.tsx
+++ b/carpincho-wallet/src/views/HomeView.tsx
@@ -158,6 +158,7 @@ export const HomeView = (): JSX.Element => {
       <Sheet
         open={hasPending}
         onOpenChange={() => undefined}
+        testId="approval-sheet"
         side="center"
         title="Awaiting approval"
         description="Review and approve or reject this dApp request."
@@ -178,6 +179,7 @@ export const HomeView = (): JSX.Element => {
       <Sheet
         open={settingsOpen}
         onOpenChange={setSettingsOpen}
+        testId="connection-settings-sheet"
         title="Connection"
         description="Configure wallet-service URL and network."
       >
@@ -187,6 +189,7 @@ export const HomeView = (): JSX.Element => {
       <Sheet
         open={disconnectConfirmOpen}
         onOpenChange={setDisconnectConfirmOpen}
+        testId="disconnect-confirm-sheet"
         side="center"
         title={`Disconnect ${connectedLabel}?`}
         description="Disconnect this dApp from the wallet."
diff --git a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
index c201b87f..aecd6b25 100644
--- a/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
+++ b/carpincho-wallet/src/views/onboarding/CreateFirstAccount.tsx
@@ -10,8 +10,18 @@ export const CreateFirstAccount = (): JSX.Element => (
   <Card>
     <Tabs defaultValue="create">
       <TabsList className="mb-4">
-        <TabTrigger value="create">Create new account</TabTrigger>
-        <TabTrigger value="restore">Restore from backup</TabTrigger>
+        <TabTrigger
+          value="create"
+          testId="onboarding-tab-create"
+        >
+          Create new account
+        </TabTrigger>
+        <TabTrigger
+          value="restore"
+          testId="onboarding-tab-restore"
+        >
+          Restore from backup
+        </TabTrigger>
       </TabsList>
       <TabContent value="create">
         <CreateAccountForm showIntro />
diff --git a/carpincho-wallet/test/utils/clipboard.test.ts b/carpincho-wallet/test/utils/clipboard.test.ts
deleted file mode 100644
index 9e8141a9..00000000
--- a/carpincho-wallet/test/utils/clipboard.test.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { strict as assert } from 'node:assert'
-import { afterEach, describe, it } from 'node:test'
-import { copyPartyId } from '@/utils/clipboard'
-
-const originalClipboard = globalThis.navigator?.clipboard
-
-describe('copyPartyId', () => {
-  afterEach(() => {
-    Object.defineProperty(globalThis.navigator, 'clipboard', {
-      value: originalClipboard,
-      configurable: true,
-    })
-  })
-
-  it('writes the party id to the clipboard', async () => {
-    const written: string[] = []
-    Object.defineProperty(globalThis.navigator, 'clipboard', {
-      value: { writeText: async (v: string) => void written.push(v) },
-      configurable: true,
-    })
-
-    copyPartyId('party-abc')
-    await Promise.resolve()
-    await Promise.resolve()
-
-    assert.deepEqual(written, ['party-abc'])
-  })
-})

From 61208fcf35ac743281470f3579c2bfe7f67908c4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Mon, 22 Jun 2026 10:04:06 -0300
Subject: [PATCH 120/121] fix: gate copied checkmark on successful clipboard
 write via onSuccess callback

---
 carpincho-wallet/src/components/ui/Copyable.tsx | 9 +++++----
 carpincho-wallet/src/utils/clipboard.ts         | 7 +++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/Copyable.tsx b/carpincho-wallet/src/components/ui/Copyable.tsx
index d25bdbe5..8e437167 100644
--- a/carpincho-wallet/src/components/ui/Copyable.tsx
+++ b/carpincho-wallet/src/components/ui/Copyable.tsx
@@ -24,10 +24,11 @@ export const Copyable = ({
 }: CopyableProps): JSX.Element => {
   const [copied, setCopied] = useState(false)
   const onCopy = (): void => {
-    copyText(value, successMessage ?? `${label} copied`)
-    setCopied(true)
-    const handle = setTimeout(() => setCopied(false), COPIED_RESET_MS)
-    ;(handle as unknown as { unref?: () => void }).unref?.()
+    copyText(value, successMessage ?? `${label} copied`, () => {
+      setCopied(true)
+      const handle = setTimeout(() => setCopied(false), COPIED_RESET_MS)
+      ;(handle as unknown as { unref?: () => void }).unref?.()
+    })
   }
   return (
     <button
diff --git a/carpincho-wallet/src/utils/clipboard.ts b/carpincho-wallet/src/utils/clipboard.ts
index 082ee95b..3ffdc75f 100644
--- a/carpincho-wallet/src/utils/clipboard.ts
+++ b/carpincho-wallet/src/utils/clipboard.ts
@@ -1,9 +1,12 @@
 import { toast } from '@/components/ui/toast'
 
 // Copies arbitrary wallet text while keeping success and failure feedback consistent.
-export const copyText = (value: string, successMessage: string): void => {
+export const copyText = (value: string, successMessage: string, onSuccess?: () => void): void => {
   void navigator.clipboard
     .writeText(value)
-    .then(() => toast.success(successMessage))
+    .then(() => {
+      toast.success(successMessage)
+      onSuccess?.()
+    })
     .catch((err: Error) => toast.error(`Copy failed: ${err.message}`))
 }

From 990b5a66a7442162bc7f6b1f85ac15e1161a222d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Mon, 22 Jun 2026 10:06:15 -0300
Subject: [PATCH 121/121] fix(carpincho-wallet): drop drag-and-drop wording
 from file-picker prompts

The popup action surface only supports click-to-choose; OS file
drag-and-drop closes the popup before any drop lands.
---
 carpincho-wallet/src/components/DarUploadPanel.tsx   | 2 +-
 carpincho-wallet/src/components/VaultBackupPanel.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/DarUploadPanel.tsx b/carpincho-wallet/src/components/DarUploadPanel.tsx
index 0a999412..c74720cc 100644
--- a/carpincho-wallet/src/components/DarUploadPanel.tsx
+++ b/carpincho-wallet/src/components/DarUploadPanel.tsx
@@ -46,7 +46,7 @@ export const DarUploadPanel = ({ api = defaultApi }: DarUploadPanelProps): JSX.E
         testId="dar-file-input"
         accept=".dar,application/octet-stream"
         ariaLabel="DAR file"
-        prompt="Drop a .dar file or click to choose."
+        prompt="Click to choose a .dar file."
         fileName={file?.name ?? null}
         onSelect={(selected) => {
           setUploadedFileName(undefined)
diff --git a/carpincho-wallet/src/components/VaultBackupPanel.tsx b/carpincho-wallet/src/components/VaultBackupPanel.tsx
index 67802447..a6b039f6 100644
--- a/carpincho-wallet/src/components/VaultBackupPanel.tsx
+++ b/carpincho-wallet/src/components/VaultBackupPanel.tsx
@@ -100,7 +100,7 @@ export const ImportVaultForm = ({ onImported }: ImportVaultFormProps): JSX.Eleme
         testId="vault-import-file"
         accept=".json,application/json"
         ariaLabel="Backup file"
-        prompt="Drop a .json backup or click to choose."
+        prompt="Click to choose a .json backup."
         fileName={file?.name ?? null}
         onSelect={setFile}
       />