From 2c7ef9a0fcfcdb5b212bf201e5d2a0ef8597489e Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Mon, 8 Jun 2026 17:40:37 -0300
Subject: [PATCH 01/98] fix(wallet-service): require explicit backend token

---
 canton-barebones/wallet-service/src/config.ts | 23 +++----
 .../wallet-service/test/smoke.test.ts         | 62 +++++++------------
 2 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/canton-barebones/wallet-service/src/config.ts b/canton-barebones/wallet-service/src/config.ts
index 7439f7f7..9879e0b3 100644
--- a/canton-barebones/wallet-service/src/config.ts
+++ b/canton-barebones/wallet-service/src/config.ts
@@ -1,7 +1,6 @@
-import { createCantonToken } from './canton-token.ts'
 import { isMockEnabled } from './mock.ts'
 
-export type TokenSource = 'env' | 'mint' | 'none'
+export type TokenSource = 'env' | 'none'
 
 export interface WalletServiceConfig {
   port: number
@@ -40,7 +39,8 @@ const optionalNumber = (name: string, fallback: number): number => {
   return parsed
 }
 
-const resolveToken = (backendUserId: string): { token?: string; source: TokenSource } => {
+// Resolves the explicit runtime bearer token without exposing the local signing recipe to services.
+const resolveToken = (): { token?: string; source: TokenSource } => {
   if (isMockEnabled()) {
     return { source: 'none' }
   }
@@ -48,20 +48,15 @@ const resolveToken = (backendUserId: string): { token?: string; source: TokenSou
   if (explicit !== undefined) {
     return { token: explicit, source: 'env' }
   }
-  const audience = optional('CANTON_AUTH_AUDIENCE')
-  const secret = optional('CANTON_AUTH_SECRET')
-  if (audience !== undefined && secret !== undefined) {
-    return {
-      token: createCantonToken({ subject: backendUserId, audience, secret }),
-      source: 'mint',
-    }
-  }
-  return { source: 'none' }
+  throw new Error(
+    'CANTON_BACKEND_TOKEN is required. Generate one with: npm run canton:token -- ledger-api-user',
+  )
 }
 
 export const loadConfig = (): WalletServiceConfig => {
-  const backendUserId = optional('CANTON_ADMIN_USER_ID') ?? 'wallet-service'
-  const resolved = resolveToken(backendUserId)
+  const backendUserId =
+    optional('CANTON_AUTH_USER_ID') ?? optional('CANTON_ADMIN_USER_ID') ?? 'ledger-api-user'
+  const resolved = resolveToken()
   return {
     port: optionalNumber('WALLET_SERVICE_PORT', 3010),
     corsOrigins: (
diff --git a/canton-barebones/wallet-service/test/smoke.test.ts b/canton-barebones/wallet-service/test/smoke.test.ts
index 35342a15..86f6cc2d 100644
--- a/canton-barebones/wallet-service/test/smoke.test.ts
+++ b/canton-barebones/wallet-service/test/smoke.test.ts
@@ -6,7 +6,7 @@ const CANTON_VARS = [
   'CANTON_BACKEND_TOKEN',
   'CANTON_AUTH_AUDIENCE',
   'CANTON_AUTH_SECRET',
-  'CANTON_ADMIN_USER_ID',
+  'CANTON_AUTH_USER_ID',
   'WALLET_SERVICE_MOCK',
 ] as const
 
@@ -37,21 +37,32 @@ describe('config loader', () => {
     restore(saved)
   })
 
-  it('returns defaults when no env vars are set', () => {
-    const config = loadConfig()
-    assert.equal(config.port, 3010)
-    assert.deepEqual(config.corsOrigins, ['http://localhost:3011'])
-    assert.equal(config.network, 'canton:local')
-    assert.equal(config.provider.id, 'wallet-service')
+  it('fails clearly when real mode starts without CANTON_BACKEND_TOKEN', () => {
+    // Scenario: real wallet-service mode must not mint a bearer token from the
+    // local auth recipe. The operator should generate a token explicitly and
+    // paste it into CANTON_BACKEND_TOKEN so every runtime token is visible.
+    assert.throws(
+      () => loadConfig(),
+      /CANTON_BACKEND_TOKEN is required\. Generate one with: npm run canton:token -- ledger-api-user/,
+    )
   })
 
-  it('tokenSource is "none" when nothing is configured (non-mock)', () => {
-    const config = loadConfig()
-    assert.equal(config.canton.tokenSource, 'none')
-    assert.equal(config.canton.backendToken, undefined)
+  it('does not use CANTON_AUTH_* to mint a wallet-service token', () => {
+    // Scenario: CANTON_AUTH_* is only a token-generation recipe for scripts.
+    // The runtime service must still fail until CANTON_BACKEND_TOKEN is set.
+    process.env.CANTON_AUTH_AUDIENCE = 'https://canton.network.global'
+    process.env.CANTON_AUTH_SECRET = 'unsafe'
+    process.env.CANTON_AUTH_USER_ID = 'ledger-api-user'
+
+    assert.throws(
+      () => loadConfig(),
+      /CANTON_BACKEND_TOKEN is required\. Generate one with: npm run canton:token -- ledger-api-user/,
+    )
   })
 
   it('tokenSource is "env" when CANTON_BACKEND_TOKEN is set', () => {
+    // Scenario: the explicit backend token is the only accepted real-mode
+    // credential source, and it is passed through unchanged to SDK calls.
     process.env.CANTON_BACKEND_TOKEN = 'explicit.jwt.value'
     process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
     process.env.CANTON_AUTH_SECRET = 'unsafe'
@@ -60,34 +71,9 @@ describe('config loader', () => {
     assert.equal(config.canton.backendToken, 'explicit.jwt.value')
   })
 
-  it('tokenSource is "mint" when audience + secret are set but no explicit token', () => {
-    process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
-    process.env.CANTON_AUTH_SECRET = 'unsafe'
-    const config = loadConfig()
-    assert.equal(config.canton.tokenSource, 'mint')
-    assert.equal(
-      config.canton.backendToken,
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ3YWxsZXQtc2VydmljZSIsImF1ZCI6Imh0dHBzOi8vY2FudG9uLWJhcmVib25lcy5sb2NhbCJ9.-3Xq4rrhJliXWkrqPNXid5_YuuTk3E6EDtQYux-ULiI',
-    )
-  })
-
-  it('honours CANTON_ADMIN_USER_ID as the JWT subject when minting', () => {
-    process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
-    process.env.CANTON_AUTH_SECRET = 'unsafe'
-    process.env.CANTON_ADMIN_USER_ID = 'custom-subject'
-    const config = loadConfig()
-    assert.equal(config.canton.tokenSource, 'mint')
-    const seg = (config.canton.backendToken ?? '').split('.')[1]
-    const payload = JSON.parse(
-      Buffer.from(
-        `${seg}${'='.repeat((4 - (seg.length % 4)) % 4)}`.replace(/-/g, '+').replace(/_/g, '/'),
-        'base64',
-      ).toString('utf8'),
-    )
-    assert.equal(payload.sub, 'custom-subject')
-  })
-
   it('mock mode skips minting and leaves backendToken undefined', () => {
+    // Scenario: mock mode is used for wallet-only UI iteration and must not
+    // require any LocalNet token because all Canton calls are short-circuited.
     process.env.WALLET_SERVICE_MOCK = '1'
     process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
     process.env.CANTON_AUTH_SECRET = 'unsafe'

From 690f7ae2b92b087d9230a038699eb63a2cb56725 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 14:51:30 -0300
Subject: [PATCH 02/98] chore(canton): require explicit localnet tokens

---
 canton-barebones/scripts/mint-token.mjs       | 21 +++++++---
 canton-barebones/test/mint-token.test.mjs     | 40 ++++++++++++++++---
 canton-barebones/wallet-service/src/config.ts |  4 --
 canton-barebones/wallet-service/src/rpc.ts    |  1 -
 .../wallet-service/test/canton-token.test.ts  | 19 +++++----
 .../wallet-service/test/mock.test.ts          |  1 -
 .../wallet-service/test/party.test.ts         |  2 +-
 .../wallet-service/test/rpc.test.ts           |  1 -
 .../wallet-service/test/smoke.test.ts         | 10 ++---
 9 files changed, 66 insertions(+), 33 deletions(-)

diff --git a/canton-barebones/scripts/mint-token.mjs b/canton-barebones/scripts/mint-token.mjs
index aaf83109..deab5dfb 100755
--- a/canton-barebones/scripts/mint-token.mjs
+++ b/canton-barebones/scripts/mint-token.mjs
@@ -7,9 +7,11 @@ import { fileURLToPath } from 'node:url'
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const root = path.resolve(__dirname, '..')
 
+// Encodes JWT segments in the URL-safe base64 variant required by bearer tokens.
 const b64url = (input) =>
   Buffer.from(input).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_')
 
+// Reads local .env values so token generation follows the same config as the stack.
 const parseEnvFile = (filePath) => {
   if (!fs.existsSync(filePath)) {
     return {}
@@ -55,18 +57,25 @@ export const createCantonToken = ({ subject, audience, secret }) => {
   return `${encoded}.${b64url(signature)}`
 }
 
+// Prints a LocalNet token and the two places it can be copied for development.
 const main = () => {
   const env = {
     ...parseEnvFile(path.join(root, '.env')),
     ...process.env,
   }
-  const subject = process.argv[2] ?? env.CANTON_ADMIN_USER_ID
+  const subject = process.argv[2] ?? 'ledger-api-user'
+  const token = createCantonToken({
+    subject,
+    audience: env.CANTON_AUTH_AUDIENCE,
+    secret: env.CANTON_AUTH_SECRET,
+  })
+  process.stdout.write(`${token}\n\n`)
+  process.stdout.write('For wallet-service:\n')
+  process.stdout.write(`  CANTON_BACKEND_TOKEN=${token}\n\n`)
+  process.stdout.write('For Carpincho LocalNet settings:\n')
+  process.stdout.write('  Use this token as the LocalNet bearer token.\n')
   process.stdout.write(
-    `${createCantonToken({
-      subject,
-      audience: env.CANTON_AUTH_AUDIENCE,
-      secret: env.CANTON_AUTH_SECRET,
-    })}\n`,
+    '  You may reuse it for local dev or generate another token with this script.\n',
   )
 }
 
diff --git a/canton-barebones/test/mint-token.test.mjs b/canton-barebones/test/mint-token.test.mjs
index ad3ff111..d3d0a65b 100644
--- a/canton-barebones/test/mint-token.test.mjs
+++ b/canton-barebones/test/mint-token.test.mjs
@@ -1,33 +1,61 @@
 import assert from 'node:assert/strict'
+import { execFileSync } from 'node:child_process'
+import path from 'node:path'
 import { describe, it } from 'node:test'
+import { fileURLToPath } from 'node:url'
 import { createCantonToken } from '../scripts/mint-token.mjs'
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const scriptPath = path.resolve(__dirname, '../scripts/mint-token.mjs')
+
 const b64urlDecode = (value) => {
   const padded = `${value}${'='.repeat((4 - (value.length % 4)) % 4)}`
   return Buffer.from(padded.replace(/-/g, '+').replace(/_/g, '/'), 'base64')
 }
 
 describe('Canton token generation', () => {
-  it('creates the HS256 JWT Canton accepts for local auth', () => {
+  it('creates the HS256 JWT Splice LocalNet accepts for local auth', () => {
+    // Scenario: Splice LocalNet services share the unsafe local JWT recipe.
+    // The generated token is what operators paste into wallet-service or
+    // Carpincho dev settings, while the signing secret stays in .env.
     const token = createCantonToken({
-      subject: 'wallet-service',
-      audience: 'https://canton-barebones.local',
+      subject: 'ledger-api-user',
+      audience: 'https://canton.network.global',
       secret: 'unsafe',
     })
     const [header, payload, signature] = token.split('.')
 
     assert.equal(
       token,
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ3YWxsZXQtc2VydmljZSIsImF1ZCI6Imh0dHBzOi8vY2FudG9uLWJhcmVib25lcy5sb2NhbCJ9.-3Xq4rrhJliXWkrqPNXid5_YuuTk3E6EDtQYux-ULiI',
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsZWRnZXItYXBpLXVzZXIiLCJhdWQiOiJodHRwczovL2NhbnRvbi5uZXR3b3JrLmdsb2JhbCJ9.G9aLv-IF5X0WmIkbR10f48i-7it5LlgwpJEZ4Ce2Y-E',
     )
     assert.deepEqual(JSON.parse(b64urlDecode(header).toString('utf8')), {
       alg: 'HS256',
       typ: 'JWT',
     })
     assert.deepEqual(JSON.parse(b64urlDecode(payload).toString('utf8')), {
-      sub: 'wallet-service',
-      aud: 'https://canton-barebones.local',
+      sub: 'ledger-api-user',
+      aud: 'https://canton.network.global',
     })
     assert.equal(signature.length, 43)
   })
+
+  it('prints the default-subject token and the LocalNet copy-paste instructions', () => {
+    // Scenario: the script is the single supported way to derive dev JWTs from
+    // the local signing recipe; it must tell operators where to use the
+    // generated token without mutating .env or leaking the signing secret.
+    const output = execFileSync(process.execPath, [scriptPath], {
+      cwd: path.resolve(__dirname, '..'),
+      env: {
+        ...process.env,
+        CANTON_AUTH_AUDIENCE: 'https://canton.network.global',
+        CANTON_AUTH_SECRET: 'unsafe',
+      },
+      encoding: 'utf8',
+    })
+
+    assert.match(output, /eyJ[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+\.[a-zA-Z0-9_-]+/)
+    assert.match(output, /CANTON_BACKEND_TOKEN=/)
+    assert.match(output, /Carpincho LocalNet settings/)
+  })
 })
diff --git a/canton-barebones/wallet-service/src/config.ts b/canton-barebones/wallet-service/src/config.ts
index 9879e0b3..4df4fcfe 100644
--- a/canton-barebones/wallet-service/src/config.ts
+++ b/canton-barebones/wallet-service/src/config.ts
@@ -16,7 +16,6 @@ export interface WalletServiceConfig {
     jsonApiUrl: string
     ledgerApiUrl: string
     adminApiUrl: string
-    backendUserId: string
     backendToken?: string
     tokenSource: TokenSource
   }
@@ -54,8 +53,6 @@ const resolveToken = (): { token?: string; source: TokenSource } => {
 }
 
 export const loadConfig = (): WalletServiceConfig => {
-  const backendUserId =
-    optional('CANTON_AUTH_USER_ID') ?? optional('CANTON_ADMIN_USER_ID') ?? 'ledger-api-user'
   const resolved = resolveToken()
   return {
     port: optionalNumber('WALLET_SERVICE_PORT', 3010),
@@ -78,7 +75,6 @@ export const loadConfig = (): WalletServiceConfig => {
       jsonApiUrl: optional('CANTON_JSON_API_URL') ?? 'http://localhost:3013',
       ledgerApiUrl: optional('CANTON_LEDGER_API_URL') ?? 'grpc://localhost:3014',
       adminApiUrl: optional('CANTON_ADMIN_API_URL') ?? 'grpc://localhost:3015',
-      backendUserId,
       backendToken: resolved.token,
       tokenSource: resolved.source,
     },
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 5aaa2159..fab47452 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -428,7 +428,6 @@ export const createRpc = (config: WalletServiceConfig): Rpc => {
       jsonApiUrl: config.canton.jsonApiUrl,
       ledgerApiUrl: config.canton.ledgerApiUrl,
       adminApiUrl: config.canton.adminApiUrl,
-      backendUserId: config.canton.backendUserId,
       hasBackendToken: config.canton.backendToken !== undefined,
     },
   })
diff --git a/canton-barebones/wallet-service/test/canton-token.test.ts b/canton-barebones/wallet-service/test/canton-token.test.ts
index 2c4067b2..85fc5950 100644
--- a/canton-barebones/wallet-service/test/canton-token.test.ts
+++ b/canton-barebones/wallet-service/test/canton-token.test.ts
@@ -9,22 +9,27 @@ const b64urlDecode = (value: string): Buffer => {
 
 describe('createCantonToken', () => {
   it('produces the same HS256 token as canton-barebones/scripts/mint-token.mjs for the pinned inputs', () => {
+    // Scenario: wallet-service and the top-level token script must agree on
+    // the exact LocalNet JWT shape so generated tokens work across app-user
+    // Ledger, Validator, Scan, and Registry endpoints.
     const token = createCantonToken({
-      subject: 'wallet-service',
-      audience: 'https://canton-barebones.local',
+      subject: 'ledger-api-user',
+      audience: 'https://canton.network.global',
       secret: 'unsafe',
     })
 
     assert.equal(
       token,
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ3YWxsZXQtc2VydmljZSIsImF1ZCI6Imh0dHBzOi8vY2FudG9uLWJhcmVib25lcy5sb2NhbCJ9.-3Xq4rrhJliXWkrqPNXid5_YuuTk3E6EDtQYux-ULiI',
+      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJsZWRnZXItYXBpLXVzZXIiLCJhdWQiOiJodHRwczovL2NhbnRvbi5uZXR3b3JrLmdsb2JhbCJ9.G9aLv-IF5X0WmIkbR10f48i-7it5LlgwpJEZ4Ce2Y-E',
     )
   })
 
   it('decodes to the canonical header and payload', () => {
+    // Scenario: the generated bearer token must remain a simple HS256 JWT
+    // with only the subject and audience claims expected by LocalNet dev auth.
     const token = createCantonToken({
-      subject: 'wallet-service',
-      audience: 'https://canton-barebones.local',
+      subject: 'ledger-api-user',
+      audience: 'https://canton.network.global',
       secret: 'unsafe',
     })
     const [header, payload, signature] = token.split('.')
@@ -34,8 +39,8 @@ describe('createCantonToken', () => {
       typ: 'JWT',
     })
     assert.deepEqual(JSON.parse(b64urlDecode(payload).toString('utf8')), {
-      sub: 'wallet-service',
-      aud: 'https://canton-barebones.local',
+      sub: 'ledger-api-user',
+      aud: 'https://canton.network.global',
     })
     assert.equal(signature.length, 43)
   })
diff --git a/canton-barebones/wallet-service/test/mock.test.ts b/canton-barebones/wallet-service/test/mock.test.ts
index c68d37a3..16dbdb80 100644
--- a/canton-barebones/wallet-service/test/mock.test.ts
+++ b/canton-barebones/wallet-service/test/mock.test.ts
@@ -17,7 +17,6 @@ const baseConfig = () => ({
     jsonApiUrl: 'http://localhost:3013',
     ledgerApiUrl: 'grpc://localhost:3014',
     adminApiUrl: 'grpc://localhost:3015',
-    backendUserId: 'wallet-service',
     backendToken: undefined as string | undefined,
     tokenSource: 'none' as const,
   },
diff --git a/canton-barebones/wallet-service/test/party.test.ts b/canton-barebones/wallet-service/test/party.test.ts
index b2fa4068..1f66f45f 100644
--- a/canton-barebones/wallet-service/test/party.test.ts
+++ b/canton-barebones/wallet-service/test/party.test.ts
@@ -12,8 +12,8 @@ const stubConfig = {
     jsonApiUrl: '',
     ledgerApiUrl: '',
     adminApiUrl: '',
-    backendUserId: '',
     backendToken: undefined as string | undefined,
+    tokenSource: 'none' as const,
   },
 }
 
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 1096fb11..10230878 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -17,7 +17,6 @@ const baseConfig = () => ({
     jsonApiUrl: 'http://localhost:3013',
     ledgerApiUrl: 'grpc://localhost:3014',
     adminApiUrl: 'grpc://localhost:3015',
-    backendUserId: 'wallet-service',
     backendToken: undefined as string | undefined,
     tokenSource: 'none' as const,
   },
diff --git a/canton-barebones/wallet-service/test/smoke.test.ts b/canton-barebones/wallet-service/test/smoke.test.ts
index 86f6cc2d..48fda786 100644
--- a/canton-barebones/wallet-service/test/smoke.test.ts
+++ b/canton-barebones/wallet-service/test/smoke.test.ts
@@ -6,7 +6,6 @@ const CANTON_VARS = [
   'CANTON_BACKEND_TOKEN',
   'CANTON_AUTH_AUDIENCE',
   'CANTON_AUTH_SECRET',
-  'CANTON_AUTH_USER_ID',
   'WALLET_SERVICE_MOCK',
 ] as const
 
@@ -47,12 +46,11 @@ describe('config loader', () => {
     )
   })
 
-  it('does not use CANTON_AUTH_* to mint a wallet-service token', () => {
-    // Scenario: CANTON_AUTH_* is only a token-generation recipe for scripts.
+  it('does not use the local signing recipe to mint a wallet-service token', () => {
+    // Scenario: the local signing recipe is only for scripts.
     // The runtime service must still fail until CANTON_BACKEND_TOKEN is set.
     process.env.CANTON_AUTH_AUDIENCE = 'https://canton.network.global'
     process.env.CANTON_AUTH_SECRET = 'unsafe'
-    process.env.CANTON_AUTH_USER_ID = 'ledger-api-user'
 
     assert.throws(
       () => loadConfig(),
@@ -64,7 +62,7 @@ describe('config loader', () => {
     // Scenario: the explicit backend token is the only accepted real-mode
     // credential source, and it is passed through unchanged to SDK calls.
     process.env.CANTON_BACKEND_TOKEN = 'explicit.jwt.value'
-    process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
+    process.env.CANTON_AUTH_AUDIENCE = 'https://canton.network.global'
     process.env.CANTON_AUTH_SECRET = 'unsafe'
     const config = loadConfig()
     assert.equal(config.canton.tokenSource, 'env')
@@ -75,7 +73,7 @@ describe('config loader', () => {
     // Scenario: mock mode is used for wallet-only UI iteration and must not
     // require any LocalNet token because all Canton calls are short-circuited.
     process.env.WALLET_SERVICE_MOCK = '1'
-    process.env.CANTON_AUTH_AUDIENCE = 'https://canton-barebones.local'
+    process.env.CANTON_AUTH_AUDIENCE = 'https://canton.network.global'
     process.env.CANTON_AUTH_SECRET = 'unsafe'
     const config = loadConfig()
     assert.equal(config.canton.tokenSource, 'none')

From 24ea3a732c131fac5fa7870a1102c16dc63333ec Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 14:51:46 -0300
Subject: [PATCH 03/98] feat(canton): run barebones on splice localnet

---
 canton-barebones/.env.example                 |  46 +++---
 canton-barebones/config/canton/app.conf       |  96 ------------
 .../config/canton/bootstrap.canton            |  15 --
 canton-barebones/config/postgres/init.sql     |   3 -
 .../config/splice/localnet-overrides.yaml     |   4 +
 .../nginx-app-provider-disabled.conf.template |   1 +
 canton-barebones/docker-compose.yaml          |  97 ++----------
 canton-barebones/package.json                 |   6 +-
 canton-barebones/scripts/deploy-dar.sh        |  54 +++++--
 canton-barebones/scripts/down.sh              |  18 +++
 canton-barebones/scripts/health-check.sh      |  91 +++++------
 canton-barebones/scripts/splice-common.sh     | 141 ++++++++++++++++++
 canton-barebones/scripts/up.sh                |  42 ++++++
 canton-barebones/test/splice-common.test.mjs  | 110 ++++++++++++++
 14 files changed, 435 insertions(+), 289 deletions(-)
 delete mode 100644 canton-barebones/config/canton/app.conf
 delete mode 100644 canton-barebones/config/canton/bootstrap.canton
 delete mode 100644 canton-barebones/config/postgres/init.sql
 create mode 100644 canton-barebones/config/splice/localnet-overrides.yaml
 create mode 100644 canton-barebones/config/splice/nginx-app-provider-disabled.conf.template
 create mode 100755 canton-barebones/scripts/down.sh
 create mode 100755 canton-barebones/scripts/splice-common.sh
 create mode 100755 canton-barebones/scripts/up.sh
 create mode 100644 canton-barebones/test/splice-common.test.mjs

diff --git a/canton-barebones/.env.example b/canton-barebones/.env.example
index c39a799a..6d364944 100644
--- a/canton-barebones/.env.example
+++ b/canton-barebones/.env.example
@@ -1,39 +1,31 @@
-# Canton barebones dev values. Copy to .env and edit if ports conflict.
+# Canton dApp Booster local Splice stack. Copy to .env before starting.
 
 COMPOSE_PROJECT_NAME=canton-barebones
 
-# Images
-CANTON_IMAGE=ghcr.io/digital-asset/decentralized-canton-sync/docker/canton:0.5.3
-POSTGRES_IMAGE=postgres:14
+# Official Splice LocalNet bundle. This stack activates sv + app-user UI
+# profiles and disables app-provider nginx routes. The shared backend
+# containers still expose app-provider ports because the bundle bakes them in.
+SPLICE_IMAGE_TAG=0.5.18
+SPLICE_BUNDLE_DIR=${HOME}/.canton-dappbooster/splice-localnet
+# Defaults to COMPOSE_PROJECT_NAME so Docker groups Splice and wallet-service together.
+# Override only when intentionally running Splice as a separate compose project.
+SPLICE_COMPOSE_PROJECT_NAME=canton-barebones
 
-# Postgres
-POSTGRES_HOST_PORT=3018
-POSTGRES_USER=canton
-POSTGRES_PASSWORD=canton
-POSTGRES_DB=postgres
-
-# Canton public ports on the host
-CANTON_LEDGER_API_PORT=3014
-CANTON_ADMIN_API_PORT=3015
-CANTON_JSON_API_PORT=3013
-CANTON_SEQUENCER_PUBLIC_PORT=3017
-CANTON_HTTP_HEALTH_PORT=3016
-
-# Canton internal auth for local/dev.
-# The participant accepts HS256 JWTs with this audience/secret.
-CANTON_AUTH_AUDIENCE=https://canton-barebones.local
+# LocalNet dev JWT recipe. These values are used only by scripts/mint-token.mjs.
+# Do not copy CANTON_AUTH_SECRET into Carpincho.
+CANTON_AUTH_AUDIENCE=https://canton.network.global
 CANTON_AUTH_SECRET=unsafe
-CANTON_ADMIN_USER_ID=wallet-service
 
-# Convenience token generated from the values above:
-# sub = CANTON_ADMIN_USER_ID, aud = CANTON_AUTH_AUDIENCE, alg = HS256, secret = CANTON_AUTH_SECRET.
-# Regenerate with: scripts/mint-token.sh wallet-service
-CANTON_ADMIN_TOKEN=mock-token-replace-with-scripts-mint-token-output
+# Required for wallet-service real mode.
+# Generate with:
+#   npm run canton:token -- ledger-api-user
+# Then paste the generated CANTON_BACKEND_TOKEN line here.
+CANTON_BACKEND_TOKEN=
 
-# Wallet-service (started by docker compose alongside Canton)
+# Wallet-service. It is started by npm run canton:up after Splice LocalNet.
 WALLET_SERVICE_PORT=3010
 WALLET_SERVICE_CORS_ORIGINS=http://localhost:3011
-NETWORK=canton:local
+NETWORK=canton:localnet
 WALLET_PROVIDER_ID=wallet-service
 WALLET_PROVIDER_VERSION=0.1.0
 WALLET_PROVIDER_URL=http://localhost:3010
diff --git a/canton-barebones/config/canton/app.conf b/canton-barebones/config/canton/app.conf
deleted file mode 100644
index c157a516..00000000
--- a/canton-barebones/config/canton/app.conf
+++ /dev/null
@@ -1,96 +0,0 @@
-_storage {
-  type = postgres
-  config {
-    dataSourceClass = "org.postgresql.ds.PGSimpleDataSource"
-    properties = {
-      serverName = ${DB_SERVER}
-      portNumber = 5432
-      user = ${DB_USER}
-      password = ${DB_PASSWORD}
-      tcpKeepAlive = true
-    }
-  }
-  parameters {
-    max-connections = 16
-    migrate-and-start = true
-  }
-}
-
-canton {
-  features {
-    enable-preview-commands = yes
-    enable-testing-commands = yes
-  }
-
-  parameters {
-    non-standard-config = yes
-  }
-
-  sequencers {
-    sequencer1 {
-      storage = ${_storage} {
-        config.properties.databaseName = canton_sequencer
-      }
-      public-api {
-        address = "0.0.0.0"
-        port = 5001
-      }
-      admin-api {
-        address = "0.0.0.0"
-        port = 5002
-      }
-      sequencer.type = BFT
-    }
-  }
-
-  mediators {
-    mediator1 {
-      storage = ${_storage} {
-        config.properties.databaseName = canton_mediator
-      }
-      admin-api {
-        address = "0.0.0.0"
-        port = 5202
-      }
-    }
-  }
-
-  participants {
-    participant1 {
-      storage = ${_storage} {
-        config.properties.databaseName = canton_participant
-      }
-
-      admin-api {
-        address = "0.0.0.0"
-        port = 5012
-      }
-
-      ledger-api {
-        address = "0.0.0.0"
-        port = 5011
-        max-token-lifetime = Inf
-        admin-token-config.admin-claim = true
-        auth-services = [{
-          type = unsafe-jwt-hmac-256
-          target-audience = ${CANTON_AUTH_AUDIENCE}
-          secret = ${CANTON_AUTH_SECRET}
-        }]
-        user-management-service.additional-admin-user-id = ${CANTON_ADMIN_USER_ID}
-        interactive-submission-service {
-          enable-verbose-hashing = true
-        }
-      }
-
-      http-ledger-api {
-        address = "0.0.0.0"
-        port = 7575
-      }
-
-      monitoring.http-health-server {
-        address = "0.0.0.0"
-        port = 7000
-      }
-    }
-  }
-}
diff --git a/canton-barebones/config/canton/bootstrap.canton b/canton-barebones/config/canton/bootstrap.canton
deleted file mode 100644
index ec778fa8..00000000
--- a/canton-barebones/config/canton/bootstrap.canton
+++ /dev/null
@@ -1,15 +0,0 @@
-try {
-  bootstrap.synchronizer_local()
-} catch {
-  case _: Throwable => println("local synchronizer already initialized; skipping bootstrap")
-}
-
-try {
-  participant1.synchronizers.connect_local(sequencer1, alias = "local")
-} catch {
-  case _: Throwable => println("participant already connected to local synchronizer; skipping connect")
-}
-
-utils.retry_until_true {
-  participant1.synchronizers.active("local")
-}
diff --git a/canton-barebones/config/postgres/init.sql b/canton-barebones/config/postgres/init.sql
deleted file mode 100644
index 56cc4b1a..00000000
--- a/canton-barebones/config/postgres/init.sql
+++ /dev/null
@@ -1,3 +0,0 @@
-CREATE DATABASE canton_participant;
-CREATE DATABASE canton_sequencer;
-CREATE DATABASE canton_mediator;
diff --git a/canton-barebones/config/splice/localnet-overrides.yaml b/canton-barebones/config/splice/localnet-overrides.yaml
new file mode 100644
index 00000000..0909026c
--- /dev/null
+++ b/canton-barebones/config/splice/localnet-overrides.yaml
@@ -0,0 +1,4 @@
+services:
+  nginx:
+    volumes:
+      - ${CANTON_BAREBONES_DIR}/config/splice/nginx-app-provider-disabled.conf.template:/etc/nginx/templates/app-provider.conf.template:ro
diff --git a/canton-barebones/config/splice/nginx-app-provider-disabled.conf.template b/canton-barebones/config/splice/nginx-app-provider-disabled.conf.template
new file mode 100644
index 00000000..4d437aa3
--- /dev/null
+++ b/canton-barebones/config/splice/nginx-app-provider-disabled.conf.template
@@ -0,0 +1 @@
+# app-provider UI containers are not part of this local stack.
diff --git a/canton-barebones/docker-compose.yaml b/canton-barebones/docker-compose.yaml
index a233c3ae..8db6f042 100644
--- a/canton-barebones/docker-compose.yaml
+++ b/canton-barebones/docker-compose.yaml
@@ -1,98 +1,23 @@
 services:
-  postgres:
-    image: "${POSTGRES_IMAGE}"
-    container_name: canton-barebones-postgres
-    environment:
-      POSTGRES_USER: "${POSTGRES_USER}"
-      POSTGRES_PASSWORD: "${POSTGRES_PASSWORD}"
-      POSTGRES_DB: "${POSTGRES_DB}"
-    ports:
-      - "${POSTGRES_HOST_PORT}:5432"
-    volumes:
-      - postgres-data:/var/lib/postgresql/data
-      - ./config/postgres/init.sql:/docker-entrypoint-initdb.d/001-init.sql:ro
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}"]
-      interval: 5s
-      timeout: 3s
-      retries: 20
-
-  canton:
-    image: "${CANTON_IMAGE}"
-    container_name: canton-barebones-canton
-    environment:
-      DB_SERVER: postgres
-      DB_USER: "${POSTGRES_USER}"
-      DB_PASSWORD: "${POSTGRES_PASSWORD}"
-      CANTON_AUTH_AUDIENCE: "${CANTON_AUTH_AUDIENCE}"
-      CANTON_AUTH_SECRET: "${CANTON_AUTH_SECRET}"
-      CANTON_ADMIN_USER_ID: "${CANTON_ADMIN_USER_ID}"
-      LOG_LEVEL_STDOUT: INFO
-      LOG_LEVEL_CANTON: INFO
-    ports:
-      - "${CANTON_LEDGER_API_PORT}:5011"
-      - "${CANTON_ADMIN_API_PORT}:5012"
-      - "${CANTON_JSON_API_PORT}:7575"
-      - "${CANTON_SEQUENCER_PUBLIC_PORT}:5001"
-      - "${CANTON_HTTP_HEALTH_PORT}:7000"
-    volumes:
-      - ./config/canton/app.conf:/app/app.conf:ro
-      - ./config/canton/bootstrap.canton:/app/bootstrap.canton:ro
-      - ./dars:/dars
-    entrypoint: ["/app/bin/canton"]
-    command:
-      - daemon
-      - --no-tty
-      - --log-encoder=json
-      - --log-level-stdout=INFO
-      - --log-level-canton=INFO
-      - --log-file-appender=off
-      - --config
-      - /app/app.conf
-      - --bootstrap
-      - /app/bootstrap.canton
-    depends_on:
-      postgres:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD-SHELL", "bash -c '</dev/tcp/127.0.0.1/7000'"]
-      interval: 5s
-      timeout: 3s
-      retries: 60
-      start_period: 20s
-
   wallet-service:
     build:
       context: ..
       dockerfile: canton-barebones/wallet-service/Dockerfile
     container_name: canton-barebones-wallet-service
+    extra_hosts:
+      - "host.docker.internal:host-gateway"
     environment:
-      CANTON_AUTH_AUDIENCE:   "${CANTON_AUTH_AUDIENCE}"
-      CANTON_AUTH_SECRET:     "${CANTON_AUTH_SECRET}"
-      CANTON_ADMIN_USER_ID:   "${CANTON_ADMIN_USER_ID:-wallet-service}"
-      CANTON_BACKEND_TOKEN:   "${CANTON_BACKEND_TOKEN:-}"
-      CANTON_JSON_API_URL:   "http://canton:7575"
-      CANTON_LEDGER_API_URL: "grpc://canton:5011"
-      CANTON_ADMIN_API_URL:  "grpc://canton:5012"
+      CANTON_BACKEND_TOKEN: "${CANTON_BACKEND_TOKEN}"
+      CANTON_JSON_API_URL: "http://host.docker.internal:2975"
+      CANTON_LEDGER_API_URL: "grpc://host.docker.internal:2901"
+      CANTON_ADMIN_API_URL: "grpc://host.docker.internal:2902"
       WALLET_SERVICE_PORT: "3010"
       WALLET_SERVICE_CORS_ORIGINS: "${WALLET_SERVICE_CORS_ORIGINS:-http://localhost:3011}"
-      NETWORK: "${NETWORK:-canton:local}"
-      WALLET_PROVIDER_ID:       "${WALLET_PROVIDER_ID:-wallet-service}"
-      WALLET_PROVIDER_VERSION:  "${WALLET_PROVIDER_VERSION:-0.1.0}"
-      WALLET_PROVIDER_URL:      "${WALLET_PROVIDER_URL:-http://localhost:3010}"
+      NETWORK: "${NETWORK:-canton:localnet}"
+      WALLET_PROVIDER_ID: "${WALLET_PROVIDER_ID:-wallet-service}"
+      WALLET_PROVIDER_VERSION: "${WALLET_PROVIDER_VERSION:-0.1.0}"
+      WALLET_PROVIDER_URL: "${WALLET_PROVIDER_URL:-http://localhost:3010}"
       WALLET_PROVIDER_USER_URL: "${WALLET_PROVIDER_USER_URL:-http://localhost:3010}"
-      WALLET_SERVICE_MOCK:      "${WALLET_SERVICE_MOCK:-}"
+      WALLET_SERVICE_MOCK: "${WALLET_SERVICE_MOCK:-}"
     ports:
       - "${WALLET_SERVICE_PORT:-3010}:3010"
-    depends_on:
-      canton:
-        condition: service_healthy
-    healthcheck:
-      test: ["CMD-SHELL", "wget -qO- http://127.0.0.1:3010/health >/dev/null || exit 1"]
-      interval: 5s
-      timeout: 3s
-      retries: 20
-      start_period: 5s
-
-volumes:
-  postgres-data:
diff --git a/canton-barebones/package.json b/canton-barebones/package.json
index a322848a..9188123e 100644
--- a/canton-barebones/package.json
+++ b/canton-barebones/package.json
@@ -3,10 +3,10 @@
   "private": true,
   "version": "0.1.0",
   "scripts": {
-    "up": "docker compose up -d --build",
-    "down": "docker compose down",
+    "up": "./scripts/up.sh",
+    "down": "./scripts/down.sh",
     "health": "./scripts/health-check.sh",
-    "token": "node ./scripts/mint-token.mjs wallet-service",
+    "token": "node ./scripts/mint-token.mjs",
     "lint": "biome check",
     "lint:fix": "biome check --write",
     "format": "biome format --write",
diff --git a/canton-barebones/scripts/deploy-dar.sh b/canton-barebones/scripts/deploy-dar.sh
index ba55ae94..c2c1032d 100755
--- a/canton-barebones/scripts/deploy-dar.sh
+++ b/canton-barebones/scripts/deploy-dar.sh
@@ -7,6 +7,14 @@ if [ "$#" -ne 1 ]; then
 fi
 
 ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+if [ -f "$ROOT/.env" ]; then
+  set -a
+  # shellcheck disable=SC1091
+  source "$ROOT/.env"
+  set +a
+fi
+
 DAR_PATH="$1"
 
 if [ ! -f "$DAR_PATH" ]; then
@@ -14,18 +22,34 @@ if [ ! -f "$DAR_PATH" ]; then
   exit 1
 fi
 
-mkdir -p "$ROOT/dars"
-DAR_NAME="$(basename "$DAR_PATH")"
-cp "$DAR_PATH" "$ROOT/dars/$DAR_NAME"
-
-docker compose --project-directory "$ROOT" exec -T canton /app/bin/canton \
-  run /dev/stdin \
-  --no-tty \
-  -C canton.remote-participants.participant1.ledger-api.address=127.0.0.1,canton.remote-participants.participant1.ledger-api.port=5011,canton.remote-participants.participant1.admin-api.address=127.0.0.1,canton.remote-participants.participant1.admin-api.port=5012 <<SCRIPT
-utils.retry_until_true {
-  participant1.synchronizers.active("local")
-}
-participant1.dars.upload("/dars/$DAR_NAME")
-SCRIPT
-
-echo "deployed $DAR_NAME"
+if [ -z "${CANTON_BACKEND_TOKEN:-}" ]; then
+  echo "CANTON_BACKEND_TOKEN is required. Generate one with: npm run canton:token -- ledger-api-user" >&2
+  exit 1
+fi
+
+json_api_url="${APP_USER_JSON_API_URL:-http://localhost:2975}"
+dar_name="$(basename "$DAR_PATH")"
+
+echo "Uploading $dar_name to app-user JSON API at $json_api_url"
+
+http_code="$(
+  curl -sS -o /dev/null -w '%{http_code}' \
+    -X POST \
+    "$json_api_url/v2/packages" \
+    -H "Authorization: Bearer $CANTON_BACKEND_TOKEN" \
+    -H "Content-Type: application/octet-stream" \
+    --data-binary "@$DAR_PATH"
+)"
+
+case "$http_code" in
+  200 | 204)
+    echo "deployed $dar_name to app-user"
+    ;;
+  409)
+    echo "$dar_name already deployed to app-user"
+    ;;
+  *)
+    echo "DAR upload failed with HTTP $http_code" >&2
+    exit 1
+    ;;
+esac
diff --git a/canton-barebones/scripts/down.sh b/canton-barebones/scripts/down.sh
new file mode 100755
index 00000000..f9192ea1
--- /dev/null
+++ b/canton-barebones/scripts/down.sh
@@ -0,0 +1,18 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/splice-common.sh"
+
+cd "$ROOT"
+
+log "Stopping wallet-service"
+docker compose --project-directory "$ROOT" down
+
+if [ -f "$LOCALNET_DIR/compose.yaml" ]; then
+  log "Stopping Splice LocalNet containers, preserving data volumes"
+  splice_compose down
+else
+  warn "Splice bundle is not present; skipping LocalNet down"
+fi
diff --git a/canton-barebones/scripts/health-check.sh b/canton-barebones/scripts/health-check.sh
index bbb4958c..ae158a38 100755
--- a/canton-barebones/scripts/health-check.sh
+++ b/canton-barebones/scripts/health-check.sh
@@ -1,52 +1,55 @@
 #!/usr/bin/env bash
 set -euo pipefail
 
-ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
-cd "$ROOT"
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/splice-common.sh"
 
-if [ -f "$ROOT/.env" ]; then
-  set -a
-  source "$ROOT/.env"
-  set +a
-fi
+cd "$ROOT"
 
-timeout="${HEALTH_TIMEOUT_SECONDS:-120}"
-health_port="${CANTON_HTTP_HEALTH_PORT:-3016}"
-deadline=$((SECONDS + timeout))
-
-while true; do
-  health_status="$(
-    docker compose ps --format json canton 2>/dev/null \
-      | sed -n 's/.*"Health":"\([^"]*\)".*/\1/p'
-  )"
-  health_body="$(
-    curl -fsS "http://127.0.0.1:${health_port}/health" 2>/dev/null || true
-  )"
-
-  if [ "$health_status" = "healthy" ] && grep -q "connected-synchronizer : Ok()" <<<"$health_body"; then
-    docker compose ps
-    echo "canton health-check succeeded"
-
-    wallet_service_port="${WALLET_SERVICE_PORT:-3010}"
-    wallet_service_attempts="${WALLET_SERVICE_HEALTH_ATTEMPTS:-20}"
-    for attempt in $(seq 1 "$wallet_service_attempts"); do
-      if curl -fsS "http://localhost:${wallet_service_port}/health" >/dev/null 2>&1; then
-        echo "wallet-service health-check succeeded (port ${wallet_service_port}, attempt ${attempt})"
-        exit 0
-      fi
-      sleep 3
-    done
-    echo "wallet-service health-check failed on port ${wallet_service_port} after ${wallet_service_attempts} attempts" >&2
-    docker compose logs --tail=120 wallet-service >&2
-    exit 1
+status=0
+
+# Checks one HTTP endpoint and records a non-zero final exit if it is down.
+check_http() {
+  local label="$1"
+  local url="$2"
+  printf '%-32s' "$label"
+  if curl -fsS "$url" >/dev/null 2>&1; then
+    printf 'UP   %s\n' "$url"
+  else
+    printf 'DOWN %s\n' "$url"
+    status=1
   fi
-
-  if (( SECONDS >= deadline )); then
-    docker compose ps
-    docker compose logs --tail=120 canton >&2
-    echo "canton health-check failed after ${timeout}s" >&2
-    exit 1
+}
+
+echo "Splice LocalNet"
+check_http "sv validator" "http://localhost:4903/api/validator/readyz"
+check_http "app-user validator" "http://localhost:2903/api/validator/readyz"
+check_http "app-user JSON API" "http://localhost:2975/readyz"
+check_http "app-user wallet UI" "http://wallet.localhost:2000"
+check_http "Scan UI" "http://scan.localhost:4000"
+check_http "SV UI" "http://sv.localhost:4000"
+
+echo ""
+echo "Carpincho bridge"
+check_http "wallet-service" "http://localhost:${WALLET_SERVICE_PORT:-3010}/health"
+
+echo ""
+if docker info >/dev/null 2>&1; then
+  if [ "$SPLICE_COMPOSE_PROJECT_NAME" = "$COMPOSE_PROJECT_NAME" ]; then
+    echo "Docker compose project: $COMPOSE_PROJECT_NAME"
+    COMPOSE_IGNORE_ORPHANS=true docker compose --project-directory "$ROOT" ps
+  else
+    echo "wallet-service compose:"
+    COMPOSE_IGNORE_ORPHANS=true docker compose --project-directory "$ROOT" ps
+    if [ -f "$LOCALNET_DIR/compose.yaml" ]; then
+      echo ""
+      echo "Splice compose:"
+      splice_compose ps
+    fi
   fi
+else
+  warn "Docker is not running; skipping container status"
+fi
 
-  sleep 2
-done
+exit "$status"
diff --git a/canton-barebones/scripts/splice-common.sh b/canton-barebones/scripts/splice-common.sh
new file mode 100755
index 00000000..3d599371
--- /dev/null
+++ b/canton-barebones/scripts/splice-common.sh
@@ -0,0 +1,141 @@
+#!/usr/bin/env bash
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+
+EXTERNAL_SPLICE_IMAGE_TAG="${SPLICE_IMAGE_TAG:-}"
+EXTERNAL_SPLICE_BUNDLE_DIR="${SPLICE_BUNDLE_DIR:-}"
+EXTERNAL_IMAGE_TAG="${IMAGE_TAG:-}"
+EXTERNAL_LOCALNET_DIR="${LOCALNET_DIR:-}"
+EXTERNAL_LOCALNET_ENV_DIR="${LOCALNET_ENV_DIR:-}"
+EXTERNAL_SPLICE_COMPOSE_PROJECT_NAME="${SPLICE_COMPOSE_PROJECT_NAME:-}"
+
+if [ -f "$ROOT/.env" ]; then
+  set -a
+  # shellcheck disable=SC1091
+  source "$ROOT/.env"
+  set +a
+fi
+
+[ -n "$EXTERNAL_SPLICE_IMAGE_TAG" ] && SPLICE_IMAGE_TAG="$EXTERNAL_SPLICE_IMAGE_TAG"
+[ -n "$EXTERNAL_SPLICE_BUNDLE_DIR" ] && SPLICE_BUNDLE_DIR="$EXTERNAL_SPLICE_BUNDLE_DIR"
+[ -n "$EXTERNAL_IMAGE_TAG" ] && IMAGE_TAG="$EXTERNAL_IMAGE_TAG"
+[ -n "$EXTERNAL_LOCALNET_DIR" ] && LOCALNET_DIR="$EXTERNAL_LOCALNET_DIR"
+[ -n "$EXTERNAL_LOCALNET_ENV_DIR" ] && LOCALNET_ENV_DIR="$EXTERNAL_LOCALNET_ENV_DIR"
+[ -n "$EXTERNAL_SPLICE_COMPOSE_PROJECT_NAME" ] && SPLICE_COMPOSE_PROJECT_NAME="$EXTERNAL_SPLICE_COMPOSE_PROJECT_NAME"
+
+SPLICE_IMAGE_TAG="${SPLICE_IMAGE_TAG:-${IMAGE_TAG:-0.5.18}}"
+IMAGE_TAG="${IMAGE_TAG:-$SPLICE_IMAGE_TAG}"
+COMPOSE_PROJECT_NAME="${COMPOSE_PROJECT_NAME:-canton-barebones}"
+SPLICE_BUNDLE_DIR="${SPLICE_BUNDLE_DIR:-$HOME/.canton-dappbooster/splice-localnet}"
+LOCALNET_DIR="${LOCALNET_DIR:-$SPLICE_BUNDLE_DIR/splice-node/docker-compose/localnet}"
+LOCALNET_ENV_DIR="${LOCALNET_ENV_DIR:-$LOCALNET_DIR/env}"
+SPLICE_COMPOSE_PROJECT_NAME="${SPLICE_COMPOSE_PROJECT_NAME:-$COMPOSE_PROJECT_NAME}"
+CANTON_BAREBONES_DIR="$ROOT"
+SPLICE_PROFILES=(sv app-user)
+
+export COMPOSE_PROJECT_NAME SPLICE_IMAGE_TAG IMAGE_TAG SPLICE_BUNDLE_DIR LOCALNET_DIR LOCALNET_ENV_DIR SPLICE_COMPOSE_PROJECT_NAME CANTON_BAREBONES_DIR
+
+# Prints a compact status line so stack scripts are easy to scan.
+log() {
+  printf '\033[1;36m==>\033[0m %s\n' "$*"
+}
+
+# Prints a warning without failing the stack startup.
+warn() {
+  printf '\033[1;33m[!]\033[0m %s\n' "$*" >&2
+}
+
+# Prints an error and exits so callers fail before half-starting infrastructure.
+die() {
+  printf '\033[1;31m[x]\033[0m %s\n' "$*" >&2
+  exit 1
+}
+
+# Expands to the official LocalNet docker compose command with our fixed profiles.
+splice_compose() {
+  docker compose \
+    --project-name "$SPLICE_COMPOSE_PROJECT_NAME" \
+    --env-file "$LOCALNET_DIR/compose.env" \
+    --env-file "$LOCALNET_DIR/env/common.env" \
+    -f "$LOCALNET_DIR/compose.yaml" \
+    -f "$LOCALNET_DIR/resource-constraints.yaml" \
+    -f "$ROOT/config/splice/localnet-overrides.yaml" \
+    --profile "${SPLICE_PROFILES[0]}" \
+    --profile "${SPLICE_PROFILES[1]}" \
+    "$@"
+}
+
+# Downloads the official Splice LocalNet bundle once and reuses it on later runs.
+ensure_splice_bundle() {
+  local compose_file="$LOCALNET_DIR/compose.yaml"
+  if [ -f "$compose_file" ]; then
+    log "Splice LocalNet bundle already present at $SPLICE_BUNDLE_DIR"
+    return 0
+  fi
+
+  local tarball="$SPLICE_BUNDLE_DIR/${SPLICE_IMAGE_TAG}_splice-node.tar.gz"
+  local url="${SPLICE_BUNDLE_URL:-https://github.com/digital-asset/decentralized-canton-sync/releases/download/v${SPLICE_IMAGE_TAG}/${SPLICE_IMAGE_TAG}_splice-node.tar.gz}"
+
+  log "Downloading Splice LocalNet bundle v${SPLICE_IMAGE_TAG}"
+  mkdir -p "$SPLICE_BUNDLE_DIR"
+  curl -fsSL --location "$url" -o "$tarball"
+
+  log "Extracting Splice LocalNet bundle"
+  tar -xzf "$tarball" -C "$SPLICE_BUNDLE_DIR"
+  rm -f "$tarball"
+
+  [ -f "$compose_file" ] || die "Splice LocalNet compose file not found after extraction: $compose_file"
+}
+
+# Waits for an HTTP endpoint to return success before the caller proceeds.
+wait_http() {
+  local url="$1"
+  local label="$2"
+  local timeout="${3:-300}"
+  local deadline=$((SECONDS + timeout))
+
+  while true; do
+    if curl -fsS "$url" >/dev/null 2>&1; then
+      log "$label ready"
+      return 0
+    fi
+    if ((SECONDS >= deadline)); then
+      die "$label did not become ready at $url within ${timeout}s"
+    fi
+    sleep 5
+  done
+}
+
+# Verifies local hostnames used by the official LocalNet nginx routes.
+check_localnet_hosts() {
+  local missing=()
+  local domain
+  for domain in wallet.localhost scan.localhost sv.localhost; do
+    if ! grep -q "$domain" /etc/hosts 2>/dev/null; then
+      missing+=("$domain")
+    fi
+  done
+
+  if [ "${#missing[@]}" -gt 0 ]; then
+    warn "Missing /etc/hosts entries: ${missing[*]}"
+    warn "Add: 127.0.0.1 wallet.localhost scan.localhost sv.localhost"
+  fi
+}
+
+# Reports low Docker memory before LocalNet fails with opaque container errors.
+check_docker_memory() {
+  local bytes gb
+  bytes="$(docker info --format '{{.MemTotal}}' 2>/dev/null || echo 0)"
+  gb=$((bytes / 1024 / 1024 / 1024))
+  if [ "$gb" -lt 7 ]; then
+    warn "Docker reports ~${gb}GB memory; Splice LocalNet needs about 8GB."
+  fi
+}
+
+# Ensures the real wallet-service has the explicit token required by LocalNet.
+require_backend_token() {
+  if [ "${WALLET_SERVICE_MOCK:-}" = "1" ]; then
+    return 0
+  fi
+  [ -n "${CANTON_BACKEND_TOKEN:-}" ] || die "CANTON_BACKEND_TOKEN is required. Generate one with: npm run canton:token -- ledger-api-user"
+}
diff --git a/canton-barebones/scripts/up.sh b/canton-barebones/scripts/up.sh
new file mode 100755
index 00000000..744a4062
--- /dev/null
+++ b/canton-barebones/scripts/up.sh
@@ -0,0 +1,42 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/splice-common.sh"
+
+cd "$ROOT"
+
+docker info >/dev/null 2>&1 || die "Docker is not running. Start Docker Desktop and retry."
+docker compose version >/dev/null 2>&1 || die "Docker Compose v2 is required."
+
+require_backend_token
+check_docker_memory
+check_localnet_hosts
+ensure_splice_bundle
+
+log "Pulling Splice LocalNet images"
+splice_compose pull --quiet || splice_compose pull
+
+log "Starting Splice LocalNet profiles: ${SPLICE_PROFILES[*]}"
+COMPOSE_IGNORE_ORPHANS=true splice_compose up -d
+
+wait_http "http://localhost:4903/api/validator/readyz" "sv validator" "${SPLICE_HEALTH_TIMEOUT_SECONDS:-300}"
+wait_http "http://localhost:2903/api/validator/readyz" "app-user validator" "${SPLICE_HEALTH_TIMEOUT_SECONDS:-300}"
+wait_http "http://localhost:2975/readyz" "app-user JSON API" "${SPLICE_HEALTH_TIMEOUT_SECONDS:-300}"
+
+log "Starting wallet-service"
+COMPOSE_IGNORE_ORPHANS=true docker compose --project-directory "$ROOT" up -d --build wallet-service
+wait_http "http://localhost:${WALLET_SERVICE_PORT:-3010}/health" "wallet-service" "${WALLET_SERVICE_HEALTH_TIMEOUT_SECONDS:-120}"
+
+cat <<EOF
+
+Local stack is up:
+  wallet-service          http://localhost:${WALLET_SERVICE_PORT:-3010}
+  app-user wallet UI      http://wallet.localhost:2000
+  app-user JSON API       http://localhost:2975
+  app-user Ledger API     grpc://localhost:2901
+  app-user Validator API  http://localhost:2903
+  Scan UI                 http://scan.localhost:4000
+  SV UI                   http://sv.localhost:4000
+EOF
diff --git a/canton-barebones/test/splice-common.test.mjs b/canton-barebones/test/splice-common.test.mjs
new file mode 100644
index 00000000..52350ed1
--- /dev/null
+++ b/canton-barebones/test/splice-common.test.mjs
@@ -0,0 +1,110 @@
+import assert from 'node:assert/strict'
+import { execFileSync } from 'node:child_process'
+import path from 'node:path'
+import { describe, it } from 'node:test'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const projectRoot = path.resolve(__dirname, '..')
+const commonScript = path.join(projectRoot, 'scripts/splice-common.sh')
+
+describe('Splice LocalNet shell config', () => {
+  it('starts only the sv and app-user LocalNet profiles', () => {
+    // Scenario: this stack activates only the app-user and SV UI profiles.
+    // The official shared backend containers still expose app-provider ports.
+    const output = execFileSync(
+      'bash',
+      ['-lc', `source "${commonScript}"; printf '%s\\n' "\${SPLICE_PROFILES[@]}"`],
+      {
+        cwd: projectRoot,
+        env: {
+          ...process.env,
+          SPLICE_IMAGE_TAG: '0.5.18',
+          SPLICE_BUNDLE_DIR: '/tmp/splice-localnet-test',
+        },
+        encoding: 'utf8',
+      },
+    )
+
+    assert.deepEqual(output.trim().split('\n'), ['sv', 'app-user'])
+  })
+
+  it('exports the official compose variables required by LocalNet', () => {
+    // Scenario: Docker Compose reads IMAGE_TAG and LocalNet paths from the
+    // environment before resolving image names and bind mounts.
+    const output = execFileSync(
+      'bash',
+      [
+        '-lc',
+        `source "${commonScript}"; printf '%s\\n' "$IMAGE_TAG" "$LOCALNET_DIR" "$LOCALNET_ENV_DIR"`,
+      ],
+      {
+        cwd: projectRoot,
+        env: {
+          ...process.env,
+          SPLICE_IMAGE_TAG: '0.5.18',
+          SPLICE_BUNDLE_DIR: '/tmp/splice-localnet-test',
+        },
+        encoding: 'utf8',
+      },
+    )
+
+    assert.deepEqual(output.trim().split('\n'), [
+      '0.5.18',
+      '/tmp/splice-localnet-test/splice-node/docker-compose/localnet',
+      '/tmp/splice-localnet-test/splice-node/docker-compose/localnet/env',
+    ])
+  })
+
+  it('uses the canton-barebones compose project and the local nginx override', () => {
+    // Scenario: Splice and wallet-service share one compose project so Docker
+    // groups all local stack containers under canton-barebones. The local
+    // nginx override still disables app-provider UI routes when that profile is off.
+    const output = execFileSync(
+      'bash',
+      ['-lc', `docker() { printf '%s\\n' "$@"; }; source "${commonScript}"; splice_compose config`],
+      {
+        cwd: projectRoot,
+        env: {
+          ...process.env,
+          SPLICE_IMAGE_TAG: '0.5.18',
+          SPLICE_BUNDLE_DIR: '/tmp/splice-localnet-test',
+        },
+        encoding: 'utf8',
+      },
+    )
+
+    const args = output.trim().split('\n')
+
+    assert.match(output, /--project-name\ncanton-barebones/)
+    assert.ok(args.includes(path.join(projectRoot, 'config/splice/localnet-overrides.yaml')))
+  })
+
+  it('starts Splice without removing other services from the shared project', () => {
+    // Scenario: Splice and wallet-service now share one compose project, so
+    // Splice startup must not ask Compose to remove services missing from the
+    // official Splice compose files.
+    const upScript = execFileSync('cat', [path.join(projectRoot, 'scripts/up.sh')], {
+      cwd: projectRoot,
+      encoding: 'utf8',
+    })
+
+    assert.doesNotMatch(upScript, /--remove-orphans/)
+    assert.match(upScript, /COMPOSE_IGNORE_ORPHANS=true splice_compose up -d/)
+  })
+
+  it('starts wallet-service without warning about Splice orphan services', () => {
+    // Scenario: wallet-service uses a small local compose file while Splice
+    // uses the official compose files. Both share one project, so the
+    // wallet-service startup command must explicitly ignore expected orphans.
+    const upScript = execFileSync('cat', [path.join(projectRoot, 'scripts/up.sh')], {
+      cwd: projectRoot,
+      encoding: 'utf8',
+    })
+
+    assert.match(
+      upScript,
+      /COMPOSE_IGNORE_ORPHANS=true docker compose --project-directory "\$ROOT" up -d --build wallet-service/,
+    )
+  })
+})

From 10ec438b17fbd427c25c97a21113e42018ece6c7 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 15:29:56 -0300
Subject: [PATCH 04/98] chore(dev-stack): remove local stack helper

---
 scripts/dev-stack.sh | 408 -------------------------------------------
 1 file changed, 408 deletions(-)
 delete mode 100755 scripts/dev-stack.sh

diff --git a/scripts/dev-stack.sh b/scripts/dev-stack.sh
deleted file mode 100755
index bc4a6a8b..00000000
--- a/scripts/dev-stack.sh
+++ /dev/null
@@ -1,408 +0,0 @@
-#!/usr/bin/env bash
-#
-# dev-stack.sh — start or stop the full local Canton dApp stack.
-#
-# Docker lifecycle is managed separately from the stack: start/quit Docker with
-# `docker-up` / `docker-down` (macOS only), the Docker app, or your CLI. `up`
-# and `down` assume Docker is already running and never start or quit it.
-#
-# Usage:
-#   ./scripts/dev-stack.sh             # interactive arrow-key menu (default)
-#   ./scripts/dev-stack.sh menu        # same as above
-#   ./scripts/dev-stack.sh install     # install + link every workspace from the repo root (npm install)
-#   ./scripts/dev-stack.sh docker-up   # macOS only: launch Docker Desktop, wait for the daemon
-#   ./scripts/dev-stack.sh up          # start the stack (containers, DAR, dev servers, extension)
-#   ./scripts/dev-stack.sh down        # stop dev servers and tear down containers
-#   ./scripts/dev-stack.sh docker-down # macOS only: quit Docker Desktop
-#   ./scripts/dev-stack.sh status      # show what is currently running
-#   ./scripts/dev-stack.sh extension   # build the Chrome extension and copy it to ~/Desktop
-#   ./scripts/dev-stack.sh mock-up     # mock-only: mocked wallet-service + carpincho web app (no Docker)
-#   ./scripts/dev-stack.sh mock-down   # stop the mocked wallet-service + carpincho web app only
-#
-# What `up` starts (in order; Docker must already be running):
-#   1. Canton + Postgres + wallet-service containers (npm run canton:up)
-#   2. Health checks (canton + wallet-service)
-#   3. Builds and deploys the Daml DAR (name derived from daml.yaml)
-#   4. Carpincho wallet dev server  -> http://localhost:3011  (background)
-#   5. dApp frontend dev server     -> http://localhost:3012  (background)
-#   6. Builds the Chrome extension and copies it to ~/Desktop/dist-extension
-#
-# `down` reverses 4/5 (kills the dev servers) and tears down the containers.
-
-set -euo pipefail
-
-# Resolve repo root from this script's location so it works from any cwd.
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
-cd "$ROOT_DIR"
-
-RUN_DIR="${TMPDIR:-/tmp}/cn-dev-stack"
-WALLET_LOG="$RUN_DIR/wallet-dev.log"
-DAPP_LOG="$RUN_DIR/dapp-dev.log"
-WALLET_PID="$RUN_DIR/wallet-dev.pid"
-DAPP_PID="$RUN_DIR/dapp-dev.pid"
-MOCK_WS_LOG="$RUN_DIR/mock-wallet-service.log"
-MOCK_WS_PID="$RUN_DIR/mock-wallet-service.pid"
-
-# Derive the DAR name from daml.yaml so renames/bumps need no edits here.
-DAML_DIR="dapp/daml"
-DAR_NAME="$(awk '/^name:/{n=$2} /^version:/{v=$2} END{print n"-"v".dar"}' "$DAML_DIR/daml.yaml")"
-DAR_PATH="$DAML_DIR/.daml/dist/$DAR_NAME"
-EXT_SRC="carpincho-wallet/dist-extension"
-EXT_DEST="$HOME/Desktop/$(basename "$EXT_SRC")"
-
-log()  { printf '\033[1;36m==>\033[0m %s\n' "$*"; }
-warn() { printf '\033[1;33m[!]\033[0m %s\n' "$*"; }
-die()  { printf '\033[1;31m[x]\033[0m %s\n' "$*" >&2; exit 1; }
-
-case "$DAR_NAME" in
-  -.dar | -*.dar | *-.dar) die "Could not derive DAR name from $DAML_DIR/daml.yaml (got '$DAR_NAME')" ;;
-esac
-
-wait_for() { # wait_for <seconds> <logfile> <grep-pattern> <label>
-  local timeout="$1" file="$2" pattern="$3" label="$4" i
-  for ((i = 0; i < timeout; i++)); do
-    if [ -f "$file" ] && grep -qiE "$pattern" "$file" 2>/dev/null; then
-      return 0
-    fi
-    sleep 1
-  done
-  warn "$label did not report ready within ${timeout}s (check $file)"
-  return 1
-}
-
-build_extension() {
-  # A fresh clone may have no deps yet; one root install links every workspace.
-  if [ ! -d node_modules ]; then
-    install_deps
-  fi
-
-  log "Building the Carpincho Chrome extension..."
-  npm run carpincho:build:extension
-  log "Copying extension to $EXT_DEST"
-  rm -rf "$EXT_DEST"
-  cp -R "$EXT_SRC" "$EXT_DEST"
-  log "Extension ready at $EXT_DEST"
-  echo "   Load it via chrome://extensions -> Developer mode -> Load unpacked"
-}
-
-install_deps() { # one root npm install links every workspace
-  log "Installing workspace dependencies (root npm install)..."
-  npm install
-  log "Workspaces installed and linked."
-}
-
-docker_up() { # macOS only — launch Docker Desktop and wait for the daemon
-  if [ "$(uname -s)" != "Darwin" ]; then
-    warn "docker-up is macOS only. Start Docker with your platform's tools, then run 'up'."
-    return 0
-  fi
-  if docker info >/dev/null 2>&1; then
-    log "Docker daemon already running."
-    return 0
-  fi
-  log "Starting Docker Desktop and waiting for the daemon..."
-  open -a Docker
-  local i
-  for ((i = 0; i < 120; i++)); do
-    if docker info >/dev/null 2>&1; then break; fi
-    sleep 1
-  done
-  docker info >/dev/null 2>&1 || die "Docker daemon did not come up within 120s"
-  log "Docker daemon is ready."
-}
-
-docker_down() { # macOS only — quit Docker Desktop
-  if [ "$(uname -s)" != "Darwin" ]; then
-    warn "docker-down is macOS only. Stop Docker with your platform's tools."
-    return 0
-  fi
-  log "Quitting Docker Desktop..."
-  osascript -e 'quit app "Docker Desktop"' 2>/dev/null \
-    || osascript -e 'quit app "Docker"' 2>/dev/null \
-    || warn "Could not quit Docker Desktop (already closed?)"
-}
-
-up() {
-  mkdir -p "$RUN_DIR"
-
-  # A fresh clone may have no deps yet; one root install links every workspace.
-  if [ ! -d node_modules ]; then
-    install_deps
-  fi
-
-  # Docker must already be running (start it via 'docker-up', the app, or your CLI).
-  docker info >/dev/null 2>&1 \
-    || die "Docker daemon not reachable. Start Docker first (menu: docker-up, the Docker app, or your CLI), then run 'up'."
-
-  # canton .env (README step) — create from example if missing.
-  if [ ! -f canton-barebones/.env ]; then
-    log "Creating canton-barebones/.env from .env.example"
-    cp canton-barebones/.env.example canton-barebones/.env
-  fi
-
-  # 1. Containers
-  log "Bringing up Canton + Postgres + wallet-service containers..."
-  npm run canton:up
-
-  # 2. Health
-  log "Checking Canton health..."
-  npm run canton:health
-  log "Checking wallet-service health..."
-  npm run wallet-service:health && echo
-
-  # 3. Build + deploy DAR
-  log "Building the $DAR_NAME DAR..."
-  npm run build-dar -- "$DAML_DIR"
-  log "Deploying the DAR to Canton..."
-  npm run deploy-dar -- "$DAR_PATH"
-
-  # 4. Carpincho wallet dev server (3011)
-  if lsof -nP -iTCP:3011 -sTCP:LISTEN >/dev/null 2>&1; then
-    warn "Port 3011 already in use; skipping wallet dev server."
-  else
-    log "Starting Carpincho wallet dev server -> http://localhost:3011"
-    nohup npm run wallet:dev >"$WALLET_LOG" 2>&1 &
-    echo $! >"$WALLET_PID"
-    wait_for 60 "$WALLET_LOG" "ready in|localhost:3011" "wallet dev server" || true
-  fi
-
-  # 5. dApp frontend dev server (3012)
-  if lsof -nP -iTCP:3012 -sTCP:LISTEN >/dev/null 2>&1; then
-    warn "Port 3012 already in use; skipping dApp dev server."
-  else
-    log "Starting dApp frontend dev server -> http://localhost:3012"
-    nohup npm run app:dev >"$DAPP_LOG" 2>&1 &
-    echo $! >"$DAPP_PID"
-    wait_for 60 "$DAPP_LOG" "ready in|localhost:3012" "dApp dev server" || true
-  fi
-
-  # 6. Build extension + copy to Desktop
-  build_extension
-
-  echo
-  log "Stack is up:"
-  cat <<EOF
-   wallet-service   http://localhost:3010
-   carpincho wallet http://localhost:3011   (log: $WALLET_LOG)
-   dApp frontend    http://localhost:3012   (log: $DAPP_LOG)
-   Canton JSON API  http://localhost:3013
-   extension folder $EXT_DEST
-EOF
-  echo "   Load the extension via chrome://extensions -> Developer mode -> Load unpacked"
-}
-
-stop_pidfile() { # stop_pidfile <pidfile> <label>
-  local pidfile="$1" label="$2" pid
-  if [ -f "$pidfile" ]; then
-    pid="$(cat "$pidfile" 2>/dev/null || true)"
-    if [ -n "${pid:-}" ] && kill -0 "$pid" 2>/dev/null; then
-      log "Stopping $label (pid $pid)"
-      # kill the npm process group so child vite dies too
-      kill "$pid" 2>/dev/null || true
-      pkill -P "$pid" 2>/dev/null || true
-    fi
-    rm -f "$pidfile"
-  fi
-}
-
-down() {
-  # 1. Dev servers
-  stop_pidfile "$WALLET_PID" "wallet dev server"
-  stop_pidfile "$DAPP_PID" "dApp dev server"
-  # Belt-and-suspenders: kill any stray vite on our ports.
-  pkill -f "carpincho-wallet run dev" 2>/dev/null || true
-  pkill -f "vite --host localhost --port 3012" 2>/dev/null || true
-
-  # 2. Containers (only if the daemon is reachable). Docker itself is left
-  # running — quit it separately with 'docker-down', the app, or your CLI.
-  if docker info >/dev/null 2>&1; then
-    log "Tearing down Canton containers..."
-    npm run canton:down || warn "canton:down reported an error"
-  else
-    warn "Docker daemon not reachable; skipping canton:down"
-  fi
-
-  echo
-  log "Stack is down. Ports 3010-3018:"
-  if lsof -nP -iTCP:3010-3018 -sTCP:LISTEN >/dev/null 2>&1; then
-    lsof -nP -iTCP:3010-3018 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
-  else
-    echo "   (all free)"
-  fi
-}
-
-wait_http() { # wait_http <seconds> <url> <label>
-  local timeout="$1" url="$2" label="$3" i
-  for ((i = 0; i < timeout; i++)); do
-    if curl -fsS "$url" >/dev/null 2>&1; then return 0; fi
-    sleep 1
-  done
-  warn "$label did not answer at $url within ${timeout}s"
-  return 1
-}
-
-mock_up() {
-  mkdir -p "$RUN_DIR"
-
-  # Mock mode needs no Docker — it short-circuits the Canton SDK. A fresh clone
-  # may have no deps yet; one root install links every workspace, including the
-  # wallet-service started below.
-  if [ ! -d node_modules ]; then
-    install_deps
-  fi
-
-  # Mocked data server (wallet-service in MOCK MODE) -> http://localhost:3010
-  if lsof -nP -iTCP:3010 -sTCP:LISTEN >/dev/null 2>&1; then
-    warn "Port 3010 already in use; skipping mocked wallet-service."
-  else
-    log "Starting mocked wallet-service (MOCK MODE) -> http://localhost:3010"
-    WALLET_SERVICE_MOCK=1 nohup npm run wallet-service:dev >"$MOCK_WS_LOG" 2>&1 &
-    echo $! >"$MOCK_WS_PID"
-    wait_http 60 "http://localhost:3010/health" "mocked wallet-service" || true
-  fi
-
-  # Carpincho web app -> http://localhost:3011
-  if lsof -nP -iTCP:3011 -sTCP:LISTEN >/dev/null 2>&1; then
-    warn "Port 3011 already in use; skipping carpincho web app."
-  else
-    log "Starting Carpincho web app -> http://localhost:3011"
-    nohup npm run wallet:dev >"$WALLET_LOG" 2>&1 &
-    echo $! >"$WALLET_PID"
-    wait_for 60 "$WALLET_LOG" "ready in|localhost:3011" "carpincho web app" || true
-  fi
-
-  echo
-  log "Mock stack is up:"
-  cat <<EOF
-   mocked wallet-service  http://localhost:3010   (log: $MOCK_WS_LOG)
-   carpincho web app      http://localhost:3011   (log: $WALLET_LOG)
-EOF
-  echo "   No Docker / Canton / dApp frontend in this mode. Stop with: $0 mock-down"
-}
-
-mock_down() {
-  stop_pidfile "$MOCK_WS_PID" "mocked wallet-service"
-  stop_pidfile "$WALLET_PID" "carpincho web app"
-  # Belt-and-suspenders for stray processes on our ports.
-  pkill -f "WALLET_SERVICE_MOCK" 2>/dev/null || true
-  pkill -f "tsx watch src/server.ts" 2>/dev/null || true
-  pkill -f "carpincho-wallet run dev" 2>/dev/null || true
-
-  echo
-  log "Mock stack is down. Ports 3010/3011:"
-  if lsof -nP -iTCP:3010,3011 -sTCP:LISTEN >/dev/null 2>&1; then
-    lsof -nP -iTCP:3010,3011 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
-  else
-    echo "   (both free)"
-  fi
-}
-
-menu() {
-  if [ ! -t 0 ] || [ ! -t 1 ]; then
-    die "The menu needs an interactive terminal. Run a subcommand directly instead."
-  fi
-
-  # Display label per item; `keys` is the matching action dispatched on select.
-  local keys=(install docker-up docker-down up down mock-up mock-down extension quit)
-  local labels=("Install" "Docker up" "Docker down" "Stack up" "Stack down" "Wallet up" "Wallet down" "Build extension" "Quit")
-  local descs=(
-    "install + link every workspace (root npm install)"
-    "start Docker Desktop, wait for daemon (macOS)"
-    "quit Docker Desktop (macOS)"
-    "containers, DAR, dev servers, extension"
-    "stop dev servers + tear down containers"
-    "mock wallet-service + carpincho web app (no Docker)"
-    "stop the mock server + web app only"
-    "build the extension + copy to ~/Desktop"
-    "exit this menu"
-  )
-  local n=${#keys[@]} sel=0 key rest i num choice
-
-  tput civis 2>/dev/null || true                       # hide cursor
-  trap 'tput cnorm 2>/dev/null || true' EXIT INT TERM  # restore on exit
-
-  while true; do
-    clear
-    printf '\n  \033[1mCanton dApp dev stack\033[0m\n\n'
-    for i in "${!keys[@]}"; do
-      num=$((i + 1))
-      if [ "$i" -eq "$sel" ]; then
-        printf '  \033[7m  %d- %-16s %s  \033[0m\n' "$num" "${labels[$i]}" "${descs[$i]}"
-      else
-        printf '     %d- %-16s %s\n' "$num" "${labels[$i]}" "${descs[$i]}"
-      fi
-    done
-    printf '\n  \033[2m[1-%d] jump    [up/down or j/k] move    [enter] select    [q] quit\033[0m\n' "$n"
-
-    IFS= read -rsn1 key
-    case "$key" in
-      $'\033')                       # escape sequence (arrow keys)
-        IFS= read -rsn2 rest
-        case "$rest" in
-          '[A') sel=$(((sel - 1 + n) % n)) ;;
-          '[B') sel=$(((sel + 1) % n)) ;;
-        esac
-        continue ;;
-      k) sel=$(((sel - 1 + n) % n)); continue ;;
-      j) sel=$(((sel + 1) % n)); continue ;;
-      [1-9])                          # number key jumps the highlight
-        [ "$key" -le "$n" ] && sel=$((key - 1))
-        continue ;;
-      q | Q) break ;;
-      '') ;;                          # Enter -> dispatch below
-      *) continue ;;
-    esac
-
-    choice="${keys[$sel]}"
-    [ "$choice" = "quit" ] && break
-
-    tput cnorm 2>/dev/null || true
-    clear
-    printf '\n'
-    # Run in a subshell so a failing action returns to the menu instead of
-    # killing the whole script under `set -e`.
-    case "$choice" in
-      install)     ( install_deps ) || warn "install did not finish cleanly" ;;
-      docker-up)   ( docker_up ) || warn "docker-up did not finish cleanly" ;;
-      docker-down) ( docker_down ) || warn "docker-down did not finish cleanly" ;;
-      up)          ( up ) || warn "up did not finish cleanly (see output above)" ;;
-      down)        ( down ) || warn "down did not finish cleanly" ;;
-      mock-up)     ( mock_up ) || warn "mock-up did not finish cleanly" ;;
-      mock-down)   ( mock_down ) || warn "mock-down did not finish cleanly" ;;
-      extension)   ( build_extension ) || warn "extension build failed" ;;
-    esac
-    printf '\n  \033[2mPress Enter to return to the menu...\033[0m'
-    read -r _ || true
-    tput civis 2>/dev/null || true
-  done
-
-  tput cnorm 2>/dev/null || true
-  clear
-}
-
-status() {
-  log "Containers:"
-  docker ps --filter "name=canton-barebones" --format '   {{.Names}}  {{.Status}}' 2>/dev/null \
-    || echo "   (docker daemon not running)"
-  log "Listening ports 3010-3018:"
-  if lsof -nP -iTCP:3010-3018 -sTCP:LISTEN >/dev/null 2>&1; then
-    lsof -nP -iTCP:3010-3018 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
-  else
-    echo "   (none)"
-  fi
-}
-
-case "${1:-menu}" in
-  menu)        menu ;;
-  install)     install_deps ;;
-  docker-up)   docker_up ;;
-  up)          up ;;
-  down)        down ;;
-  docker-down) docker_down ;;
-  status)      status ;;
-  extension)   build_extension ;;
-  mock-up)     mock_up ;;
-  mock-down)   mock_down ;;
-  *)           die "Usage: $0 {menu|install|docker-up|up|down|docker-down|status|extension|mock-up|mock-down}" ;;
-esac

From 4c67f44b0a30cb53dfee4204f9604e1737fe75e1 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 15:30:37 -0300
Subject: [PATCH 05/98] docs: document splice localnet stack

---
 AGENTS.md                                 |   1 -
 README.md                                 | 239 ++++++++--------------
 architecture.md                           | 183 +++++++----------
 canton-barebones/README.md                | 114 ++++++++---
 canton-barebones/wallet-service/README.md |  22 +-
 5 files changed, 266 insertions(+), 293 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 641bea56..1f48fb8c 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -82,7 +82,6 @@ Subproject docs must not restate root rules. They should describe only their loc
   - `npm run build-dar -- <daml-project>` / `npm run deploy-dar -- <dar>`
   - `npm run carpincho:build:extension`
   - `npm run app:dev`
-- For local-stack convenience, [`scripts/dev-stack.sh`](scripts/dev-stack.sh) wraps the shortcuts above behind an interactive menu (run with no args) or direct subcommands (`install`, `docker-up`, `up`, `down`, `docker-down`, `mock-up`, `mock-down`, `extension`, `status`). The `npm` scripts remain canonical; the helper just orchestrates them. See [`README.md`](README.md).
 - Local ports are intentionally assigned in the `3010+` range (see table above). Do not change them without updating every subproject's defaults.
 - Treat the single root `package-lock.json` as authoritative. Do not regenerate it as part of unrelated changes, and do not reintroduce per-package lockfiles.
 - The root `package.json` pins `@canton-network/dapp-sdk` to `1.1.0` via `overrides`: consumers declare `^1.1.0`, but `1.2.0` is intentionally held back. npm 11 does not persist `overrides` into `package-lock.json`, so the pin is enforced by the override on every relock and by the resolved `1.1.0` entry in the lock on every plain install. Do not bump it without testing the dApp flow against the newer SDK.
diff --git a/README.md b/README.md
index 6a6da6a8..3e9f354f 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,33 @@
 # Canton dApp Booster
 
-Minimal local stack:
+Local Canton Network stack for wallet-first dApp experiments.
 
 ```mermaid
 flowchart TD
   fe["dapp/frontend<br/>dApp frontend<br/>http://localhost:3012"]
   wallet["carpincho-wallet<br/>Vault + signer<br/>http://localhost:3011"]
-  ws["canton-barebones/wallet-service<br/>Canton bridge<br/>http://localhost:3010"]
-  cb["canton-barebones<br/>Participant JSON API http://localhost:3013<br/>Ledger/Admin gRPC localhost:3014 / 3015"]
-  dar["dapp/daml<br/>quickstart-tally DAR<br/>.daml/dist/*.dar"]
+  ws["canton-barebones/wallet-service<br/>External-party bridge<br/>http://localhost:3010"]
+  au["Splice app-user<br/>primary local validator<br/>JSON API http://localhost:2975"]
+  sv["Splice sv<br/>SV / DSO / synchronizer side"]
+  scan["Scan<br/>Splice read model<br/>http://scan.localhost:4000"]
+  dar["dapp/daml<br/>quickstart-tally DAR"]
 
   fe <-->|"Injected CIP-0103 provider<br/>optional WalletConnect"| wallet
-  wallet -->|"JSON-RPC /rpc<br/>prepare, execute, read, onboard"| ws
-  ws -->|"Canton JSON API<br/>self-minted JWT"| cb
-  dar -->|"deploy DAR package"| cb
-```
-
-The dApp frontend knows the Tally DAML signature and talks to Carpincho through the injected CIP-0103 browser provider. Carpincho owns the local signing key and uses the wallet service to prepare, read, and execute against the Canton participant. WalletConnect remains available as an optional fallback path.
+  wallet -->|"external-party onboarding"| ws
+  ws -->|"Bearer CANTON_BACKEND_TOKEN"| au
+  au <--> sv
+  dar -->|"deploy package"| au
+```
+
+`canton:up` activates the official Splice LocalNet `sv` and `app-user` Docker
+profiles, then starts wallet-service. It does not start Keycloak or OIDC.
+The app-provider UI containers are not started; a local compose override
+disables their Nginx routes. The official shared Canton/Splice containers still
+expose app-provider backend ports because the bundle bakes that config in.
+Splice and wallet-service share the `canton-barebones` Docker Compose project,
+so Docker groups the full local stack together.
+`app-user` is Splice's technical name for the primary local validator; it is not
+the Carpincho user.
 
 ## Installation
 
@@ -24,175 +35,80 @@ Prerequisites:
 
 - Node.js 24
 - npm `>=7`
-- Docker
+- Docker with about 8 GB memory available
 - `dpm` on `PATH` (DAML SDK 3.4.11), required for building DARs
 
-### Recommended: dappbooster installer
-
-```bash
-npx dappbooster --canton
-```
-
-### Manual
-
-npm workspaces monorepo; one install from the repo root links every package:
+Install workspace dependencies:
 
 ```bash
 npm install
 ```
 
-### Environment files
-
-#### Mandatory
+Create the local env file:
 
 ```bash
 cp canton-barebones/.env.example canton-barebones/.env
 ```
 
-#### Optional
-
-Only for the WalletConnect fallback. Copy each and set `VITE_WC_PROJECT_ID` (see [Optional: WalletConnect connect path](#optional-walletconnect-connect-path)):
+Generate the backend token and paste the printed `CANTON_BACKEND_TOKEN=...`
+line into `canton-barebones/.env`:
 
 ```bash
-cp carpincho-wallet/.env.local.example carpincho-wallet/.env.local
-cp dapp/frontend/.env.local.example dapp/frontend/.env.local
+npm run canton:token -- ledger-api-user
 ```
 
-## Dev stack script
+Token configuration:
 
-[`scripts/dev-stack.sh`](scripts/dev-stack.sh) automates the manual Quick Start below. Run it with no arguments for an interactive menu (navigate with arrow keys or `j`/`k`, jump with number keys `1`-`9`, select with Enter, quit with `q`):
+| Name | What It Is | Who Uses It |
+| --- | --- | --- |
+| `CANTON_AUTH_AUDIENCE` | JWT audience recipe value | token script |
+| `CANTON_AUTH_SECRET` | local unsafe JWT signing secret | token script only |
+| `CANTON_BACKEND_TOKEN` | generated JWT pasted into `.env` | wallet-service |
+| Carpincho LocalNet token | generated JWT pasted into Carpincho settings | Carpincho |
 
-```bash
-./scripts/dev-stack.sh
-```
+The token script uses `ledger-api-user` as the default JWT subject. Generate
+another token with the same script or reuse the backend token locally. Do not
+copy `CANTON_AUTH_SECRET` into Carpincho.
 
-Or call an action directly:
+Optional WalletConnect fallback:
 
 ```bash
-./scripts/dev-stack.sh <action>
+cp carpincho-wallet/.env.local.example carpincho-wallet/.env.local
+cp dapp/frontend/.env.local.example dapp/frontend/.env.local
 ```
 
-| Menu item | Action | What it does |
-|-----------|--------|--------------|
-| Install | `install` | Install and link every workspace from the repo root (`npm install`). |
-| Docker up | `docker-up` | Launch Docker Desktop and wait for the daemon (macOS only). |
-| Docker down | `docker-down` | Quit Docker Desktop (macOS only). |
-| Stack up | `up` | Bring up containers, build + deploy the DAR, start the wallet (3011) and dApp (3012) dev servers, build the extension. |
-| Stack down | `down` | Stop the dev servers and tear down the containers. |
-| Wallet up | `mock-up` | Start the mocked wallet-service (3010) + Carpincho web app (3011) with no Docker. |
-| Wallet down | `mock-down` | Stop the mocked wallet-service + Carpincho web app only. |
-| Build extension | `extension` | Build the Chrome extension and copy it to `~/Desktop/dist-extension`. |
-| (CLI only) | `status` | Show running containers and listening ports. |
-
-Notes:
-
-- Docker lifecycle is managed separately from the stack: `up` and `down` assume Docker is already running and never start or quit it. Start/quit Docker with `docker-up` / `docker-down`, the Docker app, or your own CLI.
-- `up` requires Docker running and `dpm` on `PATH` (for the DAR build). It fails fast with a clear message if the daemon is not reachable.
-- Background dev-server PIDs and logs live under `${TMPDIR:-/tmp}/cn-dev-stack/`.
-- The two Docker actions are macOS only; on other platforms they warn and no-op, while every other action runs unchanged.
-
-For the manual, step-by-step flow (and the underlying `npm` scripts the helper wraps), follow the rest of this document.
+Set `VITE_WC_PROJECT_ID` in both files only if you use WalletConnect.
 
 ## Quick Start
 
-Run the packages in this order for the local dApp flow.
-
-## canton-barebones
-
-Start Canton:
+Start the stack:
 
 ```bash
 npm run canton:up
 npm run canton:health
 ```
 
-## deploy dars
-
-Build:
+Build and deploy the sample DAR:
 
 ```bash
 npm run build-dar -- dapp/daml
-```
-
-Make sure Canton is running:
-
-```bash
-npm run canton:health
-```
-
-Deploy DAR:
-
-```bash
 npm run deploy-dar -- dapp/daml/.daml/dist/quickstart-tally-0.0.1.dar
 ```
 
-Use the same format for any other DAML project and DAR:
-
-```bash
-npm run build-dar -- <path/to/daml/project>
-npm run deploy-dar -- <path/to/file.dar>
-```
-
-`canton:health` must return OK before deploying; otherwise the DAR upload can fail.
-
-## wallet service
-
-Already started by `npm run canton:up`. Verify with:
+Verify wallet-service:
 
 ```bash
 npm run wallet-service:health
 ```
 
-The service self-mints its Canton JWT from `CANTON_AUTH_AUDIENCE` / `CANTON_AUTH_SECRET` / `CANTON_ADMIN_USER_ID` in `canton-barebones/.env`, so there is no token copy-paste step.
-
-For host-side iteration (mock mode, no Docker required):
-
-```bash
-WALLET_SERVICE_MOCK=1 npm run wallet-service:dev
-```
-
-## wallet
-
-### Install the extension from the Chrome Web Store
-
-WIP. The extension is not deployed there yet.
-
-### Use the extension from source
-
-Build the extension:
-
-```bash
-npm run carpincho:build:extension
-```
-
-The build output is:
-
-```text
-carpincho-wallet/dist-extension
-```
-
-Then load it in Chrome with the shared steps below.
-
-### Use the extension from GitHub release source
-
-WIP. Release artifacts are not available yet.
-
-After downloading and unpacking a release artifact, load it in Chrome with the shared steps below.
-
-### Load an unpacked extension in Chrome
-
-1. Open `chrome://extensions/`.
-2. Enable `Developer mode`.
-3. Click `Load unpacked`.
-4. Select the unpacked extension folder (`carpincho-wallet/dist-extension` for a source build).
-
-## dapp
+Start Carpincho and the dApp:
 
 ```bash
+npm run wallet:dev
 npm run app:dev
 ```
 
-Open:
+Open the dApp:
 
 ```text
 http://localhost:3012
@@ -200,37 +116,46 @@ http://localhost:3012
 
 In the frontend:
 
-1. Keep `canton:local` in settings.
+1. Keep `canton:localnet` in settings.
 2. Click `Connect with Carpincho`.
 3. Approve the request in Carpincho.
 
-### Optional: WalletConnect connect path
-
-The Carpincho extension path above works through the injected CIP-0103 provider and does not require a Reown project id. The `Connect with WalletConnect` button is also available, but it requires a Reown project id. Without it, connecting via WalletConnect throws.
+## Extension
 
-Get a project id from https://cloud.reown.com, then set `VITE_WC_PROJECT_ID` in both:
-
-```text
-dapp/frontend/.env.local
-carpincho-wallet/.env.local
-```
+Build the extension:
 
 ```bash
-VITE_WC_PROJECT_ID=your_reown_project_id
+npm run carpincho:build:extension
 ```
 
-## Ports
-
-Local ports are intentionally assigned in the `3010+` range:
-
-| Component                   | URL / Port              |
-| --------------------------- | ----------------------- |
-| Wallet service              | `http://localhost:3010` |
-| Carpincho wallet            | `http://localhost:3011` |
-| dApp frontend               | `http://localhost:3012` |
-| Canton JSON API             | `http://localhost:3013` |
-| Canton Ledger API           | `grpc://localhost:3014` |
-| Canton Admin API            | `grpc://localhost:3015` |
-| Canton health               | `http://localhost:3016` |
-| Canton sequencer public API | `localhost:3017`        |
-| Canton Postgres             | `localhost:3018`        |
+Load `carpincho-wallet/dist-extension` from `chrome://extensions` with
+Developer mode enabled.
+
+## Services And Ports
+
+| Service | What It Is | URL / Port | Who Uses It |
+| --- | --- | --- | --- |
+| wallet-service | Carpincho bridge for external-party onboarding | `http://localhost:3010` | Carpincho |
+| Carpincho wallet | Browser wallet UI/provider | `http://localhost:3011` | user/dApp |
+| dApp frontend | Example dApp | `http://localhost:3012` | user |
+| app-user Wallet UI | Official Splice wallet UI for app-user | `http://wallet.localhost:2000` | optional/manual |
+| app-user Ledger API | gRPC Ledger API | `grpc://localhost:2901` | SDK/tools |
+| app-user Admin API | gRPC Admin API | `grpc://localhost:2902` | wallet-service/tools |
+| app-user Validator API | Splice validator readiness/API | `http://localhost:2903` | health/tools |
+| app-user JSON API | JSON Ledger API | `http://localhost:2975` | wallet-service/tools |
+| app-user Validator proxy | wallet-sdk validator route | `http://localhost:2000/api/validator` | Carpincho |
+| app-provider backend APIs | Official bundle backend wiring, unused here | `grpc://localhost:3901`, `grpc://localhost:3902`, `http://localhost:3903`, `http://localhost:3975` | not used |
+| app-provider UI port | Nginx port exposed by the bundle; routes disabled here | `http://localhost:3000` | not used |
+| Scan UI | Splice explorer/read model UI | `http://scan.localhost:4000` | optional/manual |
+| Scan API | Splice indexed API | `http://scan.localhost:4000/api/scan` | Carpincho/tools |
+| Amulet Registry | token metadata via scan proxy | `http://localhost:2000/api/validator/v0/scan-proxy` | Carpincho/tools |
+| SV UI | Super Validator operations UI | `http://sv.localhost:4000` | optional/manual |
+| sv Ledger/Admin/JSON APIs | Official SV participant APIs | `grpc://localhost:4901`, `grpc://localhost:4902`, `http://localhost:4975` | Splice internals/tools |
+| sv Validator API | SV readiness/admin surface | `http://localhost:4903` | health checks |
+| PostgreSQL | Splice LocalNet DB | `localhost:5432` | LocalNet containers/tools |
+
+If `wallet.localhost`, `scan.localhost`, or `sv.localhost` do not resolve, add:
+
+```text
+127.0.0.1 wallet.localhost scan.localhost sv.localhost
+```
diff --git a/architecture.md b/architecture.md
index b9de9c96..42f053a3 100644
--- a/architecture.md
+++ b/architecture.md
@@ -1,124 +1,97 @@
 # Architecture Overview — Canton dApp Booster
 
-<!-- Monorepo-level architecture. Captures the shape of the whole stack:
-     subprojects, ports, data flow between components, environment variables.
-     For wallet-internal architecture (vault, CIP-0103 provider, extension
-     scripts), see carpincho-wallet/architecture.md. -->
-
-## Tech Stack (per subproject)
+## Tech Stack
 
 | Subproject | Stack | Purpose |
-|------------|-------|---------|
-| `canton-barebones/` | Docker Compose + Bash + Node scripts | Local Canton participant node, Postgres, mint-token helper, DAR deploy script, health-check |
-| `dapp/daml/` | DAML (`dpm` build) | `quickstart-tally` model — DAR consumed by Canton |
-| `canton-barebones/wallet-service/` | Node 24 + Express 5 + TypeScript + `@canton-network/wallet-sdk` | JSON-RPC bridge between the wallet and the Canton participant JSON API. Started by `npm run canton:up` as a docker-compose service. Self-mints its Canton JWT at boot from `CANTON_AUTH_AUDIENCE` / `CANTON_AUTH_SECRET`. `WALLET_SERVICE_MOCK=1` (`src/mock.ts`) short-circuits the dispatcher with canned responses. |
-| `carpincho-wallet/` | Vite 6 + React 18 + Tailwind v4 + Radix UI + Biome + WalletConnect Sign Client 2.x + `@noble/ed25519` | CIP-0103 wallet (web + Chrome extension), encrypted local vault, signing, injected provider, optional WalletConnect |
-| `dapp/frontend/` | Vite + React + `@canton-network/dapp-sdk` + Tailwind v4 + Radix UI + Biome | dApp UI that talks to the wallet through the injected CIP-0103 provider, with optional WalletConnect fallback |
-| `dapp/e2e/` | Playwright + TypeScript | Black-box integration tests for the dApp, Carpincho, wallet-service, and Canton stack |
-
-## Project Structure
-
-```
-.
-├── .claude/
-│   ├── settings.local.json        (gitignored)
-│   └── skills/{create-pr,issue}   Agent helper skills
-├── .github/
-│   ├── ISSUE_TEMPLATE/            bug / feature / epic / spike templates
-│   └── PULL_REQUEST_TEMPLATE.md
-├── .husky/                        commit-msg, pre-commit, pre-push hooks
-├── canton-barebones/              Local Canton participant + Postgres + wallet-service
-├── canton-connect-kit/            React hooks for CIP-0103 wallet connections
-├── carpincho-wallet/              CIP-0103 wallet (web + Chrome extension)
-├── dapp/
-│   ├── daml/                      quickstart-tally DAML model
-│   ├── frontend/                  dApp UI
-│   └── e2e/                       Black-box integration tests
-├── AGENTS.md                      Agent rules — monorepo-wide
-├── CLAUDE.md                      Compatibility shim pointing to AGENTS.md
-├── architecture.md                THIS FILE
-├── README.md                      Bring-up runbook for the local stack
-├── commitlint.config.js           Conventional Commit enforcement
-├── .lintstagedrc.mjs              Per-subproject lint dispatch
-├── .nvmrc                         Node 24
-└── package.json                   npm workspaces root + orchestration scripts (npm --prefix <dir>)
-```
+| --- | --- | --- |
+| `canton-barebones/` | Bash + Docker Compose + official Splice LocalNet bundle | Starts `sv + app-user`, health checks, token helper, DAR upload |
+| `canton-barebones/wallet-service/` | Node 24 + Express 5 + TypeScript + `@canton-network/wallet-sdk` | Bridge Carpincho uses for external-party onboarding and participant JSON API calls |
+| `carpincho-wallet/` | Vite 6 + React 18 + Tailwind v4 + Radix UI + WalletConnect + `@noble/ed25519` | CIP-0103 browser wallet, encrypted vault, signer, injected provider |
+| `dapp/frontend/` | Vite + React + `@canton-network/dapp-sdk` | Example dApp that talks to Carpincho |
+| `dapp/daml/` | DAML | `quickstart-tally` DAR |
+| `dapp/e2e/` | Playwright + TypeScript | Black-box integration tests |
+| `canton-connect-kit/` | TypeScript + React | Reusable wallet connection hooks |
 
 ## Data Flow
 
-The whole local stack is one signing loop. The dApp frontend discovers Carpincho through the injected CIP-0103 browser provider; Carpincho signs locally and routes the signed transaction through the wallet-service JSON-RPC bridge, which calls the Canton participant's JSON API; the participant materialises the change against the deployed `quickstart-tally` DAR. WalletConnect remains available as an opt-in fallback path.
-
 ```mermaid
 flowchart TD
-  fe["dapp/frontend<br/>dApp frontend<br/>http://localhost:3012"]
-  wallet["carpincho-wallet<br/>Vault + signer<br/>http://localhost:3011"]
-  ws["canton-barebones/wallet-service<br/>Canton bridge<br/>http://localhost:3010"]
-  cb["canton-barebones<br/>Participant JSON API http://localhost:3013<br/>Ledger/Admin gRPC localhost:3014 / 3015"]
-  dar["dapp/daml<br/>quickstart-tally DAR<br/>.daml/dist/*.dar"]
-
-  fe <-->|"Injected CIP-0103 provider<br/>optional WalletConnect"| wallet
-  wallet -->|"JSON-RPC /rpc<br/>prepare, execute, read, onboard"| ws
-  ws -->|"Canton JSON API<br/>Bearer CANTON_BACKEND_TOKEN"| cb
-  dar -->|"deploy DAR package"| cb
+  fe["dapp/frontend<br/>http://localhost:3012"]
+  wallet["carpincho-wallet<br/>http://localhost:3011"]
+  ws["wallet-service<br/>http://localhost:3010"]
+  au["Splice app-user<br/>JSON API http://localhost:2975"]
+  sv["Splice sv<br/>DSO / synchronizer side"]
+  scan["Scan<br/>http://scan.localhost:4000"]
+  dar["dapp/daml DAR"]
+
+  fe <-->|"CIP-0103 provider"| wallet
+  wallet -->|"external-party onboarding"| ws
+  ws -->|"CANTON_BACKEND_TOKEN"| au
+  au <--> sv
+  dar --> au
 ```
 
-State boundaries:
-
-- `dapp/frontend` never touches the participant directly. It only knows about Carpincho through the injected CIP-0103 provider (or optional WalletConnect fallback) and the dApp's DAML signature.
-- `carpincho-wallet` holds all signing keys (PBKDF2 + AES-GCM vault, Ed25519). It never talks to Canton directly; it goes through `canton-barebones/wallet-service`.
-- `canton-barebones/wallet-service` is the only component holding the Canton bearer token. It self-mints the token at boot, then validates and forwards JSON-RPC calls onto the participant's JSON API.
-- `canton-barebones` is the participant. Its bearer-token validation pins the trust boundary.
-
-## Service Ports
+`app-user` is the primary local validator from the official Splice LocalNet
+bundle. It is not a product user. `sv` provides the Super Validator / DSO side
+needed by Splice and Canton Coin. The app-provider UI profile is not started;
+its Nginx routes are disabled locally. The official shared Canton/Splice
+containers still expose app-provider backend ports.
 
-Local ports are intentionally assigned in the `3010+` range so they collide with nothing else on a dev machine.
-
-| Component | URL / Port |
-|-----------|------------|
-| Wallet service | `http://localhost:3010` |
-| Carpincho wallet | `http://localhost:3011` |
-| dApp frontend | `http://localhost:3012` |
-| Canton JSON API | `http://localhost:3013` |
-| Canton Ledger API | `grpc://localhost:3014` |
-| Canton Admin API | `grpc://localhost:3015` |
-| Canton health | `http://localhost:3016` |
-| Canton sequencer public API | `localhost:3017` |
-| Canton Postgres | `localhost:3018` |
+State boundaries:
 
-## Environment Variables
+- The dApp talks to Carpincho through the CIP-0103 provider surface.
+- Carpincho owns user keys and signs locally.
+- wallet-service holds `CANTON_BACKEND_TOKEN` and remains the external-party onboarding bridge.
+- Splice LocalNet owns the app-user participant/validator, Scan, SV, and CC infrastructure.
+- Splice and wallet-service share the `canton-barebones` Docker Compose project.
+- Carpincho should use generated bearer tokens for direct LocalNet endpoints; it should not copy `CANTON_AUTH_SECRET` into the browser.
+
+## Services And Ports
+
+| Service | URL / Port | Purpose |
+| --- | --- | --- |
+| wallet-service | `http://localhost:3010` | Carpincho bridge for onboarding and JSON API calls |
+| Carpincho wallet | `http://localhost:3011` | browser wallet UI/provider |
+| dApp frontend | `http://localhost:3012` | example dApp |
+| app-user Wallet UI | `http://wallet.localhost:2000` | optional official Splice wallet UI |
+| app-user Ledger API | `grpc://localhost:2901` | SDK/tools |
+| app-user Admin API | `grpc://localhost:2902` | wallet-service/tools |
+| app-user Validator API | `http://localhost:2903` | health/tools |
+| app-user JSON API | `http://localhost:2975` | wallet-service/tools |
+| app-user Validator proxy | `http://localhost:2000/api/validator` | Carpincho/tools |
+| app-provider backend APIs | `grpc://localhost:3901`, `grpc://localhost:3902`, `http://localhost:3903`, `http://localhost:3975` | official bundle wiring, unused |
+| app-provider UI port | `http://localhost:3000` | exposed by Nginx, routes disabled |
+| Scan UI | `http://scan.localhost:4000` | explorer/read model UI |
+| Scan API | `http://scan.localhost:4000/api/scan` | Carpincho/tools |
+| Amulet Registry | `http://localhost:2000/api/validator/v0/scan-proxy` | token metadata |
+| SV UI | `http://sv.localhost:4000` | Super Validator operations UI |
+| sv Ledger/Admin/JSON APIs | `grpc://localhost:4901`, `grpc://localhost:4902`, `http://localhost:4975` | Splice internals/tools |
+| sv Validator API | `http://localhost:4903` | health checks |
+| PostgreSQL | `localhost:5432` | Splice LocalNet database |
+
+## Auth
 
 | Variable | Owner | Purpose |
-|----------|-------|---------|
-| `VITE_WC_PROJECT_ID` | `carpincho-wallet/.env.local`, `dapp/frontend/.env.local` | Optional WalletConnect / Reown project ID. Same value in both subprojects when using the WalletConnect fallback; not required for the injected extension provider path. |
-| `CANTON_BACKEND_TOKEN` | `canton-barebones/wallet-service` runtime env (compose) | Self-minted at boot from `CANTON_AUTH_AUDIENCE` / `CANTON_AUTH_SECRET` / `CANTON_ADMIN_USER_ID`. Set explicitly (e.g. via the compose env override) to bypass self-mint. Mint ad-hoc with `npm run canton:token`. |
-
-Runtime-only configuration that varies between sessions (RPC URL, Canton network name, Carpincho URL) is stored in `localStorage` inside the wallet and the frontend, configured from each UI — not from env files.
+| --- | --- | --- |
+| `CANTON_AUTH_AUDIENCE` | `canton-barebones/.env` | JWT audience recipe used by `npm run canton:token` |
+| `CANTON_AUTH_SECRET` | `canton-barebones/.env` | unsafe local signing secret used only by the token script |
+| `CANTON_BACKEND_TOKEN` | `canton-barebones/.env` | generated JWT consumed by wallet-service |
 
-## Orchestration Scripts
+`CANTON_AUTH_AUDIENCE` plus `CANTON_AUTH_SECRET` is the local signing recipe.
+`CANTON_BACKEND_TOKEN` is the generated token. The token script defaults the
+JWT subject to `ledger-api-user`; Carpincho can use a separate token generated
+with the same script, configured manually in its LocalNet settings.
 
-Driven from root `package.json`:
+## Orchestration
 
 | Command | What it does |
-|---------|--------------|
-| `npm run canton:up` / `canton:down` | docker compose up/down inside `canton-barebones/` |
-| `npm run canton:health` | Hit the participant health endpoint at `:3016` |
-| `npm run canton:token` | Mint a dev JWT for the wallet-service user |
-| `npm run build-dar -- <daml-project>` | DAML build via `dpm` inside the provided DAML project directory |
-| `npm run deploy-dar -- <dar>` | Deploy the provided DAR to the local participant |
-| `npm --prefix canton-barebones/wallet-service run dev` | Host-side dev mode for the wallet-service on `:3010` (tsx watch). The container-side service is started by `canton:up`. |
-| `npm run wallet-service:health` | Hit the wallet-service health endpoint at `:3010` |
-| `npm --prefix canton-barebones run wallet-service:logs` | Tail the wallet-service container's logs |
-| `npm run carpincho:build:extension` | Build the Chrome extension into `carpincho-wallet/dist-extension` |
-| `npm run app:dev` | Start the dApp frontend on `:3012` (Vite, strict port) |
-
-For the full bring-up sequence, follow [`README.md`](README.md).
-
-## Further Reading
-
-- [`carpincho-wallet/architecture.md`](carpincho-wallet/architecture.md) — wallet-internal architecture: Vault crypto, CIP-0103 dispatcher, WalletConnect integration, Chrome extension bridge, theming, auth/session
-- [`canton-connect-kit/architecture.md`](canton-connect-kit/architecture.md) — connect-kit internals: provider context, connectors, hooks, event bridge
-- [`canton-barebones/README.md`](canton-barebones/README.md) — local participant setup
-- [`dapp/daml/README.md`](dapp/daml/README.md) — DAML model
-- [`canton-barebones/wallet-service/README.md`](canton-barebones/wallet-service/README.md) — JSON-RPC bridge
-- [`dapp/frontend/README.md`](dapp/frontend/README.md) — dApp UI
-- [`dapp/e2e/README.md`](dapp/e2e/README.md) — black-box integration tests
+| --- | --- |
+| `npm run canton:up` | download/cache Splice bundle, start `sv + app-user` UI profiles, then wallet-service |
+| `npm run canton:down` | stop wallet-service and Splice LocalNet, preserving volumes |
+| `npm run canton:health` | check app-user, sv, Scan, wallet UI, and wallet-service |
+| `npm run canton:token -- ledger-api-user` | generate a LocalNet dev JWT |
+| `npm run deploy-dar -- <dar>` | upload DAR to app-user JSON API |
+| `npm run wallet:dev` | start Carpincho web UI |
+| `npm run app:dev` | start the dApp frontend |
+
+For the bring-up sequence, follow [`README.md`](README.md).
diff --git a/canton-barebones/README.md b/canton-barebones/README.md
index 08c5036c..ab932934 100644
--- a/canton-barebones/README.md
+++ b/canton-barebones/README.md
@@ -1,52 +1,118 @@
 # Canton Barebones
 
-Minimal local Canton barebones for wallet-first app experiments.
+Local Splice LocalNet wrapper for Canton dApp Booster.
 
-For the full dApp stack, follow the root runbook:
+This package starts the official Splice LocalNet bundle with:
 
-- [Quick Start](../README.md#quick-start)
+```text
+sv
+app-user
+wallet-service
+```
 
-## Start
+It does not start:
+
+```text
+Keycloak/OIDC
+```
+
+It also does not start the app-provider UI containers. A local compose override
+disables app-provider Nginx routes. The official shared Canton/Splice
+containers still expose app-provider backend ports because the bundle bakes
+that config in.
 
-Run only the local Canton participant, Postgres, and wallet-service:
+Splice and wallet-service share the `canton-barebones` Docker Compose project,
+so Docker groups the full local stack together.
+
+`app-user` is Splice's primary local validator name. It is not the Carpincho
+user and not a product user.
+
+## Start
 
 ```bash
 cp .env.example .env
-docker compose up -d
-./scripts/health-check.sh
+npm run token -- ledger-api-user
 ```
 
-## Wallet service
+Paste the printed `CANTON_BACKEND_TOKEN=...` line into `.env`, then run:
 
-`docker compose up -d` (via `npm run canton:up`) brings up `wallet-service` alongside postgres + canton. Verify with `npm run wallet-service:health`.
+```bash
+npm run up
+npm run health
+```
 
-The wallet-service self-mints an HS256 JWT at boot from `CANTON_AUTH_AUDIENCE`, `CANTON_AUTH_SECRET`, and `CANTON_ADMIN_USER_ID`.
+From the repo root, use:
 
-Set `WALLET_SERVICE_MOCK=1` in `.env` to short-circuit Canton calls; the service still starts but every `/rpc` method returns canned mock data.
+```bash
+npm run canton:up
+npm run canton:health
+```
 
-Details:
+## Auth
 
-- [wallet-service token](wallet-service/README.md#token)
-- [wallet-service mock mode](wallet-service/README.md#mock-mode)
+The token script reads:
 
-## Auth Config
+```text
+CANTON_AUTH_AUDIENCE
+CANTON_AUTH_SECRET
+```
 
-The participant accepts local/dev HS256 JWTs configured by:
+It prints a JWT. It does not edit `.env`. Pass a subject as the first argument
+only if LocalNet expects something other than `ledger-api-user`.
 
-- `.env`: `CANTON_AUTH_AUDIENCE`, `CANTON_AUTH_SECRET`, `CANTON_ADMIN_USER_ID`
-- [`config/canton/app.conf`](config/canton/app.conf): Canton ledger API auth service
+Do not put `CANTON_AUTH_SECRET` in Carpincho. Generate a token and paste only
+the token.
 
-## Ports
+## Wallet Service
 
-Refer to the [ports table in the root README](../README.md#ports) to see the
-ports used by this stack.
+`npm run up` starts `wallet-service` after app-user is ready.
 
-## Deploy a DAR
+wallet-service points to app-user:
 
-Compile a Daml project outside this base, then upload the DAR.
+```text
+JSON API   http://host.docker.internal:2975
+Ledger API grpc://host.docker.internal:2901
+Admin API  grpc://host.docker.internal:2902
+```
+
+Set `WALLET_SERVICE_MOCK=1` in `.env` to short-circuit Canton calls. Mock mode
+does not require `CANTON_BACKEND_TOKEN`.
+
+## Services And Ports
+
+| Service | What It Is | URL / Port |
+| --- | --- | --- |
+| wallet-service | Carpincho bridge | `http://localhost:3010` |
+| app-user Wallet UI | official Splice wallet UI | `http://wallet.localhost:2000` |
+| app-user Ledger API | gRPC Ledger API | `grpc://localhost:2901` |
+| app-user Admin API | gRPC Admin API | `grpc://localhost:2902` |
+| app-user Validator API | Splice validator API | `http://localhost:2903` |
+| app-user JSON API | JSON Ledger API | `http://localhost:2975` |
+| app-user Validator proxy | wallet-sdk validator route | `http://localhost:2000/api/validator` |
+| app-provider backend APIs | official bundle backend wiring, unused here | `grpc://localhost:3901`, `grpc://localhost:3902`, `http://localhost:3903`, `http://localhost:3975` |
+| app-provider UI port | Nginx port exposed by the bundle; routes disabled here | `http://localhost:3000` |
+| Scan UI | Splice explorer/read model | `http://scan.localhost:4000` |
+| Scan API | indexed Splice API | `http://scan.localhost:4000/api/scan` |
+| Amulet Registry | token metadata via scan proxy | `http://localhost:2000/api/validator/v0/scan-proxy` |
+| SV UI | Super Validator operations UI | `http://sv.localhost:4000` |
+| sv Ledger/Admin/JSON APIs | official SV participant APIs | `grpc://localhost:4901`, `grpc://localhost:4902`, `http://localhost:4975` |
+| sv Validator API | SV readiness surface | `http://localhost:4903` |
+| PostgreSQL | Splice LocalNet DB | `localhost:5432` |
+
+If hostnames do not resolve, add:
+
+```text
+127.0.0.1 wallet.localhost scan.localhost sv.localhost
+```
+
+## Deploy A DAR
 
 ```bash
 ./scripts/deploy-dar.sh /path/to/app.dar
 ```
 
-This barebones intentionally does not include Keycloak, SV, PQS, frontend, or backend.
+The script uploads to app-user:
+
+```text
+http://localhost:2975/v2/packages
+```
diff --git a/canton-barebones/wallet-service/README.md b/canton-barebones/wallet-service/README.md
index 0d003aa9..ae396da5 100644
--- a/canton-barebones/wallet-service/README.md
+++ b/canton-barebones/wallet-service/README.md
@@ -1,6 +1,7 @@
 # Wallet Service
 
-Express JSON-RPC bridge between Carpincho and the local Canton participant.
+Express JSON-RPC bridge between Carpincho and the Splice LocalNet `app-user`
+participant.
 
 It is intentionally app-agnostic: app-specific Daml commands come from the
 consumer, Carpincho owns signing and approval UI, and this service only handles
@@ -16,11 +17,20 @@ Use the root runbook for startup, health checks, and local mock-mode commands:
 
 ## Token
 
-Real Canton calls require a bearer token accepted by the local participant.
-For this local stack, wallet-service self-mints that HS256 JWT at boot from
-`CANTON_AUTH_AUDIENCE`, `CANTON_AUTH_SECRET`, and `CANTON_ADMIN_USER_ID`.
+Real Canton calls require a bearer token accepted by Splice LocalNet.
+wallet-service does not mint this token at boot. It requires
+`CANTON_BACKEND_TOKEN`.
 
-Use the root README for the command flow.
+Generate one from the repo root:
+
+```bash
+npm run canton:token -- ledger-api-user
+```
+
+Paste the printed `CANTON_BACKEND_TOKEN=...` line into
+`canton-barebones/.env`, then start the stack.
+
+Mock mode does not require a token.
 
 ## API Boundary
 
@@ -41,7 +51,7 @@ Service-specific methods:
 | -------------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
 | `prepareTransaction` | Carpincho                       | Calls Canton interactive submission prepare and returns the prepared transaction payload/hash for local signing. |
 | `executePrepared`    | Carpincho                       | Submits Carpincho's signature over a prepared transaction to Canton.                                             |
-| `ledgerApi`          | Carpincho on behalf of the dApp | Proxies participant JSON API reads/writes and injects the Canton bearer token.                                   |
+| `ledgerApi`          | Carpincho on behalf of the dApp | Proxies app-user JSON API reads/writes and injects `CANTON_BACKEND_TOKEN`.                                       |
 
 `prepareExecute`, `prepareExecuteAndWait`, and `signMessage` stay in
 Carpincho because they require the user's key and approval UI.

From 75c2ef57a2353abfda81bd84e671713c40fa72b9 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 16:06:31 -0300
Subject: [PATCH 06/98] feat(carpincho): derive network from wallet-service
 status

---
 carpincho-wallet/src/api/walletService.ts     | 38 +++++++++
 .../src/components/CreateAccountForm.tsx      | 10 ++-
 carpincho-wallet/src/config/runtimeConfig.ts  |  3 -
 carpincho-wallet/src/provider/dispatch.ts     | 45 +++++++---
 carpincho-wallet/src/provider/status.ts       | 70 +++++-----------
 .../src/views/ConnectionSettingsView.tsx      | 12 ---
 carpincho-wallet/src/wc/client.ts             | 17 +---
 .../components/CreateAccountForm.test.tsx     | 74 ++++++++++++++++-
 .../test/providerDispatch.test.ts             | 82 ++++++++++++++++++-
 .../views/ConnectionSettingsView.test.tsx     |  8 +-
 10 files changed, 260 insertions(+), 99 deletions(-)

diff --git a/carpincho-wallet/src/api/walletService.ts b/carpincho-wallet/src/api/walletService.ts
index f0639a29..285aa5c6 100644
--- a/carpincho-wallet/src/api/walletService.ts
+++ b/carpincho-wallet/src/api/walletService.ts
@@ -34,6 +34,24 @@ export interface WalletServiceRequestOptions {
   rpcUrl?: string
 }
 
+export interface WalletServiceStatusResponse {
+  connection?: {
+    isConnected?: boolean
+    isNetworkConnected?: boolean
+    reason?: string
+    networkReason?: string
+  }
+  network?: {
+    networkId?: string
+    ledgerApi?: string
+    accessToken?: string
+  }
+  session?: {
+    accessToken?: string
+    userId?: string
+  }
+}
+
 const rpcUrl = (options?: WalletServiceRequestOptions): string =>
   options?.rpcUrl?.trim() === undefined || options.rpcUrl.trim() === ''
     ? loadRuntimeConfig().walletServiceRpcUrl
@@ -70,6 +88,26 @@ export const walletServiceRequest = async <T>(
   return payload.result as T
 }
 
+// Reads the wallet-service dApp status so Carpincho uses the same network source as wallet-gateway.
+export const walletServiceStatus = async (
+  options?: WalletServiceRequestOptions,
+): Promise<WalletServiceStatusResponse> =>
+  await walletServiceRequest<WalletServiceStatusResponse>('status', undefined, options)
+
+// Extracts the active network id and fails when wallet-service cannot provide one.
+export const networkIdFromWalletServiceStatus = (status: WalletServiceStatusResponse): string => {
+  const networkId = status.network?.networkId?.trim()
+  if (networkId === undefined || networkId === '') {
+    throw new Error('wallet-service status did not include networkId')
+  }
+  return networkId
+}
+
+// Discovers the active Canton network from wallet-service status.
+export const getWalletServiceNetworkId = async (
+  options?: WalletServiceRequestOptions,
+): Promise<string> => networkIdFromWalletServiceStatus(await walletServiceStatus(options))
+
 type AdminRequestOptions = WalletServiceRequestOptions
 
 const adminUrl = (path: string, options?: AdminRequestOptions): string => {
diff --git a/carpincho-wallet/src/components/CreateAccountForm.tsx b/carpincho-wallet/src/components/CreateAccountForm.tsx
index 2934b0ae..9d2973ce 100644
--- a/carpincho-wallet/src/components/CreateAccountForm.tsx
+++ b/carpincho-wallet/src/components/CreateAccountForm.tsx
@@ -1,5 +1,9 @@
 import { useState } from 'react'
-import { completeCreateParty, prepareCreateParty } from '@/api/walletService'
+import {
+  completeCreateParty,
+  getWalletServiceNetworkId,
+  prepareCreateParty,
+} from '@/api/walletService'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { TextInput } from '@/components/ui/TextInput'
 import { Tooltip } from '@/components/ui/Tooltip'
@@ -7,7 +11,6 @@ import { toast } from '@/components/ui/toast'
 import { cn } from '@/utils/cn'
 import { generateKeypair, signMessageBase64 } from '@/vault/keypair'
 import { useVault } from '@/vault/useVault'
-import { getCantonNetwork } from '@/wc/client'
 
 export interface CreateAccountFormProps {
   onSuccess?: () => void
@@ -49,10 +52,11 @@ export const CreateAccountForm = ({
         onboardingId: prepared.onboardingId,
         signatureBase64,
       })
+      const networkId = await getWalletServiceNetworkId()
       await v.addAccount({
         name: trimmed,
         partyId: completed.partyId,
-        network: getCantonNetwork(),
+        network: networkId,
         privateKeyHex: kp.privateKeyHex,
         publicKeyBase64: kp.publicKeyBase64,
       })
diff --git a/carpincho-wallet/src/config/runtimeConfig.ts b/carpincho-wallet/src/config/runtimeConfig.ts
index 2a6fa62c..46a44109 100644
--- a/carpincho-wallet/src/config/runtimeConfig.ts
+++ b/carpincho-wallet/src/config/runtimeConfig.ts
@@ -1,13 +1,11 @@
 export interface RuntimeConfig {
   walletServiceRpcUrl: string
-  cantonNetwork: string
 }
 
 const STORAGE_KEY = 'carpincho.runtime-config.v1'
 
 const DEFAULT_RUNTIME_CONFIG: RuntimeConfig = {
   walletServiceRpcUrl: 'http://localhost:3010/rpc',
-  cantonNetwork: 'canton:local',
 }
 
 export const defaultRuntimeConfig = (): RuntimeConfig => ({
@@ -18,7 +16,6 @@ const sanitizeRuntimeConfig = (raw: Partial<RuntimeConfig>): RuntimeConfig => {
   const defaults = defaultRuntimeConfig()
   return {
     walletServiceRpcUrl: raw.walletServiceRpcUrl?.trim() ?? defaults.walletServiceRpcUrl,
-    cantonNetwork: raw.cantonNetwork?.trim() ?? defaults.cantonNetwork,
   }
 }
 
diff --git a/carpincho-wallet/src/provider/dispatch.ts b/carpincho-wallet/src/provider/dispatch.ts
index e096c789..1e9c758c 100644
--- a/carpincho-wallet/src/provider/dispatch.ts
+++ b/carpincho-wallet/src/provider/dispatch.ts
@@ -13,7 +13,7 @@ import {
   normalizeMethod,
   pendingApprovalMethod,
 } from '@/provider/methods'
-import { buildStatus, getCantonNetwork } from '@/provider/status'
+import { buildStatus, getActiveNetwork } from '@/provider/status'
 import type {
   AccountResolver,
   DispatchResult,
@@ -31,6 +31,15 @@ export type {
   ProviderResponder,
 } from '@/provider/types'
 
+// Converts wallet-service discovery failures into JSON-RPC provider errors.
+const respondWalletServiceError = async (
+  responder: ProviderResponder,
+  error: unknown,
+): Promise<DispatchResult> => {
+  await responder.error(-32000, `wallet-service: ${(error as Error).message}`)
+  return { status: 'error' }
+}
+
 export const dispatchProviderRequest = async (
   request: ProviderRequest,
   resolve: AccountResolver,
@@ -41,9 +50,13 @@ export const dispatchProviderRequest = async (
   const { accounts, primary } = resolve()
 
   if (method === CANTON_METHOD_CONNECT || method === CANTON_METHOD_IS_CONNECTED) {
-    const status = await buildStatus()
-    await responder.result(accountConnection({ accounts, primary }, status.connection))
-    return { status: 'handled' }
+    try {
+      const status = await buildStatus()
+      await responder.result(accountConnection({ accounts, primary }, status.connection))
+      return { status: 'handled' }
+    } catch (error) {
+      return await respondWalletServiceError(responder, error)
+    }
   }
   if (method === CANTON_METHOD_DISCONNECT) {
     await responder.result(null)
@@ -62,16 +75,24 @@ export const dispatchProviderRequest = async (
     return { status: 'handled' }
   }
   if (method === CANTON_METHOD_STATUS) {
-    const status = await buildStatus()
-    await responder.result({
-      ...status,
-      connection: accountConnection({ accounts, primary }, status.connection),
-    })
-    return { status: 'handled' }
+    try {
+      const status = await buildStatus()
+      await responder.result({
+        ...status,
+        connection: accountConnection({ accounts, primary }, status.connection),
+      })
+      return { status: 'handled' }
+    } catch (error) {
+      return await respondWalletServiceError(responder, error)
+    }
   }
   if (method === CANTON_METHOD_GET_ACTIVE_NETWORK) {
-    await responder.result({ networkId: getCantonNetwork() })
-    return { status: 'handled' }
+    try {
+      await responder.result(await getActiveNetwork())
+      return { status: 'handled' }
+    } catch (error) {
+      return await respondWalletServiceError(responder, error)
+    }
   }
   if (method === CANTON_METHOD_SIGN_MESSAGE) {
     return { status: 'pending-approval', pendingMethod: CANTON_METHOD_SIGN_MESSAGE }
diff --git a/carpincho-wallet/src/provider/status.ts b/carpincho-wallet/src/provider/status.ts
index 7d15428e..f39cf392 100644
--- a/carpincho-wallet/src/provider/status.ts
+++ b/carpincho-wallet/src/provider/status.ts
@@ -1,60 +1,30 @@
-import { walletServiceRequest } from '@/api/walletService'
-import { loadRuntimeConfig } from '@/config/runtimeConfig'
+import { getWalletServiceNetworkId, walletServiceStatus } from '@/api/walletService'
 import { SIGNING_PROVIDER_ID } from '@/provider/accounts'
-import { CANTON_METHOD_STATUS } from '@/provider/methods'
-
-interface WalletServiceStatus {
-  connection?: {
-    isConnected?: boolean
-    isNetworkConnected?: boolean
-    reason?: string
-    networkReason?: string
-  }
-  network?: {
-    networkId?: string
-  }
-}
 
 export interface ProviderStatus {
   provider: { id: string; version: string; providerType: 'browser' }
   connection: { isConnected: true; isNetworkConnected: boolean; networkReason?: string }
-  network: { networkId: string }
+  network?: { networkId: string }
 }
 
-export const normalizeCantonNetwork = (value: string): string => {
-  const trimmed = value.trim()
-  if (trimmed === '') {
-    return 'canton:local'
-  }
-  return trimmed.startsWith('canton:') ? trimmed : `canton:${trimmed}`
-}
-
-export const getCantonNetwork = (): string =>
-  normalizeCantonNetwork(loadRuntimeConfig().cantonNetwork)
-
+// Builds the browser provider status from wallet-service without inventing a local network.
 export const buildStatus = async (): Promise<ProviderStatus> => {
-  try {
-    const remote = await walletServiceRequest<WalletServiceStatus>(CANTON_METHOD_STATUS)
-    return {
-      provider: { id: SIGNING_PROVIDER_ID, version: '0.1.0', providerType: 'browser' },
-      connection: {
-        isConnected: true,
-        isNetworkConnected: remote.connection?.isNetworkConnected ?? false,
-        ...(remote.connection?.networkReason === undefined
-          ? {}
-          : { networkReason: remote.connection.networkReason }),
-      },
-      network: { networkId: remote.network?.networkId ?? getCantonNetwork() },
-    }
-  } catch (error) {
-    return {
-      provider: { id: SIGNING_PROVIDER_ID, version: '0.1.0', providerType: 'browser' },
-      connection: {
-        isConnected: true,
-        isNetworkConnected: false,
-        networkReason: `wallet-service unavailable: ${(error as Error).message}`,
-      },
-      network: { networkId: getCantonNetwork() },
-    }
+  const remote = await walletServiceStatus()
+  const networkId = remote.network?.networkId?.trim()
+  return {
+    provider: { id: SIGNING_PROVIDER_ID, version: '0.1.0', providerType: 'browser' },
+    connection: {
+      isConnected: true,
+      isNetworkConnected: remote.connection?.isNetworkConnected ?? false,
+      ...(remote.connection?.networkReason === undefined
+        ? {}
+        : { networkReason: remote.connection.networkReason }),
+    },
+    ...(networkId === undefined || networkId === '' ? {} : { network: { networkId } }),
   }
 }
+
+// Resolves getActiveNetwork through wallet-service status, matching wallet-gateway's source.
+export const getActiveNetwork = async (): Promise<{ networkId: string }> => ({
+  networkId: await getWalletServiceNetworkId(),
+})
diff --git a/carpincho-wallet/src/views/ConnectionSettingsView.tsx b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
index 0dd0075f..10f44763 100644
--- a/carpincho-wallet/src/views/ConnectionSettingsView.tsx
+++ b/carpincho-wallet/src/views/ConnectionSettingsView.tsx
@@ -76,18 +76,6 @@ export const ConnectionSettingsView = (): JSX.Element => {
         />
       </div>
 
-      <div>
-        <label htmlFor="canton-network">Canton network</label>
-        <TextInput
-          id="canton-network"
-          type="text"
-          className="font-mono"
-          value={draft.cantonNetwork}
-          onChange={(e) => setDraft((prev) => ({ ...prev, cantonNetwork: e.target.value }))}
-          placeholder="canton:local"
-        />
-      </div>
-
       <PrimaryButton
         className="w-full mt-1"
         onClick={onSave}
diff --git a/carpincho-wallet/src/wc/client.ts b/carpincho-wallet/src/wc/client.ts
index e124303b..9a1b8126 100644
--- a/carpincho-wallet/src/wc/client.ts
+++ b/carpincho-wallet/src/wc/client.ts
@@ -3,7 +3,7 @@ import { formatJsonRpcError, formatJsonRpcResult } from '@walletconnect/jsonrpc-
 import SignClient from '@walletconnect/sign-client'
 import type { SignClientTypes } from '@walletconnect/types'
 import { getSdkError } from '@walletconnect/utils'
-import { loadRuntimeConfig } from '@/config/runtimeConfig'
+import { getWalletServiceNetworkId } from '@/api/walletService'
 import type { ProviderResponder } from '@/provider/types'
 
 export const CANTON_NAMESPACE = 'canton'
@@ -48,20 +48,11 @@ export const CIP103_METHODS = [
 
 export const CIP103_EVENTS = ['accountsChanged', 'statusChanged', 'txChanged']
 
-const normalizeCantonNetwork = (value: string): string => {
-  const trimmed = value.trim()
-  if (trimmed === '') {
-    return 'canton:local'
-  }
-  return trimmed.startsWith(`${CANTON_NAMESPACE}:`) ? trimmed : `${CANTON_NAMESPACE}:${trimmed}`
-}
-
 const getWalletConnectProjectId = (): string =>
   ((import.meta.env.VITE_WC_PROJECT_ID as string | undefined) ?? '').trim()
 
-export const getCantonNetwork = (): string =>
-  normalizeCantonNetwork(loadRuntimeConfig().cantonNetwork)
-export const getCantonChain = (): string => getCantonNetwork()
+// Discovers the WalletConnect CAIP-2 chain from wallet-service status.
+export const getCantonChain = async (): Promise<string> => await getWalletServiceNetworkId()
 
 let signClientPromise: Promise<InstanceType<typeof SignClient>> | undefined
 let signClientProjectId: string | undefined
@@ -128,7 +119,7 @@ export const approveProposal = async (args: {
   partyId: string
 }): Promise<void> => {
   const client = await getSignClient()
-  const chain = getCantonChain()
+  const chain = await getCantonChain()
   await client.approve({
     id: args.proposal.id,
     namespaces: {
diff --git a/carpincho-wallet/test/components/CreateAccountForm.test.tsx b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
index 1a4da626..4818c1b0 100644
--- a/carpincho-wallet/test/components/CreateAccountForm.test.tsx
+++ b/carpincho-wallet/test/components/CreateAccountForm.test.tsx
@@ -1,12 +1,14 @@
 import { strict as assert } from 'node:assert'
 import { readFileSync } from 'node:fs'
 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 { CreateAccountForm } from '@/components/CreateAccountForm'
 import { TooltipProvider } from '@/components/ui/Tooltip'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
+const originalFetch = globalThis.fetch
+
 const baseVault = (overrides: Partial<VaultContextValue> = {}): VaultContextValue =>
   ({
     isLocked: false,
@@ -55,6 +57,8 @@ const renderForm = (
 describe('CreateAccountForm', () => {
   afterEach(() => {
     cleanup()
+    globalThis.fetch = originalFetch
+    localStorage.clear()
   })
 
   it('rejects an invalid party hint without creating an account', async () => {
@@ -125,6 +129,74 @@ describe('CreateAccountForm', () => {
     await user.type(screen.getByTestId('add-account-hint-input'), 'cde')
     assert.equal(submit.disabled, false)
   })
+
+  it('stores the network discovered from wallet-service status after creating the party', async () => {
+    // Scenario: account creation talks to wallet-service for party onboarding, then uses
+    // wallet-service status as the canonical network source for the stored account.
+    const user = userEvent.setup()
+    const added: Array<{ network: string; partyId: string; name: string }> = []
+    globalThis.fetch = (async (input, init) => {
+      const url = String(input)
+      if (url.endsWith('/admin/party/prepare')) {
+        // Setup: the prepare endpoint returns a valid base64 message for Carpincho to sign.
+        return new Response(
+          JSON.stringify({
+            onboardingId: 'onboarding-1',
+            partyId: 'alice::fingerprint',
+            multiHash: 'AQID',
+          }),
+          { status: 200 },
+        )
+      }
+      if (url.endsWith('/admin/party/complete')) {
+        // Setup: the complete endpoint returns the final external party id.
+        return new Response(JSON.stringify({ partyId: 'alice::fingerprint' }), { status: 200 })
+      }
+      if (url.endsWith('/rpc') && String(init?.body ?? '').includes('"method":"status"')) {
+        // Setup: status reports the network that must be persisted with the new account.
+        return new Response(
+          JSON.stringify({
+            result: {
+              connection: { isNetworkConnected: true },
+              network: { networkId: 'canton:from-status' },
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected request: ${url}`)
+    }) as typeof globalThis.fetch
+    renderForm(
+      {},
+      {
+        addAccount: async (args) => {
+          // Assertion fixture: capture the account args that would be persisted in the vault.
+          added.push({ network: args.network, partyId: args.partyId, name: args.name })
+          return {
+            id: 'acct-1',
+            name: args.name,
+            partyId: args.partyId,
+            publicKeyBase64: args.publicKeyBase64,
+            network: args.network,
+            isPrimary: true,
+            createdAt: 1,
+          }
+        },
+      },
+    )
+
+    // Action: create a valid account through the user-facing form.
+    await user.type(screen.getByTestId('add-account-hint-input'), 'alice')
+    await user.click(screen.getByTestId('add-account-submit'))
+
+    // Expected result: the stored account uses wallet-service's network id.
+    await waitFor(() => assert.equal(added.length, 1))
+    assert.deepEqual(added[0], {
+      network: 'canton:from-status',
+      partyId: 'alice::fingerprint',
+      name: 'alice',
+    })
+  })
 })
 
 describe('CreateAccountForm pipeline wiring', () => {
diff --git a/carpincho-wallet/test/providerDispatch.test.ts b/carpincho-wallet/test/providerDispatch.test.ts
index a0c94c48..7bca3f33 100644
--- a/carpincho-wallet/test/providerDispatch.test.ts
+++ b/carpincho-wallet/test/providerDispatch.test.ts
@@ -1,13 +1,17 @@
 import assert from 'node:assert/strict'
-import { describe, it } from 'node:test'
+import { afterEach, describe, it } from 'node:test'
 
 import {
+  CANTON_METHOD_GET_ACTIVE_NETWORK,
   CANTON_METHOD_LIST_ACCOUNTS,
   CANTON_METHOD_SIGN_MESSAGE,
+  CANTON_METHOD_STATUS,
   dispatchProviderRequest,
   type ProviderResponder,
 } from '@/provider/dispatch'
 
+const originalFetch = globalThis.fetch
+
 const account = {
   id: 'acct-1',
   name: 'Alice',
@@ -36,7 +40,23 @@ const captureResponder = (): ProviderResponder & {
   }
 }
 
+const installStatusResponse = (body: unknown): void => {
+  globalThis.fetch = (async () =>
+    new Response(JSON.stringify({ result: body }), { status: 200 })) as typeof globalThis.fetch
+}
+
+const installNetworkFailure = (): void => {
+  globalThis.fetch = (async () => {
+    throw new Error('offline')
+  }) as typeof globalThis.fetch
+}
+
 describe('provider request dispatch', () => {
+  afterEach(() => {
+    globalThis.fetch = originalFetch
+    localStorage.clear()
+  })
+
   it('returns CIP-0103 accounts through an injected responder', async () => {
     const responder = captureResponder()
 
@@ -80,4 +100,64 @@ describe('provider request dispatch', () => {
     assert.equal(responder.results.length, 0)
     assert.equal(responder.errors.length, 0)
   })
+
+  it('returns the active network discovered from wallet-service status', async () => {
+    // Scenario: dApps ask Carpincho for the active Canton network, and Carpincho must use
+    // wallet-service as the source of truth instead of a manually configured fallback.
+    installStatusResponse({
+      connection: { isNetworkConnected: true },
+      network: { networkId: 'canton:from-status' },
+    })
+    const responder = captureResponder()
+
+    // Action: dispatch the same JSON-RPC method exposed by wallet-gateway.
+    const result = await dispatchProviderRequest(
+      { method: CANTON_METHOD_GET_ACTIVE_NETWORK },
+      () => ({ accounts: [account], primary: account }),
+      responder,
+    )
+
+    // Expected result: the response uses the network reported by wallet-service status.
+    assert.deepEqual(result, { status: 'handled' })
+    assert.equal(responder.errors.length, 0)
+    assert.deepEqual(responder.results, [{ networkId: 'canton:from-status' }])
+  })
+
+  it('fails getActiveNetwork when wallet-service status is unavailable', async () => {
+    // Scenario: no wallet-service status means Carpincho cannot know the active network.
+    // This prevents dApps from silently receiving a hard-coded local network.
+    installNetworkFailure()
+    const responder = captureResponder()
+
+    // Action: ask for active network while wallet-service is unreachable.
+    const result = await dispatchProviderRequest(
+      { method: CANTON_METHOD_GET_ACTIVE_NETWORK },
+      () => ({ accounts: [account], primary: account }),
+      responder,
+    )
+
+    // Expected result: the provider reports an error and returns no fallback network.
+    assert.deepEqual(result, { status: 'error' })
+    assert.equal(responder.results.length, 0)
+    assert.match(responder.errors[0]?.message ?? '', /wallet-service/i)
+  })
+
+  it('does not attach a fallback network to status when wallet-service omits it', async () => {
+    // Scenario: wallet-service can answer without a network object, for example while
+    // disconnected. Carpincho should pass that shape through instead of inventing one.
+    installStatusResponse({ connection: { isNetworkConnected: false, networkReason: 'syncing' } })
+    const responder = captureResponder()
+
+    // Action: dispatch status, which is the same discovery path used by wallet-gateway.
+    const result = await dispatchProviderRequest(
+      { method: CANTON_METHOD_STATUS },
+      () => ({ accounts: [account], primary: account }),
+      responder,
+    )
+
+    // Expected result: status is handled, but the payload has no network field.
+    assert.deepEqual(result, { status: 'handled' })
+    assert.equal(responder.errors.length, 0)
+    assert.equal((responder.results[0] as { network?: unknown }).network, undefined)
+  })
 })
diff --git a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
index cd1d4b1f..970fb02e 100644
--- a/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
+++ b/carpincho-wallet/test/views/ConnectionSettingsView.test.tsx
@@ -26,15 +26,15 @@ describe('ConnectionSettingsView', () => {
   })
 
   it('renders the current runtime config', () => {
+    // Scenario: runtime config should only expose the wallet-service endpoint for editing.
+    // The Canton network is discovered from wallet-service status, so no editable local value
+    // should be present in the settings form.
     render(<ConnectionSettingsView />)
     assert.equal(
       (screen.getByLabelText('Wallet-service RPC URL') as HTMLInputElement).value,
       'http://localhost:3010/rpc',
     )
-    assert.equal(
-      (screen.getByLabelText('Canton network') as HTMLInputElement).value,
-      'canton:local',
-    )
+    assert.equal(screen.queryByLabelText('Canton network'), null)
   })
 
   it('saves edited config and confirms with a success toast', async () => {

From ebe742d86cdc48da9b384261405e86cda2158707 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 17:28:03 -0300
Subject: [PATCH 07/98] feat(wallet-service): configure splice services

---
 canton-barebones/wallet-service/src/config.ts | 11 ++++++
 .../wallet-service/test/smoke.test.ts         | 36 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/canton-barebones/wallet-service/src/config.ts b/canton-barebones/wallet-service/src/config.ts
index 4df4fcfe..4ac887fa 100644
--- a/canton-barebones/wallet-service/src/config.ts
+++ b/canton-barebones/wallet-service/src/config.ts
@@ -19,6 +19,11 @@ export interface WalletServiceConfig {
     backendToken?: string
     tokenSource: TokenSource
   }
+  splice: {
+    validatorUrl: string
+    scanApiUrl: string
+    registryApiUrl: string
+  }
 }
 
 const optional = (name: string): string | undefined => {
@@ -78,5 +83,11 @@ export const loadConfig = (): WalletServiceConfig => {
       backendToken: resolved.token,
       tokenSource: resolved.source,
     },
+    splice: {
+      validatorUrl: optional('SPLICE_VALIDATOR_URL') ?? 'http://localhost:2000/api/validator',
+      scanApiUrl: optional('SPLICE_SCAN_API_URL') ?? 'http://scan.localhost:4000/api/scan',
+      registryApiUrl:
+        optional('SPLICE_REGISTRY_API_URL') ?? 'http://localhost:2000/api/validator/v0/scan-proxy',
+    },
   }
 }
diff --git a/canton-barebones/wallet-service/test/smoke.test.ts b/canton-barebones/wallet-service/test/smoke.test.ts
index 48fda786..a7fc4d41 100644
--- a/canton-barebones/wallet-service/test/smoke.test.ts
+++ b/canton-barebones/wallet-service/test/smoke.test.ts
@@ -6,6 +6,9 @@ const CANTON_VARS = [
   'CANTON_BACKEND_TOKEN',
   'CANTON_AUTH_AUDIENCE',
   'CANTON_AUTH_SECRET',
+  'SPLICE_VALIDATOR_URL',
+  'SPLICE_SCAN_API_URL',
+  'SPLICE_REGISTRY_API_URL',
   'WALLET_SERVICE_MOCK',
 ] as const
 
@@ -69,6 +72,39 @@ describe('config loader', () => {
     assert.equal(config.canton.backendToken, 'explicit.jwt.value')
   })
 
+  it('defaults Splice service URLs for token and Amulet SDK helpers', () => {
+    // Scenario: wallet-service owns SDK helper configuration so Carpincho can
+    // keep a single wallet-service URL. LocalNet defaults should match the
+    // Splice services exposed by canton-barebones.
+    process.env.CANTON_BACKEND_TOKEN = 'explicit.jwt.value'
+
+    const config = loadConfig()
+
+    assert.deepEqual(config.splice, {
+      validatorUrl: 'http://localhost:2000/api/validator',
+      scanApiUrl: 'http://scan.localhost:4000/api/scan',
+      registryApiUrl: 'http://localhost:2000/api/validator/v0/scan-proxy',
+    })
+  })
+
+  it('allows Splice service URLs to be overridden by environment', () => {
+    // Scenario: non-default LocalNet layouts can move Splice endpoints without
+    // changing Carpincho runtime config. wallet-service reads these values once
+    // at startup and passes them to the SDK namespaces.
+    process.env.CANTON_BACKEND_TOKEN = 'explicit.jwt.value'
+    process.env.SPLICE_VALIDATOR_URL = 'http://validator.example/api/validator'
+    process.env.SPLICE_SCAN_API_URL = 'http://scan.example/api/scan'
+    process.env.SPLICE_REGISTRY_API_URL = 'http://registry.example/api/registry'
+
+    const config = loadConfig()
+
+    assert.deepEqual(config.splice, {
+      validatorUrl: 'http://validator.example/api/validator',
+      scanApiUrl: 'http://scan.example/api/scan',
+      registryApiUrl: 'http://registry.example/api/registry',
+    })
+  })
+
   it('mock mode skips minting and leaves backendToken undefined', () => {
     // Scenario: mock mode is used for wallet-only UI iteration and must not
     // require any LocalNet token because all Canton calls are short-circuited.

From e81d95543e902dd0a07d4fbbcf5a24bb98b8b3a7 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 17:30:35 -0300
Subject: [PATCH 08/98] feat(wallet-service): expose cip56 transfer helpers

---
 canton-barebones/wallet-service/src/mock.ts   |   3 +
 canton-barebones/wallet-service/src/rpc.ts    |  93 ++++++++++++-
 .../wallet-service/test/mock.test.ts          |  22 ++++
 .../wallet-service/test/rpc.test.ts           | 123 ++++++++++++++++++
 4 files changed, 236 insertions(+), 5 deletions(-)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index 3f9c1aec..c4092f7f 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -149,6 +149,8 @@ export const createMockRpc = (
           return rpcResult(id, executePrepared(request.params))
         case 'ledgerApi':
           return rpcResult(id, ledgerApi(request.params))
+        case 'cip56.listPendingTransfers':
+          return rpcResult(id, [])
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -198,6 +200,7 @@ export const createMockRpc = (
       'ledgerApi',
       'prepareTransaction',
       'executePrepared',
+      'cip56.listPendingTransfers',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     network: mockNetworkId(config),
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index fab47452..3196b6e5 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -85,6 +85,24 @@ export const createPendingStore = <T>(opts: PendingStoreOptions): PendingStore<T
 
 export type WalletSdk = Awaited<ReturnType<typeof SDK.create>>
 
+type SdkFactory = (options: unknown) => Promise<unknown>
+
+type RpcDependencies = {
+  sdkFactory?: SdkFactory
+}
+
+type Cip56TokenSdk = {
+  token: {
+    transfer: {
+      pending: (partyId: string) => Promise<unknown>
+      accept: (params: {
+        transferInstructionCid: string
+        registryUrl: URL
+      }) => Promise<[unknown, unknown[]]>
+    }
+  }
+}
+
 type ExecutePreparedParams = {
   partyId?: string
   actAs?: string[]
@@ -186,30 +204,69 @@ const firstParty = (params: { partyId?: string; actAs?: string[] }): string => {
   throw new InvalidParams('partyId or actAs[0] is required')
 }
 
+const requiredStringParam = (params: Record<string, unknown>, name: string): string => {
+  const value = params[name]
+  if (typeof value !== 'string' || value.trim() === '') {
+    throw new InvalidParams(`${name} is required`)
+  }
+  return value
+}
+
 export type Rpc = {
   handle: (request: JsonRpcRequest) => Promise<JsonRpcResponse | undefined>
   serviceInfo: () => Record<string, unknown>
   getSdk: () => Promise<WalletSdk>
 }
 
-export const createRpc = (config: WalletServiceConfig): Rpc => {
+export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {}): Rpc => {
+  const sdkFactory: SdkFactory =
+    deps.sdkFactory ??
+    (async (options: unknown) => {
+      return await SDK.create(options as never)
+    })
   let sdkPromise: Promise<WalletSdk> | undefined
+  let tokenSdkPromise: Promise<Cip56TokenSdk> | undefined
 
   const getSdk = async (): Promise<WalletSdk> => {
     if (config.canton.backendToken === undefined) {
       throw new Error('CANTON_BACKEND_TOKEN is required for Canton JSON API calls')
     }
-    sdkPromise ??= SDK.create({
+    sdkPromise ??= sdkFactory({
       auth: { method: 'static', token: config.canton.backendToken },
       ledgerClientUrl: config.canton.jsonApiUrl,
       logAdapter: 'console',
-    }).catch((cause: unknown) => {
-      sdkPromise = undefined
-      throw new Error('Canton wallet SDK failed to initialize', { cause })
     })
+      .then((sdk) => sdk as WalletSdk)
+      .catch((cause: unknown) => {
+        sdkPromise = undefined
+        throw new Error('Canton wallet SDK failed to initialize', { cause })
+      })
     return await sdkPromise
   }
 
+  const getTokenSdk = async (): Promise<Cip56TokenSdk> => {
+    if (config.canton.backendToken === undefined) {
+      throw new Error('CANTON_BACKEND_TOKEN is required for CIP-56 token helper calls')
+    }
+    const auth = { method: 'static', token: config.canton.backendToken }
+    tokenSdkPromise ??= sdkFactory({
+      auth,
+      ledgerClientUrl: config.canton.jsonApiUrl,
+      logAdapter: 'console',
+      token: {
+        validatorUrl: config.splice.validatorUrl,
+        auth,
+        registries: [config.splice.registryApiUrl],
+      },
+    })
+      .then((sdk) => sdk as Cip56TokenSdk)
+      .catch((cause: unknown) => {
+        tokenSdkPromise = undefined
+        throw new Error('CIP-56 wallet SDK failed to initialize', { cause })
+      })
+    return await tokenSdkPromise
+  }
+
   const ledgerJsonApiVersion = async (): Promise<{ connected: boolean; reason?: string }> => {
     try {
       const response = await fetch(`${config.canton.jsonApiUrl.replace(/\/$/, '')}/v2/version`, {
@@ -346,6 +403,26 @@ export const createRpc = (config: WalletServiceConfig): Rpc => {
     return parsed
   }
 
+  const cip56ListPendingTransfers = async (params: unknown): Promise<unknown> => {
+    const p = objectParam<Record<string, unknown>>(params, 'cip56.listPendingTransfers')
+    const partyId = requiredStringParam(p, 'partyId')
+    const sdk = await getTokenSdk()
+    return await sdk.token.transfer.pending(partyId)
+  }
+
+  const cip56AcceptTransfer = async (
+    params: unknown,
+  ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
+    const p = objectParam<Record<string, unknown>>(params, 'cip56.acceptTransfer')
+    const transferInstructionCid = requiredStringParam(p, 'transferInstructionCid')
+    const sdk = await getTokenSdk()
+    const [commands, disclosedContracts] = await sdk.token.transfer.accept({
+      transferInstructionCid,
+      registryUrl: new URL(config.splice.registryApiUrl),
+    })
+    return { commands, disclosedContracts }
+  }
+
   const dispatch = async (id: JsonRpcId, request: JsonRpcRequest): Promise<JsonRpcResponse> => {
     if (request.jsonrpc !== undefined && request.jsonrpc !== '2.0') {
       return rpcError(id, -32600, 'Invalid request', { reason: 'jsonrpc must be "2.0"' })
@@ -376,6 +453,10 @@ export const createRpc = (config: WalletServiceConfig): Rpc => {
           return rpcResult(id, await executePrepared(request.params))
         case 'ledgerApi':
           return rpcResult(id, await ledgerApi(request.params))
+        case 'cip56.listPendingTransfers':
+          return rpcResult(id, await cip56ListPendingTransfers(request.params))
+        case 'cip56.acceptTransfer':
+          return rpcResult(id, await cip56AcceptTransfer(request.params))
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -419,6 +500,8 @@ export const createRpc = (config: WalletServiceConfig): Rpc => {
       'ledgerApi',
       'prepareTransaction',
       'executePrepared',
+      'cip56.listPendingTransfers',
+      'cip56.acceptTransfer',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     adminEndpoints: ['POST /admin/party/prepare', 'POST /admin/party/complete'],
diff --git a/canton-barebones/wallet-service/test/mock.test.ts b/canton-barebones/wallet-service/test/mock.test.ts
index 16dbdb80..a0498478 100644
--- a/canton-barebones/wallet-service/test/mock.test.ts
+++ b/canton-barebones/wallet-service/test/mock.test.ts
@@ -20,6 +20,11 @@ const baseConfig = () => ({
     backendToken: undefined as string | undefined,
     tokenSource: 'none' as const,
   },
+  splice: {
+    validatorUrl: 'http://localhost:2000/api/validator',
+    scanApiUrl: 'http://scan.localhost:4000/api/scan',
+    registryApiUrl: 'http://localhost:2000/api/validator/v0/scan-proxy',
+  },
 })
 
 describe('isMockEnabled', () => {
@@ -116,6 +121,23 @@ describe('createMockRpc', () => {
     assert.ok('error' in res)
     assert.equal(res.error.code, -32004)
   })
+
+  it('cip56.listPendingTransfers returns no mock transfers', async () => {
+    // Scenario: Carpincho polls pending token transfers in the Assets tab.
+    // Mock mode should keep that UI quiet instead of surfacing a method-not-found
+    // error when no Canton or Splice services are running.
+    const rpc = createMockRpc(baseConfig())
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listPendingTransfers',
+      params: { partyId: 'alice::mock' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, [])
+  })
 })
 
 describe('createMockPartyApi', () => {
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 10230878..7b2d0ad2 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -20,6 +20,20 @@ const baseConfig = () => ({
     backendToken: undefined as string | undefined,
     tokenSource: 'none' as const,
   },
+  splice: {
+    validatorUrl: 'http://localhost:2000/api/validator',
+    scanApiUrl: 'http://scan.localhost:4000/api/scan',
+    registryApiUrl: 'http://localhost:2000/api/validator/v0/scan-proxy',
+  },
+})
+
+const withToken = () => ({
+  ...baseConfig(),
+  canton: {
+    ...baseConfig().canton,
+    backendToken: 'backend.jwt',
+    tokenSource: 'env' as const,
+  },
 })
 
 describe('rpc dispatcher', () => {
@@ -178,6 +192,115 @@ describe('ledgerApi pass-through', () => {
   })
 })
 
+describe('CIP-56 token helpers', () => {
+  it('lists pending transfers through the SDK token namespace without reshaping contracts', async () => {
+    // Scenario: wallet-service owns the Node-only wallet-sdk dependency, but
+    // Carpincho should still see the SDK contract payload directly so future
+    // browser-SDK migration does not need a second DTO translation.
+    const pendingContracts = [
+      {
+        contractId: 'transfer-cid-1',
+        interfaceViewValue: {
+          transfer: {
+            sender: 'sender::party',
+            receiver: 'receiver::party',
+            amount: '7.5',
+            instrumentId: { admin: 'admin::party', id: 'Amulet' },
+          },
+        },
+      },
+    ]
+    const seen: { partyId?: string; tokenConfig?: unknown } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async (options) => {
+        seen.tokenConfig = (options as { token?: unknown }).token
+        return {
+          token: {
+            transfer: {
+              pending: async (partyId: string) => {
+                seen.partyId = partyId
+                return pendingContracts
+              },
+            },
+          },
+        }
+      },
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listPendingTransfers',
+      params: { partyId: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, pendingContracts)
+    assert.equal(seen.partyId, 'receiver::party')
+    assert.deepEqual(seen.tokenConfig, {
+      validatorUrl: 'http://localhost:2000/api/validator',
+      auth: { method: 'static', token: 'backend.jwt' },
+      registries: ['http://localhost:2000/api/validator/v0/scan-proxy'],
+    })
+  })
+
+  it('prepares an accept-transfer command through the SDK token namespace', async () => {
+    // Scenario: accepting a pending CIP-56 transfer requires SDK registry
+    // context, but Carpincho must still sign the prepared transaction itself.
+    // wallet-service returns the SDK command and disclosed contracts only.
+    const disclosedContracts = [{ contractId: 'registry-context-cid', createdEventBlob: 'blob' }]
+    const seen: { transferInstructionCid?: string; registryUrl?: string } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        token: {
+          transfer: {
+            accept: async (params: { transferInstructionCid: string; registryUrl: URL }) => {
+              seen.transferInstructionCid = params.transferInstructionCid
+              seen.registryUrl = params.registryUrl.href
+              return [{ ExerciseCommand: { choice: 'Accept' } }, disclosedContracts]
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.acceptTransfer',
+      params: { transferInstructionCid: 'transfer-cid-1' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      commands: { ExerciseCommand: { choice: 'Accept' } },
+      disclosedContracts,
+    })
+    assert.equal(seen.transferInstructionCid, 'transfer-cid-1')
+    assert.equal(seen.registryUrl, 'http://localhost:2000/api/validator/v0/scan-proxy')
+  })
+
+  it('rejects CIP-56 helper calls without required params', async () => {
+    // Scenario: malformed Carpincho calls should fail as JSON-RPC invalid
+    // params before the SDK is initialized or any Splice service is contacted.
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => {
+        throw new Error('SDK should not be initialized')
+      },
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listPendingTransfers',
+      params: {},
+    })) as JsonRpcResponse
+
+    assert.ok('error' in res)
+    assert.equal(res.error.code, -32602)
+  })
+})
+
 describe('error serialization', () => {
   // SDK rejections are plain JsCantonError objects, not Error instances.
   const cantonError = {

From f5c4a338472d3bcb24630b84b1af7dcf305c5473 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 17:38:14 -0300
Subject: [PATCH 09/98] feat(carpincho): accept cip56 transfers through
 wallet-service

---
 .../src/api/interactiveSubmission.ts          |  83 +++++++++++
 carpincho-wallet/src/cip56/transfers.ts       |  72 ++++++++++
 .../src/components/AssetsPanel.tsx            | 112 ++++++++++++++-
 .../src/hooks/usePendingCip56Transfers.ts     | 113 +++++++++++++++
 carpincho-wallet/test/cip56/transfers.test.ts | 133 ++++++++++++++++++
 .../test/components/AssetsPanel.test.tsx      |  97 +++++++++++++
 .../hooks/usePendingCip56Transfers.test.tsx   |  85 +++++++++++
 7 files changed, 689 insertions(+), 6 deletions(-)
 create mode 100644 carpincho-wallet/src/api/interactiveSubmission.ts
 create mode 100644 carpincho-wallet/src/cip56/transfers.ts
 create mode 100644 carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
 create mode 100644 carpincho-wallet/test/cip56/transfers.test.ts
 create mode 100644 carpincho-wallet/test/components/AssetsPanel.test.tsx
 create mode 100644 carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx

diff --git a/carpincho-wallet/src/api/interactiveSubmission.ts b/carpincho-wallet/src/api/interactiveSubmission.ts
new file mode 100644
index 00000000..10c90492
--- /dev/null
+++ b/carpincho-wallet/src/api/interactiveSubmission.ts
@@ -0,0 +1,83 @@
+import { walletServiceRequest } from '@/api/walletService'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+interface PreparedTransactionResponse {
+  preparedTransaction: string
+  preparedTransactionHash: string
+  hashingSchemeVersion:
+    | 'HASHING_SCHEME_VERSION_UNSPECIFIED'
+    | 'HASHING_SCHEME_VERSION_V2'
+    | 'HASHING_SCHEME_VERSION_V3'
+  hashingDetails?: string
+  costEstimation?: unknown
+}
+
+interface ExecutePreparedResponse {
+  updateId?: string
+  completionOffset?: number
+}
+
+export interface ExecutePreparedCommandsParams {
+  account: AccountPublic
+  commands: unknown
+  disclosedContracts?: unknown[]
+  method: string
+  summary: string
+  commandId?: string
+  submissionId?: string
+  synchronizerId?: string
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+// Executes Canton interactive submission while Carpincho keeps private-key signing local.
+export const executePreparedCommands = async ({
+  account,
+  commands,
+  disclosedContracts,
+  method,
+  summary,
+  commandId,
+  submissionId,
+  synchronizerId,
+  signMessage,
+  recordTransaction,
+}: ExecutePreparedCommandsParams): Promise<ExecutePreparedResponse> => {
+  const prepared = await walletServiceRequest<PreparedTransactionResponse>('prepareTransaction', {
+    partyId: account.partyId,
+    actAs: [account.partyId],
+    commands,
+    ...(disclosedContracts === undefined ? {} : { disclosedContracts }),
+    ...(commandId === undefined ? {} : { commandId }),
+    ...(submissionId === undefined ? {} : { submissionId }),
+    ...(synchronizerId === undefined ? {} : { synchronizerId }),
+  })
+  const signatureBase64 = await signMessage(account.id, prepared.preparedTransactionHash)
+  const executed = await walletServiceRequest<ExecutePreparedResponse>('executePrepared', {
+    ...prepared,
+    partyId: account.partyId,
+    signatureBase64,
+    ...(submissionId === undefined ? {} : { submissionId }),
+  })
+
+  await recordTransaction?.({
+    accountId: account.id,
+    accountName: account.name,
+    partyId: account.partyId,
+    network: account.network,
+    method,
+    status: 'executed',
+    preparedTransaction: prepared.preparedTransaction,
+    preparedTransactionHash: prepared.preparedTransactionHash,
+    commands: Array.isArray(commands) ? commands : [commands],
+    commandId,
+    submissionId,
+    updateId: executed.updateId,
+    completionOffset: executed.completionOffset,
+    commandCount: Array.isArray(commands) ? commands.length : 1,
+    summary,
+  })
+
+  return executed
+}
diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
new file mode 100644
index 00000000..76de23ab
--- /dev/null
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -0,0 +1,72 @@
+import { executePreparedCommands } from '@/api/interactiveSubmission'
+import { walletServiceRequest } from '@/api/walletService'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+export interface TokenInstrumentId {
+  admin?: string
+  id?: string
+}
+
+export interface PendingTokenTransfer {
+  contractId: string
+  interfaceViewValue?: {
+    transfer?: {
+      sender?: string
+      receiver?: string
+      amount?: string
+      instrumentId?: TokenInstrumentId
+    }
+    status?: {
+      current?: {
+        tag?: string
+      } | null
+    }
+  }
+}
+
+interface AcceptTransferCommands {
+  commands: unknown
+  disclosedContracts?: unknown[]
+}
+
+interface AcceptTransferParams {
+  account: AccountPublic
+  transferInstructionCid: string
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction: VaultContextValue['recordTransaction']
+}
+
+// Keeps token labels readable while preserving the SDK contract payload shape elsewhere.
+export const tokenDisplayLabel = (instrumentId?: TokenInstrumentId): string =>
+  instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
+    ? 'unknown token'
+    : instrumentId.id.trim()
+
+// Reads pending transfer contracts through wallet-service, which owns the Node-only SDK dependency.
+export const listPendingIncomingTransfers = async (
+  partyId: string,
+): Promise<PendingTokenTransfer[]> =>
+  await walletServiceRequest<PendingTokenTransfer[]>('cip56.listPendingTransfers', { partyId })
+
+// Accepts a transfer using wallet-service SDK commands and Carpincho's local signer.
+export const acceptPendingTransfer = async ({
+  account,
+  transferInstructionCid,
+  signMessage,
+  recordTransaction,
+}: AcceptTransferParams): Promise<{ updateId?: string; completionOffset?: number }> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<AcceptTransferCommands>(
+    'cip56.acceptTransfer',
+    { transferInstructionCid },
+  )
+  return await executePreparedCommands({
+    account,
+    commands,
+    disclosedContracts,
+    method: 'cip56.transfer.accept',
+    summary: 'Accept transfer',
+    signMessage,
+    recordTransaction,
+  })
+}
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index b23aefb8..2f3f3584 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,6 +1,106 @@
-// Mocked Assets tab; token balances are not wired yet.
-export const AssetsPanel = (): JSX.Element => (
-  <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 assets to show yet</p>
-  </div>
-)
+import { useState } from 'react'
+import { tokenDisplayLabel } from '@/cip56/transfers'
+import { PrimaryButton } from '@/components/ui/Button'
+import { toast } from '@/components/ui/toast'
+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 AssetsPanelProps {
+  account?: AccountPublic
+  api?: Cip56TransferApi
+}
+
+// Renders incoming CIP-56 transfer instructions that require receiver acceptance.
+export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element => {
+  const vault = useVault()
+  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
+  const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
+  const { transfers, loading, error, accept } = usePendingCip56Transfers(activeAccount, {
+    api,
+    signMessage: vault.signMessage,
+    recordTransaction: vault.recordTransaction,
+  })
+
+  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>
+    )
+  }
+
+  return (
+    <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <div className="flex items-center justify-between gap-3 px-1">
+        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Incoming transfers</h2>
+        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
+      </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}
+        </div>
+      )}
+
+      {transfers.length === 0 && !loading ? (
+        <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 className="flex flex-col gap-2">
+          {transfers.map((transfer) => {
+            const transferView = transfer.interfaceViewValue?.transfer
+            const label = `${transferView?.amount ?? 'unknown'} ${tokenDisplayLabel(
+              transferView?.instrumentId,
+            )}`
+            const isAccepting = acceptingCid === transfer.contractId
+            return (
+              <article
+                key={transfer.contractId}
+                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>
+                    <p className="m-0 mt-1 font-mono text-[0.76rem] text-muted-foreground">
+                      from:{' '}
+                      {transferView?.sender === undefined
+                        ? 'unknown'
+                        : shortMiddle(transferView.sender, 10, 6)}
+                    </p>
+                  </div>
+                  <PrimaryButton
+                    className="shrink-0 px-3 py-1.5 text-[0.82rem]"
+                    disabled={isAccepting}
+                    onClick={() => {
+                      void onAccept(transfer.contractId)
+                    }}
+                  >
+                    {isAccepting ? 'Accepting...' : 'Accept'}
+                  </PrimaryButton>
+                </div>
+              </article>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
new file mode 100644
index 00000000..b2b3aebc
--- /dev/null
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  acceptPendingTransfer,
+  listPendingIncomingTransfers,
+  type PendingTokenTransfer,
+} from '@/cip56/transfers'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+export interface Cip56TransferApi {
+  listPendingIncomingTransfers: (partyId: string) => Promise<PendingTokenTransfer[]>
+  acceptTransfer: (params: {
+    account: AccountPublic
+    transferInstructionCid: string
+    signMessage: VaultContextValue['signMessage']
+    recordTransaction: VaultContextValue['recordTransaction']
+  }) => Promise<{ updateId?: string; completionOffset?: number }>
+}
+
+export interface PendingCip56TransfersState {
+  transfers: PendingTokenTransfer[]
+  loading: boolean
+  error?: string
+  refresh: () => Promise<void>
+  accept: (transferInstructionCid: string) => Promise<void>
+}
+
+export interface PendingCip56TransfersOptions {
+  pollMs?: number | null
+  api?: Cip56TransferApi
+  signMessage?: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+const defaultApi: Cip56TransferApi = {
+  listPendingIncomingTransfers,
+  acceptTransfer: acceptPendingTransfer,
+}
+
+export const CIP56_TRANSFER_POLL_MS = 5_000
+
+// Polls pending incoming transfers because LocalNet exposes no browser stream for this flow.
+export const usePendingCip56Transfers = (
+  account: AccountPublic | undefined,
+  options: PendingCip56TransfersOptions = {},
+): PendingCip56TransfersState => {
+  const api = options.api ?? defaultApi
+  const pollMs = options.pollMs === undefined ? CIP56_TRANSFER_POLL_MS : options.pollMs
+  const [transfers, setTransfers] = useState<PendingTokenTransfer[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  const refresh = useCallback(async (): Promise<void> => {
+    if (account === undefined) {
+      setTransfers([])
+      setError(undefined)
+      return
+    }
+    setLoading(true)
+    try {
+      setTransfers(await api.listPendingIncomingTransfers(account.partyId))
+      setError(undefined)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }, [account, api])
+
+  useEffect(() => {
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const tick = async (): Promise<void> => {
+      await refresh()
+      if (!cancelled && pollMs !== null) {
+        timer = setTimeout(() => {
+          void tick()
+        }, pollMs)
+      }
+    }
+    void tick()
+    return () => {
+      cancelled = true
+      if (timer !== undefined) {
+        clearTimeout(timer)
+      }
+    }
+  }, [refresh, pollMs])
+
+  const accept = useCallback(
+    async (transferInstructionCid: string): Promise<void> => {
+      if (account === undefined) {
+        throw new Error('no account selected')
+      }
+      if (options.signMessage === undefined || options.recordTransaction === undefined) {
+        throw new Error('missing signing dependencies')
+      }
+      await api.acceptTransfer({
+        account,
+        transferInstructionCid,
+        signMessage: options.signMessage,
+        recordTransaction: options.recordTransaction,
+      })
+      await refresh()
+    },
+    [account, api, options.signMessage, options.recordTransaction, refresh],
+  )
+
+  return useMemo(
+    () => ({ transfers, loading, ...(error === undefined ? {} : { error }), refresh, accept }),
+    [transfers, loading, error, refresh, accept],
+  )
+}
diff --git a/carpincho-wallet/test/cip56/transfers.test.ts b/carpincho-wallet/test/cip56/transfers.test.ts
new file mode 100644
index 00000000..7a1d2198
--- /dev/null
+++ b/carpincho-wallet/test/cip56/transfers.test.ts
@@ -0,0 +1,133 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { acceptPendingTransfer, listPendingIncomingTransfers } from '@/cip56/transfers'
+import type { AccountPublic } from '@/vault/types'
+
+const originalFetch = globalThis.fetch
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the self-custodial party that receives an incoming CIP-56 transfer.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+describe('CIP-56 wallet-service transfer helpers', () => {
+  afterEach(() => {
+    // Each test replaces fetch with a purpose-built JSON-RPC fake, so restore the global afterward.
+    globalThis.fetch = originalFetch
+    localStorage.clear()
+  })
+
+  it('lists pending incoming transfers through wallet-service without reshaping SDK contracts', async () => {
+    // Scenario: wallet-service returns the raw-ish SDK pending transfer contracts.
+    // Carpincho should pass that shape through so a future browser SDK can replace this adapter directly.
+    const pendingContracts = [
+      {
+        contractId: 'transfer-cid-1',
+        interfaceViewValue: {
+          transfer: {
+            sender: 'sender::party',
+            receiver: 'alice::party',
+            amount: '12.5',
+            instrumentId: { admin: 'admin::party', id: 'Amulet' },
+          },
+        },
+      },
+    ]
+    const methods: string[] = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as { method: string; params: unknown }
+      methods.push(body.method)
+      assert.deepEqual(body.params, { partyId: 'alice::party' })
+      return new Response(JSON.stringify({ result: pendingContracts }), { status: 200 })
+    }) as typeof globalThis.fetch
+
+    const result = await listPendingIncomingTransfers('alice::party')
+
+    assert.deepEqual(result, pendingContracts)
+    assert.deepEqual(methods, ['cip56.listPendingTransfers'])
+  })
+
+  it('accepts a pending transfer by asking wallet-service for commands and keeping signing in Carpincho', async () => {
+    // Scenario: wallet-service uses Node-only SDK helpers to prepare the CIP-56 accept command.
+    // Carpincho then prepares, signs, executes, and records the transaction with its local vault key.
+    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 === 'cip56.acceptTransfer') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { ExerciseCommand: { choice: 'AcceptTransferInstruction' } },
+              disclosedContracts: [
+                { contractId: 'registry-context-cid', createdEventBlob: 'blob' },
+              ],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-tx',
+              preparedTransactionHash: 'prepared-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-1' } }), { status: 200 })
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+    const recorded: unknown[] = []
+
+    const result = await acceptPendingTransfer({
+      account: ACCOUNT,
+      transferInstructionCid: 'transfer-cid-1',
+      signMessage: async (accountId, messageBase64) => {
+        assert.equal(accountId, 'account-1')
+        assert.equal(messageBase64, 'prepared-hash')
+        return 'signature-base64'
+      },
+      recordTransaction: async (tx) => {
+        recorded.push(tx)
+        return { ...tx, id: 'tx-1', createdAt: 2 }
+      },
+    })
+
+    assert.deepEqual(result, { updateId: 'update-1' })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['cip56.acceptTransfer', 'prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, { transferInstructionCid: 'transfer-cid-1' })
+    assert.deepEqual(calls[1]?.params, {
+      partyId: 'alice::party',
+      actAs: ['alice::party'],
+      commands: { ExerciseCommand: { choice: 'AcceptTransferInstruction' } },
+      disclosedContracts: [{ contractId: 'registry-context-cid', createdEventBlob: 'blob' }],
+    })
+    assert.deepEqual(calls[2]?.params, {
+      preparedTransaction: 'prepared-tx',
+      preparedTransactionHash: 'prepared-hash',
+      hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+      partyId: 'alice::party',
+      signatureBase64: 'signature-base64',
+    })
+    assert.equal((recorded[0] as { method?: string } | undefined)?.method, 'cip56.transfer.accept')
+  })
+})
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
new file mode 100644
index 00000000..981d7b69
--- /dev/null
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -0,0 +1,97 @@
+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 { AssetsPanel } from '@/components/AssetsPanel'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderAssets = (api: Cip56TransferApi): void => {
+  render(
+    <VaultContext.Provider value={baseVault()}>
+      <AssetsPanel api={api} />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('AssetsPanel', () => {
+  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' }
+      },
+    }
+
+    renderAssets(api)
+
+    await screen.findByText('Incoming transfers')
+    await screen.findByText('42 Amulet')
+    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
+    await waitFor(() => assert.ok(screen.getByText('No pending transfers')))
+
+    assert.deepEqual(calls, ['list', 'accept', 'list'])
+  })
+})
diff --git a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
new file mode 100644
index 00000000..61367d15
--- /dev/null
+++ b/carpincho-wallet/test/hooks/usePendingCip56Transfers.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 {
+  CIP56_TRANSFER_POLL_MS,
+  type Cip56TransferApi,
+  usePendingCip56Transfers,
+} from '@/hooks/usePendingCip56Transfers'
+import type { AccountPublic } from '@/vault/types'
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the selected party whose incoming token transfers are polled.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const Probe = ({ api }: { api: Cip56TransferApi }): JSX.Element => {
+  const state = usePendingCip56Transfers(ACCOUNT, {
+    api,
+    pollMs: null,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+  })
+  return (
+    <div>
+      <output>{state.transfers.map((transfer) => transfer.contractId).join(',')}</output>
+      <span>{state.error ?? 'no-error'}</span>
+      <button
+        type="button"
+        onClick={() => {
+          void state.accept('transfer-cid-1')
+        }}
+      >
+        Accept
+      </button>
+    </div>
+  )
+}
+
+describe('usePendingCip56Transfers', () => {
+  afterEach(() => {
+    // Each test mounts a hook probe with its own fake API state.
+    cleanup()
+  })
+
+  it('uses a five-second polling interval by default', () => {
+    // Scenario: pending transfer acceptance has no browser websocket, so the
+    // hook must poll often enough for the popup to update without manual refresh.
+    assert.equal(CIP56_TRANSFER_POLL_MS, 5_000)
+  })
+
+  it('loads pending transfers immediately and refreshes after accept', async () => {
+    // Scenario: opening the Assets tab should show the current pending transfer
+    // list, then accepting one should ask the API to accept and refresh the list.
+    const calls: string[] = []
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => {
+        calls.push('list')
+        return calls.includes('accept') ? [] : [{ contractId: 'transfer-cid-1' }]
+      },
+      acceptTransfer: async ({ account, transferInstructionCid }) => {
+        calls.push('accept')
+        assert.equal(account.id, 'account-1')
+        assert.equal(transferInstructionCid, 'transfer-cid-1')
+        return { updateId: 'update-1' }
+      },
+    }
+
+    render(<Probe api={api} />)
+
+    await waitFor(() =>
+      assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1'),
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
+    await waitFor(() => assert.equal(screen.getByRole('status').textContent, ''))
+
+    assert.deepEqual(calls, ['list', 'accept', 'list'])
+  })
+})

From 4ad9cecf10bf3f9b1bff6463bd52c899d22d1b60 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 17:46:25 -0300
Subject: [PATCH 10/98] fix(canton-barebones): pass splice urls to
 wallet-service

---
 canton-barebones/docker-compose.yaml         |  3 +++
 canton-barebones/test/splice-common.test.mjs | 24 ++++++++++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/canton-barebones/docker-compose.yaml b/canton-barebones/docker-compose.yaml
index 8db6f042..7c094c3a 100644
--- a/canton-barebones/docker-compose.yaml
+++ b/canton-barebones/docker-compose.yaml
@@ -11,6 +11,9 @@ services:
       CANTON_JSON_API_URL: "http://host.docker.internal:2975"
       CANTON_LEDGER_API_URL: "grpc://host.docker.internal:2901"
       CANTON_ADMIN_API_URL: "grpc://host.docker.internal:2902"
+      SPLICE_VALIDATOR_URL: "${SPLICE_VALIDATOR_URL:-http://host.docker.internal:2000/api/validator}"
+      SPLICE_SCAN_API_URL: "${SPLICE_SCAN_API_URL:-http://host.docker.internal:4000/api/scan}"
+      SPLICE_REGISTRY_API_URL: "${SPLICE_REGISTRY_API_URL:-http://host.docker.internal:2000/api/validator/v0/scan-proxy}"
       WALLET_SERVICE_PORT: "3010"
       WALLET_SERVICE_CORS_ORIGINS: "${WALLET_SERVICE_CORS_ORIGINS:-http://localhost:3011}"
       NETWORK: "${NETWORK:-canton:localnet}"
diff --git a/canton-barebones/test/splice-common.test.mjs b/canton-barebones/test/splice-common.test.mjs
index 52350ed1..be6fdc72 100644
--- a/canton-barebones/test/splice-common.test.mjs
+++ b/canton-barebones/test/splice-common.test.mjs
@@ -107,4 +107,28 @@ describe('Splice LocalNet shell config', () => {
       /COMPOSE_IGNORE_ORPHANS=true docker compose --project-directory "\$ROOT" up -d --build wallet-service/,
     )
   })
+
+  it('passes Docker-reachable Splice URLs into wallet-service', () => {
+    // Scenario: wallet-service runs inside its own container, so URLs that are
+    // valid in a browser, such as localhost, would point back to wallet-service.
+    // The compose config must inject host.docker.internal URLs so SDK helpers
+    // can reach the LocalNet nginx routes from inside Docker.
+    const composeFile = execFileSync('cat', [path.join(projectRoot, 'docker-compose.yaml')], {
+      cwd: projectRoot,
+      encoding: 'utf8',
+    })
+
+    assert.match(
+      composeFile,
+      /SPLICE_VALIDATOR_URL: "\$\{SPLICE_VALIDATOR_URL:-http:\/\/host\.docker\.internal:2000\/api\/validator\}"/,
+    )
+    assert.match(
+      composeFile,
+      /SPLICE_SCAN_API_URL: "\$\{SPLICE_SCAN_API_URL:-http:\/\/host\.docker\.internal:4000\/api\/scan\}"/,
+    )
+    assert.match(
+      composeFile,
+      /SPLICE_REGISTRY_API_URL: "\$\{SPLICE_REGISTRY_API_URL:-http:\/\/host\.docker\.internal:2000\/api\/validator\/v0\/scan-proxy\}"/,
+    )
+  })
 })

From d79fe4e6df1d3a00e9aef9f093da6f576c5fabfa Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 17:58:14 -0300
Subject: [PATCH 11/98] feat(carpincho): show cip56 transfer details

---
 carpincho-wallet/src/cip56/transfers.ts       | 39 ++++++++
 .../src/components/AssetsPanel.tsx            | 98 ++++++++++++++++---
 .../test/components/AssetsPanel.test.tsx      | 53 ++++++++++
 3 files changed, 179 insertions(+), 11 deletions(-)

diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index 76de23ab..b6236d73 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -8,6 +8,10 @@ export interface TokenInstrumentId {
   id?: string
 }
 
+interface TransferMetadata {
+  values?: Record<string, unknown>
+}
+
 export interface PendingTokenTransfer {
   contractId: string
   interfaceViewValue?: {
@@ -16,8 +20,12 @@ export interface PendingTokenTransfer {
       receiver?: string
       amount?: string
       instrumentId?: TokenInstrumentId
+      requestedAt?: string
+      executeBefore?: string
+      meta?: TransferMetadata
     }
     status?: {
+      tag?: string
       current?: {
         tag?: string
       } | null
@@ -37,12 +45,43 @@ interface AcceptTransferParams {
   recordTransaction: VaultContextValue['recordTransaction']
 }
 
+const TRANSFER_REASON_KEY = 'splice.lfdecentralizedtrust.org/reason'
+
 // Keeps token labels readable while preserving the SDK contract payload shape elsewhere.
 export const tokenDisplayLabel = (instrumentId?: TokenInstrumentId): string =>
   instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
     ? 'unknown token'
     : instrumentId.id.trim()
 
+// Extracts the Amulet sender description from the CIP-56 transfer metadata.
+export const transferDescription = (transfer: PendingTokenTransfer): string | undefined => {
+  const value = transfer.interfaceViewValue?.transfer?.meta?.values?.[TRANSFER_REASON_KEY]
+  return typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined
+}
+
+// Reads the current transfer status across SDK payload variants.
+export const transferStatusLabel = (transfer: PendingTokenTransfer): string =>
+  transfer.interfaceViewValue?.status?.tag ??
+  transfer.interfaceViewValue?.status?.current?.tag ??
+  'unknown'
+
+// Formats transfer timestamps in a deterministic UTC label for compact wallet details.
+export const transferTimeLabel = (value?: string): string => {
+  if (value === undefined || value.trim() === '') {
+    return 'unknown'
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return value
+  }
+  const yyyy = String(date.getUTCFullYear()).padStart(4, '0')
+  const mm = String(date.getUTCMonth() + 1).padStart(2, '0')
+  const dd = String(date.getUTCDate()).padStart(2, '0')
+  const hh = String(date.getUTCHours()).padStart(2, '0')
+  const min = String(date.getUTCMinutes()).padStart(2, '0')
+  return `${yyyy}-${mm}-${dd} ${hh}:${min} UTC`
+}
+
 // Reads pending transfer contracts through wallet-service, which owns the Node-only SDK dependency.
 export const listPendingIncomingTransfers = async (
   partyId: string,
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 2f3f3584..18eb988d 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,6 +1,11 @@
 import { useState } from 'react'
-import { tokenDisplayLabel } from '@/cip56/transfers'
-import { PrimaryButton } from '@/components/ui/Button'
+import {
+  tokenDisplayLabel,
+  transferDescription,
+  transferStatusLabel,
+  transferTimeLabel,
+} from '@/cip56/transfers'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { toast } from '@/components/ui/toast'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
@@ -13,17 +18,39 @@ export interface AssetsPanelProps {
   api?: Cip56TransferApi
 }
 
+interface TransferDetailRowProps {
+  label: string
+  value: string
+}
+
+// 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>
+)
+
 // Renders incoming CIP-56 transfer instructions that require receiver acceptance.
 export const AssetsPanel = ({ account, api }: AssetsPanelProps): 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,
   })
 
+  // Tracks one open transfer details section at a time to keep the assets 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 {
@@ -70,7 +97,10 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
             const label = `${transferView?.amount ?? 'unknown'} ${tokenDisplayLabel(
               transferView?.instrumentId,
             )}`
+            const description = transferDescription(transfer)
             const isAccepting = acceptingCid === transfer.contractId
+            const isExpanded = expandedCid === transfer.contractId
+            const detailsId = `transfer-details-${transfer.contractId}`
             return (
               <article
                 key={transfer.contractId}
@@ -79,6 +109,11 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
                 <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">
                       from:{' '}
                       {transferView?.sender === undefined
@@ -86,16 +121,57 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
                         : shortMiddle(transferView.sender, 10, 6)}
                     </p>
                   </div>
-                  <PrimaryButton
-                    className="shrink-0 px-3 py-1.5 text-[0.82rem]"
-                    disabled={isAccepting}
-                    onClick={() => {
-                      void onAccept(transfer.contractId)
-                    }}
-                  >
-                    {isAccepting ? 'Accepting...' : 'Accept'}
-                  </PrimaryButton>
+                  <div className="flex shrink-0 flex-col gap-2">
+                    <PrimaryButton
+                      className="px-3 py-1.5 text-[0.82rem]"
+                      disabled={isAccepting}
+                      onClick={() => {
+                        void onAccept(transfer.contractId)
+                      }}
+                    >
+                      {isAccepting ? 'Accepting...' : 'Accept'}
+                    </PrimaryButton>
+                    <SecondaryButton
+                      aria-controls={detailsId}
+                      aria-expanded={isExpanded}
+                      className="px-3 py-1.5 text-[0.78rem]"
+                      onClick={() => toggleDetails(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>
             )
           })}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 981d7b69..49f38636 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -94,4 +94,57 @@ describe('AssetsPanel', () => {
 
     assert.deepEqual(calls, ['list', 'accept', 'list'])
   })
+
+  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' }),
+    }
+
+    renderAssets(api)
+
+    await screen.findByText('666.0000000000 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')
+  })
 })

From d4a9a44d8a0502d2c3013aed3e5619d7a7b2155a Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:01:04 -0300
Subject: [PATCH 12/98] feat(carpincho): badge assets tab for pending transfers

---
 .../src/components/AssetsPanel.tsx            | 18 ++++-
 carpincho-wallet/src/components/HomeTabs.tsx  | 64 +++++++++------
 .../test/components/HomeTabs.test.tsx         | 81 +++++++++++++++++++
 3 files changed, 138 insertions(+), 25 deletions(-)
 create mode 100644 carpincho-wallet/test/components/HomeTabs.test.tsx

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 18eb988d..930b8210 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   tokenDisplayLabel,
   transferDescription,
@@ -16,6 +16,7 @@ import { useVault } from '@/vault/useVault'
 export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56TransferApi
+  onPendingCountChange?: (count: number) => void
 }
 
 interface TransferDetailRowProps {
@@ -32,7 +33,11 @@ const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Elemen
 )
 
 // Renders incoming CIP-56 transfer instructions that require receiver acceptance.
-export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element => {
+export const AssetsPanel = ({
+  account,
+  api,
+  onPendingCountChange,
+}: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
@@ -43,6 +48,15 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
     recordTransaction: vault.recordTransaction,
   })
 
+  // Exposes the hidden Assets polling result to the tab badge while the wallet is open.
+  useEffect(() => {
+    onPendingCountChange?.(transfers.length)
+  }, [onPendingCountChange, transfers.length])
+
+  useEffect(() => {
+    return () => onPendingCountChange?.(0)
+  }, [onPendingCountChange])
+
   // Tracks one open transfer details section at a time to keep the assets list compact.
   const toggleDetails = (transferInstructionCid: string): void => {
     setExpandedCid((current) =>
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 73a06c04..249581d9 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,36 +1,54 @@
+import { useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { TransactionRecord } from '@/vault/types'
 
 interface HomeTabsProps {
   transactions: TransactionRecord[]
+  assetsApi?: Cip56TransferApi
 }
 
 // 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 is a mocked placeholder.
-export const HomeTabs = ({ transactions }: HomeTabsProps): JSX.Element => (
-  <Tabs
-    defaultValue="activity"
-    className="flex min-h-0 flex-1 flex-col"
-  >
-    <TabsList>
-      <TabTrigger value="activity">Activity</TabTrigger>
-      <TabTrigger value="assets">Assets</TabTrigger>
-    </TabsList>
-    <TabContent
-      value="activity"
-      className={TAB_CONTENT_CLASS}
-    >
-      <ActivityList transactions={transactions} />
-    </TabContent>
-    <TabContent
-      value="assets"
-      className={TAB_CONTENT_CLASS}
+// Tabbed home body; Assets remains mounted so pending-transfer polling can badge the tab.
+export const HomeTabs = ({ transactions, assetsApi }: HomeTabsProps): JSX.Element => {
+  const [pendingTransferCount, setPendingTransferCount] = useState(0)
+
+  return (
+    <Tabs
+      defaultValue="activity"
+      className="flex min-h-0 flex-1 flex-col"
     >
-      <AssetsPanel />
-    </TabContent>
-  </Tabs>
-)
+      <TabsList>
+        <TabTrigger value="activity">Activity</TabTrigger>
+        <TabTrigger value="assets">
+          <span>Assets</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">
+              {pendingTransferCount}
+            </span>
+          ) : null}
+        </TabTrigger>
+      </TabsList>
+      <TabContent
+        value="activity"
+        className={TAB_CONTENT_CLASS}
+      >
+        <ActivityList transactions={transactions} />
+      </TabContent>
+      <TabContent
+        forceMount
+        value="assets"
+        className={TAB_CONTENT_CLASS}
+      >
+        <AssetsPanel
+          api={assetsApi}
+          onPendingCountChange={setPendingTransferCount}
+        />
+      </TabContent>
+    </Tabs>
+  )
+}
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
new file mode 100644
index 00000000..6a7d884a
--- /dev/null
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -0,0 +1,81 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import { HomeTabs } from '@/components/HomeTabs'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the active wallet party whose Assets tab polls pending transfers.
+  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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+describe('HomeTabs asset indicators', () => {
+  afterEach(() => {
+    // The force-mounted Assets tab owns a polling hook, so unmount it between scenarios.
+    cleanup()
+  })
+
+  it('shows a pending-transfer count on the Assets tab while Activity is selected', async () => {
+    // Scenario: incoming Amulet transfers require action even when the user is
+    // looking at Activity. The Assets panel should stay mounted while hidden so
+    // its polling result can drive a compact tab indicator.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'transfer-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party',
+              amount: '42',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    render(
+      <VaultContext.Provider value={baseVault()}>
+        <HomeTabs
+          transactions={[]}
+          assetsApi={api}
+        />
+      </VaultContext.Provider>,
+    )
+
+    assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
+    await waitFor(() => assert.ok(screen.getByRole('tab', { name: 'Assets 1' })))
+  })
+})

From a53ea0a058627aa9d61f2f02d99c28b095e91ef8 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:26:45 -0300
Subject: [PATCH 13/98] feat(wallet-service): expose cip56 holdings

---
 canton-barebones/wallet-service/src/mock.ts   |  3 ++
 canton-barebones/wallet-service/src/rpc.ts    | 23 ++++++++
 .../wallet-service/test/mock.test.ts          | 17 ++++++
 .../wallet-service/test/rpc.test.ts           | 53 +++++++++++++++++++
 4 files changed, 96 insertions(+)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index c4092f7f..e248a740 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -151,6 +151,8 @@ export const createMockRpc = (
           return rpcResult(id, ledgerApi(request.params))
         case 'cip56.listPendingTransfers':
           return rpcResult(id, [])
+        case 'cip56.listHoldings':
+          return rpcResult(id, [])
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -201,6 +203,7 @@ export const createMockRpc = (
       'prepareTransaction',
       'executePrepared',
       'cip56.listPendingTransfers',
+      'cip56.listHoldings',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     network: mockNetworkId(config),
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 3196b6e5..86e92f7f 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -100,6 +100,14 @@ type Cip56TokenSdk = {
         registryUrl: URL
       }) => Promise<[unknown, unknown[]]>
     }
+    utxos: {
+      list: (params: {
+        partyId: string
+        includeLocked: boolean
+        limit: number
+        continueUntilCompletion: boolean
+      }) => Promise<unknown>
+    }
   }
 }
 
@@ -410,6 +418,18 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     return await sdk.token.transfer.pending(partyId)
   }
 
+  const cip56ListHoldings = async (params: unknown): Promise<unknown> => {
+    const p = objectParam<Record<string, unknown>>(params, 'cip56.listHoldings')
+    const partyId = requiredStringParam(p, 'partyId')
+    const sdk = await getTokenSdk()
+    return await sdk.token.utxos.list({
+      partyId,
+      includeLocked: true,
+      limit: 100,
+      continueUntilCompletion: true,
+    })
+  }
+
   const cip56AcceptTransfer = async (
     params: unknown,
   ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
@@ -455,6 +475,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await ledgerApi(request.params))
         case 'cip56.listPendingTransfers':
           return rpcResult(id, await cip56ListPendingTransfers(request.params))
+        case 'cip56.listHoldings':
+          return rpcResult(id, await cip56ListHoldings(request.params))
         case 'cip56.acceptTransfer':
           return rpcResult(id, await cip56AcceptTransfer(request.params))
         case 'prepareExecute':
@@ -501,6 +523,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'prepareTransaction',
       'executePrepared',
       'cip56.listPendingTransfers',
+      'cip56.listHoldings',
       'cip56.acceptTransfer',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
diff --git a/canton-barebones/wallet-service/test/mock.test.ts b/canton-barebones/wallet-service/test/mock.test.ts
index a0498478..3b97096d 100644
--- a/canton-barebones/wallet-service/test/mock.test.ts
+++ b/canton-barebones/wallet-service/test/mock.test.ts
@@ -138,6 +138,23 @@ describe('createMockRpc', () => {
     assert.ok('result' in res)
     assert.deepEqual(res.result, [])
   })
+
+  it('cip56.listHoldings returns no mock holdings', async () => {
+    // Scenario: the Tokens tab polls holdings through wallet-service. Mock mode
+    // has no ledger state, so it should render an empty token list without
+    // raising a method-not-found error.
+    const rpc = createMockRpc(baseConfig())
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listHoldings',
+      params: { partyId: 'alice::mock' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, [])
+  })
 })
 
 describe('createMockPartyApi', () => {
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 7b2d0ad2..0297390c 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -280,6 +280,59 @@ describe('CIP-56 token helpers', () => {
     assert.equal(seen.registryUrl, 'http://localhost:2000/api/validator/v0/scan-proxy')
   })
 
+  it('lists token holding UTXOs through the SDK token namespace without reshaping contracts', async () => {
+    // Scenario: Carpincho needs the active CIP-56 holdings for a party, but the
+    // Node-only wallet SDK must stay behind wallet-service. The RPC returns the
+    // SDK holding contracts unchanged so the browser boundary remains thin.
+    const holdingContracts = [
+      {
+        contractId: 'holding-cid-1',
+        interfaceViewValue: {
+          owner: 'receiver::party',
+          amount: '666.0000000000',
+          instrumentId: { admin: 'admin::party', id: 'Amulet' },
+        },
+      },
+    ]
+    const seen: { params?: unknown; tokenConfig?: unknown } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async (options) => {
+        seen.tokenConfig = (options as { token?: unknown }).token
+        return {
+          token: {
+            utxos: {
+              list: async (params: unknown) => {
+                seen.params = params
+                return holdingContracts
+              },
+            },
+          },
+        }
+      },
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listHoldings',
+      params: { partyId: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, holdingContracts)
+    assert.deepEqual(seen.params, {
+      partyId: 'receiver::party',
+      includeLocked: true,
+      limit: 100,
+      continueUntilCompletion: true,
+    })
+    assert.deepEqual(seen.tokenConfig, {
+      validatorUrl: 'http://localhost:2000/api/validator',
+      auth: { method: 'static', token: 'backend.jwt' },
+      registries: ['http://localhost:2000/api/validator/v0/scan-proxy'],
+    })
+  })
+
   it('rejects CIP-56 helper calls without required params', async () => {
     // Scenario: malformed Carpincho calls should fail as JSON-RPC invalid
     // params before the SDK is initialized or any Splice service is contacted.

From 5fe8636a40498e9c388ea70e64a24b28e78b7fe8 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:34:40 -0300
Subject: [PATCH 14/98] feat(carpincho): add tokens tab for holdings

---
 carpincho-wallet/src/cip56/holdings.ts        | 115 ++++++++++++++
 carpincho-wallet/src/components/HomeTabs.tsx  |  12 +-
 .../src/components/TokensPanel.tsx            | 147 ++++++++++++++++++
 .../src/hooks/useTokenHoldings.ts             |  89 +++++++++++
 carpincho-wallet/test/cip56/holdings.test.ts  |  78 ++++++++++
 .../test/components/HomeTabs.test.tsx         |  38 ++++-
 .../test/components/TokensPanel.test.tsx      | 103 ++++++++++++
 7 files changed, 580 insertions(+), 2 deletions(-)
 create mode 100644 carpincho-wallet/src/cip56/holdings.ts
 create mode 100644 carpincho-wallet/src/components/TokensPanel.tsx
 create mode 100644 carpincho-wallet/src/hooks/useTokenHoldings.ts
 create mode 100644 carpincho-wallet/test/cip56/holdings.test.ts
 create mode 100644 carpincho-wallet/test/components/TokensPanel.test.tsx

diff --git a/carpincho-wallet/src/cip56/holdings.ts b/carpincho-wallet/src/cip56/holdings.ts
new file mode 100644
index 00000000..8246c408
--- /dev/null
+++ b/carpincho-wallet/src/cip56/holdings.ts
@@ -0,0 +1,115 @@
+import { walletServiceRequest } from '@/api/walletService'
+import type { TokenInstrumentId } from '@/cip56/transfers'
+
+export interface TokenHoldingLock {
+  holders?: string[]
+  expiresAt?: string
+  expiresAfter?: string
+  context?: string
+}
+
+export interface TokenHoldingView {
+  owner?: string
+  amount?: string
+  instrumentId?: TokenInstrumentId
+  lock?: TokenHoldingLock | null
+  meta?: unknown
+}
+
+export interface TokenHolding {
+  contractId: string
+  interfaceViewValue?: TokenHoldingView
+}
+
+export interface TokenHoldingSummary {
+  key: string
+  tokenLabel: string
+  instrumentId?: TokenInstrumentId
+  totalAmount: string
+  utxoCount: number
+  lockedCount: number
+  unlockedCount: number
+  holdings: TokenHolding[]
+}
+
+interface ParsedDecimal {
+  scaled: bigint
+  scale: number
+}
+
+// Keeps token labels readable while preserving admin/id identity in summary keys.
+export const holdingTokenLabel = (instrumentId?: TokenInstrumentId): string =>
+  instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
+    ? 'unknown token'
+    : instrumentId.id.trim()
+
+// Creates a stable grouping key for one token instrument.
+const holdingInstrumentKey = (instrumentId?: TokenInstrumentId): string =>
+  `${instrumentId?.admin ?? 'unknown-admin'}:${instrumentId?.id ?? 'unknown-token'}`
+
+// Parses positive decimal strings from SDK holding amounts without floating point rounding.
+const parseDecimalAmount = (value: string): ParsedDecimal | undefined => {
+  const trimmed = value.trim()
+  if (!/^\d+(\.\d+)?$/.test(trimmed)) {
+    return undefined
+  }
+  const [whole, fraction = ''] = trimmed.split('.')
+  return {
+    scaled: BigInt(`${whole}${fraction}`),
+    scale: fraction.length,
+  }
+}
+
+// Adds SDK decimal amount strings exactly enough for wallet balance display.
+export const sumDecimalAmounts = (values: string[]): string => {
+  const parsed = values
+    .map(parseDecimalAmount)
+    .filter((value): value is ParsedDecimal => value !== undefined)
+  if (parsed.length === 0) {
+    return '0'
+  }
+  const scale = Math.max(...parsed.map((value) => value.scale))
+  const total = parsed.reduce((acc, value) => {
+    const multiplier = 10n ** BigInt(scale - value.scale)
+    return acc + value.scaled * multiplier
+  }, 0n)
+  const raw = total.toString().padStart(scale + 1, '0')
+  const whole = raw.slice(0, raw.length - scale)
+  const fraction = scale === 0 ? '' : raw.slice(raw.length - scale).replace(/0+$/, '')
+  return fraction === '' ? whole : `${whole}.${fraction}`
+}
+
+// Builds balance-like token summaries while keeping raw holding contracts available for details.
+export const summarizeTokenHoldings = (holdings: TokenHolding[]): TokenHoldingSummary[] => {
+  const groups = new Map<string, TokenHolding[]>()
+  for (const holding of holdings) {
+    const key = holdingInstrumentKey(holding.interfaceViewValue?.instrumentId)
+    groups.set(key, [...(groups.get(key) ?? []), holding])
+  }
+  return [...groups.entries()]
+    .map(([key, tokenHoldings]) => {
+      const firstView = tokenHoldings[0]?.interfaceViewValue
+      const lockedCount = tokenHoldings.filter(
+        (holding) => holding.interfaceViewValue?.lock != null,
+      ).length
+      return {
+        key,
+        tokenLabel: holdingTokenLabel(firstView?.instrumentId),
+        instrumentId: firstView?.instrumentId,
+        totalAmount: sumDecimalAmounts(
+          tokenHoldings
+            .map((holding) => holding.interfaceViewValue?.amount)
+            .filter((amount): amount is string => amount !== undefined),
+        ),
+        utxoCount: tokenHoldings.length,
+        lockedCount,
+        unlockedCount: tokenHoldings.length - lockedCount,
+        holdings: tokenHoldings,
+      }
+    })
+    .sort((a, b) => a.tokenLabel.localeCompare(b.tokenLabel))
+}
+
+// Reads active CIP-56 holding UTXOs through wallet-service.
+export const listTokenHoldings = async (partyId: string): Promise<TokenHolding[]> =>
+  await walletServiceRequest<TokenHolding[]>('cip56.listHoldings', { partyId })
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 249581d9..74dba5fc 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,20 +1,23 @@
 import { useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
+import { TokensPanel } from '@/components/TokensPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { TransactionRecord } from '@/vault/types'
 
 interface HomeTabsProps {
   transactions: TransactionRecord[]
   assetsApi?: Cip56TransferApi
+  tokensApi?: Cip56HoldingsApi
 }
 
 // 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 remains mounted so pending-transfer polling can badge the tab.
-export const HomeTabs = ({ transactions, assetsApi }: HomeTabsProps): JSX.Element => {
+export const HomeTabs = ({ transactions, assetsApi, tokensApi }: HomeTabsProps): JSX.Element => {
   const [pendingTransferCount, setPendingTransferCount] = useState(0)
 
   return (
@@ -32,6 +35,7 @@ export const HomeTabs = ({ transactions, assetsApi }: HomeTabsProps): JSX.Elemen
             </span>
           ) : null}
         </TabTrigger>
+        <TabTrigger value="tokens">Tokens</TabTrigger>
       </TabsList>
       <TabContent
         value="activity"
@@ -49,6 +53,12 @@ export const HomeTabs = ({ transactions, assetsApi }: HomeTabsProps): JSX.Elemen
           onPendingCountChange={setPendingTransferCount}
         />
       </TabContent>
+      <TabContent
+        value="tokens"
+        className={TAB_CONTENT_CLASS}
+      >
+        <TokensPanel api={tokensApi} />
+      </TabContent>
     </Tabs>
   )
 }
diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
new file mode 100644
index 00000000..9a72ca60
--- /dev/null
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -0,0 +1,147 @@
+import { useState } from 'react'
+import { transferTimeLabel } from '@/cip56/transfers'
+import { SecondaryButton } from '@/components/ui/Button'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { useTokenHoldings } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export interface TokensPanelProps {
+  account?: AccountPublic
+  api?: Cip56HoldingsApi
+}
+
+interface HoldingDetailRowProps {
+  label: string
+  value: string
+}
+
+// Keeps raw holding values readable in the expanded UTXO details area.
+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>
+)
+
+// Renders active CIP-56 token holding UTXOs grouped as token balances.
+export const TokensPanel = ({ account, api }: TokensPanelProps): JSX.Element => {
+  const vault = useVault()
+  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
+  const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
+  const { summaries, loading, error } = useTokenHoldings(activeAccount, { api })
+
+  // Keeps only one token's UTXO list open so the compact wallet panel stays scannable.
+  const toggleHoldings = (key: string): void => {
+    setExpandedTokenKey((current) => (current === key ? undefined : key))
+  }
+
+  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>
+    )
+  }
+
+  return (
+    <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <div className="flex items-center justify-between gap-3 px-1">
+        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Token holdings</h2>
+        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
+      </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}
+        </div>
+      )}
+
+      {summaries.length === 0 && !loading ? (
+        <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 token holdings</p>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          {summaries.map((summary) => {
+            const isExpanded = expandedTokenKey === summary.key
+            const detailsId = `token-holdings-${summary.key}`
+            return (
+              <article
+                key={summary.key}
+                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">
+                      {summary.totalAmount} {summary.tokenLabel}
+                    </p>
+                    <p className="m-0 mt-1 flex flex-wrap gap-x-1 text-[0.78rem] text-muted-foreground">
+                      <span>
+                        {summary.utxoCount} {summary.utxoCount === 1 ? 'UTXO' : 'UTXOs'}
+                      </span>
+                      {summary.lockedCount > 0 ? (
+                        <>
+                          <span aria-hidden="true">·</span>
+                          <span>{summary.lockedCount} locked</span>
+                        </>
+                      ) : null}
+                    </p>
+                  </div>
+                  <SecondaryButton
+                    aria-controls={detailsId}
+                    aria-expanded={isExpanded}
+                    className="shrink-0 px-3 py-1.5 text-[0.78rem]"
+                    onClick={() => toggleHoldings(summary.key)}
+                  >
+                    {isExpanded ? 'Hide holdings' : 'Show holdings'}
+                  </SecondaryButton>
+                </div>
+                {isExpanded ? (
+                  <div
+                    id={detailsId}
+                    className="mt-3 flex flex-col gap-3 rounded-md border border-border bg-background/60 p-3"
+                  >
+                    {summary.holdings.map((holding) => {
+                      const view = holding.interfaceViewValue
+                      const lock = view?.lock
+                      return (
+                        <dl
+                          key={holding.contractId}
+                          className="grid gap-3 border-b border-border pb-3 last:border-b-0 last:pb-0"
+                        >
+                          <HoldingDetailRow
+                            label="amount"
+                            value={view?.amount ?? 'unknown'}
+                          />
+                          <HoldingDetailRow
+                            label="owner"
+                            value={view?.owner ?? 'unknown'}
+                          />
+                          <HoldingDetailRow
+                            label="lock"
+                            value={lock == null ? 'unlocked' : 'locked'}
+                          />
+                          {lock?.expiresAt === undefined ? null : (
+                            <HoldingDetailRow
+                              label="expires"
+                              value={transferTimeLabel(lock.expiresAt)}
+                            />
+                          )}
+                          <HoldingDetailRow
+                            label="contract id"
+                            value={holding.contractId}
+                          />
+                        </dl>
+                      )
+                    })}
+                  </div>
+                ) : null}
+              </article>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
new file mode 100644
index 00000000..4e668091
--- /dev/null
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -0,0 +1,89 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  listTokenHoldings,
+  summarizeTokenHoldings,
+  type TokenHolding,
+  type TokenHoldingSummary,
+} from '@/cip56/holdings'
+import type { AccountPublic } from '@/vault/types'
+
+export interface Cip56HoldingsApi {
+  listTokenHoldings: (partyId: string) => Promise<TokenHolding[]>
+}
+
+export interface TokenHoldingsState {
+  holdings: TokenHolding[]
+  summaries: TokenHoldingSummary[]
+  loading: boolean
+  error?: string
+  refresh: () => Promise<void>
+}
+
+export interface TokenHoldingsOptions {
+  pollMs?: number | null
+  api?: Cip56HoldingsApi
+}
+
+const defaultApi: Cip56HoldingsApi = {
+  listTokenHoldings,
+}
+
+export const TOKEN_HOLDINGS_POLL_MS = 5_000
+
+// Polls token holdings while the Tokens tab is mounted because LocalNet exposes no browser stream.
+export const useTokenHoldings = (
+  account: AccountPublic | undefined,
+  options: TokenHoldingsOptions = {},
+): TokenHoldingsState => {
+  const api = options.api ?? defaultApi
+  const pollMs = options.pollMs === undefined ? TOKEN_HOLDINGS_POLL_MS : options.pollMs
+  const [holdings, setHoldings] = useState<TokenHolding[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | undefined>(undefined)
+
+  // Refreshes holdings for the active party and keeps the previous list on transient errors.
+  const refresh = useCallback(async (): Promise<void> => {
+    if (account === undefined) {
+      setHoldings([])
+      setError(undefined)
+      return
+    }
+    setLoading(true)
+    try {
+      setHoldings(await api.listTokenHoldings(account.partyId))
+      setError(undefined)
+    } catch (err) {
+      setError((err as Error).message)
+    } finally {
+      setLoading(false)
+    }
+  }, [account, api])
+
+  useEffect(() => {
+    let cancelled = false
+    let timer: ReturnType<typeof setTimeout> | undefined
+    // Polls serially so slow wallet-service calls cannot overlap.
+    const tick = async (): Promise<void> => {
+      await refresh()
+      if (!cancelled && pollMs !== null) {
+        timer = setTimeout(() => {
+          void tick()
+        }, pollMs)
+      }
+    }
+    void tick()
+    return () => {
+      cancelled = true
+      if (timer !== undefined) {
+        clearTimeout(timer)
+      }
+    }
+  }, [refresh, pollMs])
+
+  const summaries = useMemo(() => summarizeTokenHoldings(holdings), [holdings])
+
+  return useMemo(
+    () => ({ holdings, summaries, loading, ...(error === undefined ? {} : { error }), refresh }),
+    [holdings, summaries, loading, error, refresh],
+  )
+}
diff --git a/carpincho-wallet/test/cip56/holdings.test.ts b/carpincho-wallet/test/cip56/holdings.test.ts
new file mode 100644
index 00000000..e3de4257
--- /dev/null
+++ b/carpincho-wallet/test/cip56/holdings.test.ts
@@ -0,0 +1,78 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { listTokenHoldings, summarizeTokenHoldings, type TokenHolding } from '@/cip56/holdings'
+
+const originalFetch = globalThis.fetch
+
+describe('CIP-56 holding helpers', () => {
+  afterEach(() => {
+    // Restore the global RPC transport after each scenario so other wallet-service tests
+    // keep their own request fixtures isolated.
+    globalThis.fetch = originalFetch
+  })
+
+  it('lists token holdings through wallet-service without reshaping SDK contracts', async () => {
+    // Scenario: wallet-service owns the Node-only SDK call and returns raw-ish
+    // holding contracts. Carpincho should preserve that shape at the API boundary.
+    const holdings: TokenHolding[] = [
+      {
+        contractId: 'holding-cid-1',
+        interfaceViewValue: {
+          owner: 'alice::party',
+          amount: '12.5000000000',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          lock: null,
+        },
+      },
+    ]
+    const methods: string[] = []
+    globalThis.fetch = async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as { method: string; params: unknown }
+      methods.push(body.method)
+      assert.deepEqual(body.params, { partyId: 'alice::party' })
+      return new Response(JSON.stringify({ result: holdings }), { status: 200 })
+    }
+
+    const result = await listTokenHoldings('alice::party')
+
+    assert.deepEqual(methods, ['cip56.listHoldings'])
+    assert.deepEqual(result, holdings)
+  })
+
+  it('summarizes holdings by token with decimal totals and lock counts', () => {
+    // Scenario: one party can own multiple holding UTXOs for the same token.
+    // The Tokens tab should show a balance-like total while preserving UTXO details.
+    const holdings: TokenHolding[] = [
+      {
+        contractId: 'holding-cid-1',
+        interfaceViewValue: {
+          owner: 'alice::party',
+          amount: '12.5000000000',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          lock: null,
+        },
+      },
+      {
+        contractId: 'holding-cid-2',
+        interfaceViewValue: {
+          owner: 'alice::party',
+          amount: '3.2500000000',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          lock: { holders: ['validator::party'], expiresAt: '2026-06-10T20:41:05.803Z' },
+        },
+      },
+    ]
+
+    const [summary] = summarizeTokenHoldings(holdings)
+
+    assert.equal(summary.tokenLabel, 'Amulet')
+    assert.equal(summary.totalAmount, '15.75')
+    assert.equal(summary.utxoCount, 2)
+    assert.equal(summary.unlockedCount, 1)
+    assert.equal(summary.lockedCount, 1)
+    assert.deepEqual(
+      summary.holdings.map((holding) => holding.contractId),
+      ['holding-cid-1', 'holding-cid-2'],
+    )
+  })
+})
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 6a7d884a..c83f3997 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -1,13 +1,15 @@
 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 { HomeTabs } from '@/components/HomeTabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
 const ACCOUNT: AccountPublic = {
-  // Account fixture represents the active wallet party whose Assets tab polls pending transfers.
+  // Account fixture represents the active wallet party whose hidden tabs poll service state.
   id: 'account-1',
   name: 'Alice',
   partyId: 'alice::party',
@@ -17,6 +19,7 @@ const ACCOUNT: AccountPublic = {
   createdAt: 1,
 }
 
+// Builds the minimum unlocked vault context required by HomeTabs child panels.
 const baseVault = (): VaultContextValue =>
   ({
     isLocked: false,
@@ -78,4 +81,37 @@ describe('HomeTabs asset indicators', () => {
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
     await waitFor(() => assert.ok(screen.getByRole('tab', { name: 'Assets 1' })))
   })
+
+  it('opens the Tokens tab with the current party holdings', async () => {
+    // Scenario: token balances live in their own tab, separate from incoming
+    // transfer requests. Opening Tokens should mount the holdings panel for the
+    // active account and show the grouped balance.
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldings: async () => [
+        {
+          contractId: 'holding-cid-1',
+          interfaceViewValue: {
+            owner: 'alice::party',
+            amount: '7.0000000000',
+            instrumentId: { admin: 'dso::party', id: 'Amulet' },
+            lock: null,
+          },
+        },
+      ],
+    }
+
+    render(
+      <VaultContext.Provider value={baseVault()}>
+        <HomeTabs
+          transactions={[]}
+          tokensApi={holdingsApi}
+        />
+      </VaultContext.Provider>,
+    )
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Tokens' }))
+
+    await screen.findByText('Token holdings')
+    await screen.findByText('7 Amulet')
+  })
 })
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
new file mode 100644
index 00000000..f18ef9ce
--- /dev/null
+++ b/carpincho-wallet/test/components/TokensPanel.test.tsx
@@ -0,0 +1,103 @@
+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 { TokensPanel } from '@/components/TokensPanel'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the active wallet party whose token holdings are displayed.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+// Builds the minimum unlocked vault context required by the holdings panel.
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+// Mounts the panel under vault context so it can resolve the active account.
+const renderTokens = (api: Cip56HoldingsApi): void => {
+  render(
+    <VaultContext.Provider value={baseVault()}>
+      <TokensPanel api={api} />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('TokensPanel', () => {
+  afterEach(() => {
+    // The panel owns a polling hook; cleanup unmounts it before the next scenario.
+    cleanup()
+  })
+
+  it('shows token holding totals and expands UTXO details', async () => {
+    // Scenario: the active party owns two Amulet holding UTXOs, one unlocked and one locked.
+    // The panel should show a grouped total first and expose raw holding ids on demand.
+    const api: Cip56HoldingsApi = {
+      listTokenHoldings: async (partyId) => {
+        assert.equal(partyId, 'alice::party')
+        return [
+          {
+            contractId: 'holding-cid-1',
+            interfaceViewValue: {
+              owner: 'alice::party',
+              amount: '12.5000000000',
+              instrumentId: { admin: 'dso::party', id: 'Amulet' },
+              lock: null,
+            },
+          },
+          {
+            contractId: 'holding-cid-2',
+            interfaceViewValue: {
+              owner: 'alice::party',
+              amount: '3.2500000000',
+              instrumentId: { admin: 'dso::party', id: 'Amulet' },
+              lock: { holders: ['validator::party'], expiresAt: '2026-06-10T20:41:05.803Z' },
+            },
+          },
+        ]
+      },
+    }
+
+    renderTokens(api)
+
+    await screen.findByText('Token holdings')
+    await screen.findByText('15.75 Amulet')
+    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
+    assert.equal(screen.getByText('1 locked').textContent, '1 locked')
+    assert.equal(screen.queryByText('holding-cid-1'), null)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
+
+    assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
+    assert.equal(screen.getByText('holding-cid-2').textContent, 'holding-cid-2')
+    assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
+  })
+})

From 7e3d14fb0cb00b6c94bd1dfd1e3975cd218879ef Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:42:27 -0300
Subject: [PATCH 15/98] fix(carpincho): hide inactive tab content

---
 carpincho-wallet/src/components/ui/Tabs.tsx        | 11 ++++++++++-
 carpincho-wallet/test/components/HomeTabs.test.tsx |  8 ++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/components/ui/Tabs.tsx b/carpincho-wallet/src/components/ui/Tabs.tsx
index b3158ff8..3804f856 100644
--- a/carpincho-wallet/src/components/ui/Tabs.tsx
+++ b/carpincho-wallet/src/components/ui/Tabs.tsx
@@ -38,4 +38,13 @@ export const TabTrigger = ({
   </TabsPrimitive.Trigger>
 )
 
-export const TabContent = TabsPrimitive.Content
+// Keeps force-mounted panels in the DOM for polling while hiding inactive tab bodies.
+export const TabContent = ({
+  className,
+  ...props
+}: TabsPrimitive.TabsContentProps): JSX.Element => (
+  <TabsPrimitive.Content
+    className={cn('data-[state=inactive]:hidden', className)}
+    {...props}
+  />
+)
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index c83f3997..1e1d9b2c 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -80,6 +80,14 @@ describe('HomeTabs asset indicators', () => {
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
     await waitFor(() => assert.ok(screen.getByRole('tab', { name: 'Assets 1' })))
+    const incomingHeading = await screen.findByText('Incoming transfers')
+    const inactivePanel = incomingHeading.closest('[data-state="inactive"]')
+    assert.ok(inactivePanel, 'incoming transfer content should stay mounted in an inactive tab')
+    assert.match(
+      inactivePanel.getAttribute('class') ?? '',
+      /data-\[state=inactive\]:hidden/,
+      'inactive tab content must not be visible in Activity',
+    )
   })
 
   it('opens the Tokens tab with the current party holdings', async () => {

From 67af280d50b16e573b84d122d2f85b76fa178eae Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:44:36 -0300
Subject: [PATCH 16/98] feat(carpincho): remove assets tab

---
 carpincho-wallet/src/components/HomeTabs.tsx  | 72 ++++++-------------
 .../test/components/HomeTabs.test.tsx         | 46 +++---------
 2 files changed, 32 insertions(+), 86 deletions(-)

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 74dba5fc..b394e3a4 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,64 +1,38 @@
-import { useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
-import { AssetsPanel } from '@/components/AssetsPanel'
 import { TokensPanel } from '@/components/TokensPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { TransactionRecord } from '@/vault/types'
 
 interface HomeTabsProps {
   transactions: TransactionRecord[]
-  assetsApi?: Cip56TransferApi
   tokensApi?: Cip56HoldingsApi
 }
 
 // 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 remains mounted so pending-transfer polling can badge the tab.
-export const HomeTabs = ({ transactions, assetsApi, tokensApi }: HomeTabsProps): JSX.Element => {
-  const [pendingTransferCount, setPendingTransferCount] = useState(0)
-
-  return (
-    <Tabs
-      defaultValue="activity"
-      className="flex min-h-0 flex-1 flex-col"
+// Tabbed home body; token-related balances and actions share the Tokens view.
+export const HomeTabs = ({ transactions, tokensApi }: HomeTabsProps): JSX.Element => (
+  <Tabs
+    defaultValue="activity"
+    className="flex min-h-0 flex-1 flex-col"
+  >
+    <TabsList>
+      <TabTrigger value="activity">Activity</TabTrigger>
+      <TabTrigger value="tokens">Tokens</TabTrigger>
+    </TabsList>
+    <TabContent
+      value="activity"
+      className={TAB_CONTENT_CLASS}
     >
-      <TabsList>
-        <TabTrigger value="activity">Activity</TabTrigger>
-        <TabTrigger value="assets">
-          <span>Assets</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">
-              {pendingTransferCount}
-            </span>
-          ) : null}
-        </TabTrigger>
-        <TabTrigger value="tokens">Tokens</TabTrigger>
-      </TabsList>
-      <TabContent
-        value="activity"
-        className={TAB_CONTENT_CLASS}
-      >
-        <ActivityList transactions={transactions} />
-      </TabContent>
-      <TabContent
-        forceMount
-        value="assets"
-        className={TAB_CONTENT_CLASS}
-      >
-        <AssetsPanel
-          api={assetsApi}
-          onPendingCountChange={setPendingTransferCount}
-        />
-      </TabContent>
-      <TabContent
-        value="tokens"
-        className={TAB_CONTENT_CLASS}
-      >
-        <TokensPanel api={tokensApi} />
-      </TabContent>
-    </Tabs>
-  )
-}
+      <ActivityList transactions={transactions} />
+    </TabContent>
+    <TabContent
+      value="tokens"
+      className={TAB_CONTENT_CLASS}
+    >
+      <TokensPanel api={tokensApi} />
+    </TabContent>
+  </Tabs>
+)
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 1e1d9b2c..22105392 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -1,9 +1,8 @@
 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, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { HomeTabs } from '@/components/HomeTabs'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -43,51 +42,24 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-describe('HomeTabs asset indicators', () => {
+describe('HomeTabs token navigation', () => {
   afterEach(() => {
-    // The force-mounted Assets tab owns a polling hook, so unmount it between scenarios.
+    // HomeTabs child panels can own polling hooks, so unmount them between scenarios.
     cleanup()
   })
 
-  it('shows a pending-transfer count on the Assets tab while Activity is selected', async () => {
-    // Scenario: incoming Amulet transfers require action even when the user is
-    // looking at Activity. The Assets panel should stay mounted while hidden so
-    // its polling result can drive a compact tab indicator.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'transfer-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'sender-party',
-              amount: '42',
-              instrumentId: { id: 'Amulet' },
-            },
-          },
-        },
-      ],
-      acceptTransfer: async () => ({ updateId: 'update-1' }),
-    }
-
+  it('renders Activity and Tokens tabs without the former Assets tab', () => {
+    // Scenario: token balances and incoming token actions now live under Tokens.
+    // The top-level wallet navigation should expose only Activity and Tokens.
     render(
       <VaultContext.Provider value={baseVault()}>
-        <HomeTabs
-          transactions={[]}
-          assetsApi={api}
-        />
+        <HomeTabs transactions={[]} />
       </VaultContext.Provider>,
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
-    await waitFor(() => assert.ok(screen.getByRole('tab', { name: 'Assets 1' })))
-    const incomingHeading = await screen.findByText('Incoming transfers')
-    const inactivePanel = incomingHeading.closest('[data-state="inactive"]')
-    assert.ok(inactivePanel, 'incoming transfer content should stay mounted in an inactive tab')
-    assert.match(
-      inactivePanel.getAttribute('class') ?? '',
-      /data-\[state=inactive\]:hidden/,
-      'inactive tab content must not be visible in Activity',
-    )
+    assert.ok(screen.getByRole('tab', { name: 'Tokens' }))
+    assert.equal(screen.queryByRole('tab', { name: /Assets/ }), null)
   })
 
   it('opens the Tokens tab with the current party holdings', async () => {

From a64a4540260733976ddcfab4d4e026a78728afe9 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:47:29 -0300
Subject: [PATCH 17/98] feat(carpincho): show incoming transfers in tokens

---
 ...Panel.tsx => IncomingTransfersSection.tsx} | 17 ++++-
 .../src/components/TokensPanel.tsx            | 11 ++-
 ....tsx => IncomingTransfersSection.test.tsx} | 13 ++--
 .../test/components/TokensPanel.test.tsx      | 76 ++++++++++++++++++-
 .../hooks/usePendingCip56Transfers.test.tsx   |  2 +-
 5 files changed, 105 insertions(+), 14 deletions(-)
 rename carpincho-wallet/src/components/{AssetsPanel.tsx => IncomingTransfersSection.tsx} (94%)
 rename carpincho-wallet/test/components/{AssetsPanel.test.tsx => IncomingTransfersSection.test.tsx} (92%)

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/IncomingTransfersSection.tsx
similarity index 94%
rename from carpincho-wallet/src/components/AssetsPanel.tsx
rename to carpincho-wallet/src/components/IncomingTransfersSection.tsx
index 930b8210..f0d26276 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/IncomingTransfersSection.tsx
@@ -13,9 +13,10 @@ import { shortMiddle } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
-export interface AssetsPanelProps {
+export interface IncomingTransfersSectionProps {
   account?: AccountPublic
   api?: Cip56TransferApi
+  hideWhenEmpty?: boolean
   onPendingCountChange?: (count: number) => void
 }
 
@@ -33,11 +34,12 @@ const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Elemen
 )
 
 // Renders incoming CIP-56 transfer instructions that require receiver acceptance.
-export const AssetsPanel = ({
+export const IncomingTransfersSection = ({
   account,
   api,
+  hideWhenEmpty = false,
   onPendingCountChange,
-}: AssetsPanelProps): JSX.Element => {
+}: IncomingTransfersSectionProps): JSX.Element | null => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
@@ -48,7 +50,7 @@ export const AssetsPanel = ({
     recordTransaction: vault.recordTransaction,
   })
 
-  // Exposes the hidden Assets polling result to the tab badge while the wallet is open.
+  // Exposes the pending count to any parent that wants to surface action badges.
   useEffect(() => {
     onPendingCountChange?.(transfers.length)
   }, [onPendingCountChange, transfers.length])
@@ -78,6 +80,9 @@ export const AssetsPanel = ({
   }
 
   if (activeAccount === undefined) {
+    if (hideWhenEmpty) {
+      return null
+    }
     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>
@@ -85,6 +90,10 @@ export const AssetsPanel = ({
     )
   }
 
+  if (hideWhenEmpty && transfers.length === 0) {
+    return null
+  }
+
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
       <div className="flex items-center justify-between gap-3 px-1">
diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index 9a72ca60..23964f1b 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { transferTimeLabel } from '@/cip56/transfers'
+import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
 import { SecondaryButton } from '@/components/ui/Button'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -9,6 +11,7 @@ import { useVault } from '@/vault/useVault'
 export interface TokensPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
+  transfersApi?: Cip56TransferApi
 }
 
 interface HoldingDetailRowProps {
@@ -25,7 +28,7 @@ const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element
 )
 
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
-export const TokensPanel = ({ account, api }: TokensPanelProps): JSX.Element => {
+export const TokensPanel = ({ account, api, transfersApi }: TokensPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
@@ -46,6 +49,12 @@ export const TokensPanel = ({ account, api }: TokensPanelProps): JSX.Element =>
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <IncomingTransfersSection
+        account={activeAccount}
+        api={transfersApi}
+        hideWhenEmpty
+      />
+
       <div className="flex items-center justify-between gap-3 px-1">
         <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Token holdings</h2>
         {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
similarity index 92%
rename from carpincho-wallet/test/components/AssetsPanel.test.tsx
rename to carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
index 49f38636..f5e3ca4d 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
@@ -2,7 +2,7 @@ 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 { AssetsPanel } from '@/components/AssetsPanel'
+import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -41,15 +41,16 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-const renderAssets = (api: Cip56TransferApi): void => {
+// Mounts incoming transfers under vault context so accept can use wallet signing hooks.
+const renderIncomingTransfers = (api: Cip56TransferApi): void => {
   render(
     <VaultContext.Provider value={baseVault()}>
-      <AssetsPanel api={api} />
+      <IncomingTransfersSection api={api} />
     </VaultContext.Provider>,
   )
 }
 
-describe('AssetsPanel', () => {
+describe('IncomingTransfersSection', () => {
   afterEach(() => {
     // Each render owns a hook polling loop; cleanup unmounts it before the next scenario.
     cleanup()
@@ -85,7 +86,7 @@ describe('AssetsPanel', () => {
       },
     }
 
-    renderAssets(api)
+    renderIncomingTransfers(api)
 
     await screen.findByText('Incoming transfers')
     await screen.findByText('42 Amulet')
@@ -126,7 +127,7 @@ describe('AssetsPanel', () => {
       acceptTransfer: async () => ({ updateId: 'update-1' }),
     }
 
-    renderAssets(api)
+    renderIncomingTransfers(api)
 
     await screen.findByText('666.0000000000 Amulet')
     assert.equal(screen.getByText('invoice 42').textContent, 'invoice 42')
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index f18ef9ce..f53f63c4 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.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 { TokensPanel } from '@/components/TokensPanel'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -43,10 +44,13 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts the panel under vault context so it can resolve the active account.
-const renderTokens = (api: Cip56HoldingsApi): void => {
+const renderTokens = (api: Cip56HoldingsApi, transfersApi?: Cip56TransferApi): void => {
   render(
     <VaultContext.Provider value={baseVault()}>
-      <TokensPanel api={api} />
+      <TokensPanel
+        api={api}
+        transfersApi={transfersApi}
+      />
     </VaultContext.Provider>,
   )
 }
@@ -100,4 +104,72 @@ describe('TokensPanel', () => {
     assert.equal(screen.getByText('holding-cid-2').textContent, 'holding-cid-2')
     assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
   })
+
+  it('shows incoming transfers only when the active party has pending receipts', async () => {
+    // Scenario: Tokens combines balances with token actions. Incoming transfers
+    // should appear above holdings when pending, and disappear when the API has none.
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldings: async () => [
+        {
+          contractId: 'holding-cid-1',
+          interfaceViewValue: {
+            owner: 'alice::party',
+            amount: '7.0000000000',
+            instrumentId: { admin: 'dso::party', id: 'Amulet' },
+            lock: null,
+          },
+        },
+      ],
+    }
+    const transfersApi: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'transfer-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party-1234567890abcdef',
+              receiver: 'alice::party',
+              amount: '42',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderTokens(holdingsApi, transfersApi)
+
+    await screen.findByText('Incoming transfers')
+    await screen.findByText('42 Amulet')
+    await screen.findByText('7 Amulet')
+  })
+
+  it('hides the incoming transfer section when there are no pending receipts', async () => {
+    // Scenario: an empty incoming-transfer list should not take vertical space
+    // in Tokens; holdings remain the only visible token section.
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldings: async () => [
+        {
+          contractId: 'holding-cid-1',
+          interfaceViewValue: {
+            owner: 'alice::party',
+            amount: '7.0000000000',
+            instrumentId: { admin: 'dso::party', id: 'Amulet' },
+            lock: null,
+          },
+        },
+      ],
+    }
+    const transfersApi: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    renderTokens(holdingsApi, transfersApi)
+
+    await screen.findByText('7 Amulet')
+    assert.equal(screen.queryByText('Incoming transfers'), null)
+    assert.equal(screen.queryByText('No pending transfers'), null)
+  })
 })
diff --git a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
index 61367d15..e79213a5 100644
--- a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
+++ b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
@@ -56,7 +56,7 @@ describe('usePendingCip56Transfers', () => {
   })
 
   it('loads pending transfers immediately and refreshes after accept', async () => {
-    // Scenario: opening the Assets tab should show the current pending transfer
+    // Scenario: opening the token actions view should show the current pending transfer
     // list, then accepting one should ask the API to accept and refresh the list.
     const calls: string[] = []
     const api: Cip56TransferApi = {

From 0650a2229cc422c4561babc4cf1473f081706b1e Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 18:48:43 -0300
Subject: [PATCH 18/98] style(carpincho): separate holding utxo details

---
 carpincho-wallet/src/components/TokensPanel.tsx     |  6 +-----
 .../test/components/TokensPanel.test.tsx            | 13 +++++++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index 23964f1b..bd155339 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -117,16 +117,12 @@ export const TokensPanel = ({ account, api, transfersApi }: TokensPanelProps): J
                       return (
                         <dl
                           key={holding.contractId}
-                          className="grid gap-3 border-b border-border pb-3 last:border-b-0 last:pb-0"
+                          className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3"
                         >
                           <HoldingDetailRow
                             label="amount"
                             value={view?.amount ?? 'unknown'}
                           />
-                          <HoldingDetailRow
-                            label="owner"
-                            value={view?.owner ?? 'unknown'}
-                          />
                           <HoldingDetailRow
                             label="lock"
                             value={lock == null ? 'unlocked' : 'locked'}
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index f53f63c4..5c84e428 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.test.tsx
@@ -100,8 +100,21 @@ describe('TokensPanel', () => {
 
     await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
 
+    const firstHoldingCard = screen.getByText('holding-cid-1').closest('dl')
+    assert.ok(firstHoldingCard, 'holding details should be grouped in one UTXO card')
+    assert.match(
+      firstHoldingCard.getAttribute('class') ?? '',
+      /rounded-md/,
+      'each holding UTXO should read as a distinct item',
+    )
+    assert.match(
+      firstHoldingCard.getAttribute('class') ?? '',
+      /bg-surface/,
+      'each holding UTXO should be visually separated from the detail container',
+    )
     assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
     assert.equal(screen.getByText('holding-cid-2').textContent, 'holding-cid-2')
+    assert.equal(screen.queryByText('owner'), null)
     assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
   })
 

From 5c201eec18ca016a9c3a2430a20e98a0287a09e1 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Tue, 9 Jun 2026 19:01:06 -0300
Subject: [PATCH 19/98] fix(carpincho): badge tokens tab for incoming transfers

---
 carpincho-wallet/src/components/HomeTabs.tsx  | 63 ++++++++++++-------
 .../src/components/TokensPanel.tsx            |  9 ++-
 .../test/components/HomeTabs.test.tsx         | 39 ++++++++++++
 3 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index b394e3a4..ca9c3ddb 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,38 +1,57 @@
+import { useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { TokensPanel } from '@/components/TokensPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { TransactionRecord } from '@/vault/types'
 
 interface HomeTabsProps {
   transactions: TransactionRecord[]
   tokensApi?: Cip56HoldingsApi
+  transfersApi?: Cip56TransferApi
 }
 
 // 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; token-related balances and actions share the Tokens view.
-export const HomeTabs = ({ transactions, tokensApi }: HomeTabsProps): JSX.Element => (
-  <Tabs
-    defaultValue="activity"
-    className="flex min-h-0 flex-1 flex-col"
-  >
-    <TabsList>
-      <TabTrigger value="activity">Activity</TabTrigger>
-      <TabTrigger value="tokens">Tokens</TabTrigger>
-    </TabsList>
-    <TabContent
-      value="activity"
-      className={TAB_CONTENT_CLASS}
-    >
-      <ActivityList transactions={transactions} />
-    </TabContent>
-    <TabContent
-      value="tokens"
-      className={TAB_CONTENT_CLASS}
+export const HomeTabs = ({ transactions, tokensApi, transfersApi }: HomeTabsProps): JSX.Element => {
+  const [pendingTransferCount, setPendingTransferCount] = useState(0)
+
+  return (
+    <Tabs
+      defaultValue="activity"
+      className="flex min-h-0 flex-1 flex-col"
     >
-      <TokensPanel api={tokensApi} />
-    </TabContent>
-  </Tabs>
-)
+      <TabsList>
+        <TabTrigger value="activity">Activity</TabTrigger>
+        <TabTrigger value="tokens">
+          <span>Tokens</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">
+              {pendingTransferCount}
+            </span>
+          ) : null}
+        </TabTrigger>
+      </TabsList>
+      <TabContent
+        value="activity"
+        className={TAB_CONTENT_CLASS}
+      >
+        <ActivityList transactions={transactions} />
+      </TabContent>
+      <TabContent
+        forceMount
+        value="tokens"
+        className={TAB_CONTENT_CLASS}
+      >
+        <TokensPanel
+          api={tokensApi}
+          transfersApi={transfersApi}
+          onPendingTransferCountChange={setPendingTransferCount}
+        />
+      </TabContent>
+    </Tabs>
+  )
+}
diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index bd155339..5b7bce25 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -12,6 +12,7 @@ export interface TokensPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
   transfersApi?: Cip56TransferApi
+  onPendingTransferCountChange?: (count: number) => void
 }
 
 interface HoldingDetailRowProps {
@@ -28,7 +29,12 @@ const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element
 )
 
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
-export const TokensPanel = ({ account, api, transfersApi }: TokensPanelProps): JSX.Element => {
+export const TokensPanel = ({
+  account,
+  api,
+  transfersApi,
+  onPendingTransferCountChange,
+}: TokensPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
@@ -53,6 +59,7 @@ export const TokensPanel = ({ account, api, transfersApi }: TokensPanelProps): J
         account={activeAccount}
         api={transfersApi}
         hideWhenEmpty
+        onPendingCountChange={onPendingTransferCountChange}
       />
 
       <div className="flex items-center justify-between gap-3 px-1">
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 22105392..e3f013be 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.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 { HomeTabs } from '@/components/HomeTabs'
+import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -94,4 +95,42 @@ describe('HomeTabs token navigation', () => {
     await screen.findByText('Token holdings')
     await screen.findByText('7 Amulet')
   })
+
+  it('badges the Tokens tab when hidden incoming transfers require action', async () => {
+    // Scenario: incoming transfer polling moved from the deleted Assets tab to
+    // Tokens. The Tokens panel must stay mounted while Activity is selected so
+    // pending receiver-acceptance work can still badge the tab.
+    const transfersApi: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [
+        {
+          contractId: 'transfer-cid-1',
+          interfaceViewValue: {
+            transfer: {
+              sender: 'sender-party',
+              receiver: 'alice::party',
+              amount: '42',
+              instrumentId: { id: 'Amulet' },
+            },
+          },
+        },
+      ],
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldings: async () => [],
+    }
+
+    render(
+      <VaultContext.Provider value={baseVault()}>
+        <HomeTabs
+          transactions={[]}
+          tokensApi={holdingsApi}
+          transfersApi={transfersApi}
+        />
+      </VaultContext.Provider>,
+    )
+
+    assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
+    await screen.findByRole('tab', { name: 'Tokens 1' })
+  })
 })

From 0a12fa0eb8a8e970194a4d38003d358250c65bfe Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:10:09 -0300
Subject: [PATCH 20/98] feat(wallet-service): expose cip56 transfer creation

---
 canton-barebones/wallet-service/src/mock.ts   |  3 ++
 canton-barebones/wallet-service/src/rpc.ts    | 46 ++++++++++++++++
 .../wallet-service/test/rpc.test.ts           | 53 +++++++++++++++++++
 3 files changed, 102 insertions(+)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index e248a740..f0e7ea3a 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -153,6 +153,8 @@ export const createMockRpc = (
           return rpcResult(id, [])
         case 'cip56.listHoldings':
           return rpcResult(id, [])
+        case 'cip56.createTransfer':
+          return rpcResult(id, { commands: [], disclosedContracts: [] })
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -204,6 +206,7 @@ export const createMockRpc = (
       'executePrepared',
       'cip56.listPendingTransfers',
       'cip56.listHoldings',
+      'cip56.createTransfer',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     network: mockNetworkId(config),
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 86e92f7f..7b5cc80b 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -99,6 +99,15 @@ type Cip56TokenSdk = {
         transferInstructionCid: string
         registryUrl: URL
       }) => Promise<[unknown, unknown[]]>
+      create: (params: {
+        sender: string
+        recipient: string
+        amount: string
+        instrumentId: string
+        registryUrl: URL
+        memo?: string
+        expirationDate?: Date
+      }) => Promise<[unknown, unknown[]]>
     }
     utxos: {
       list: (params: {
@@ -220,6 +229,22 @@ const requiredStringParam = (params: Record<string, unknown>, name: string): str
   return value
 }
 
+// Converts an optional ISO timestamp into the Date shape expected by wallet-sdk transfer helpers.
+const optionalDateParam = (params: Record<string, unknown>, name: string): Date | undefined => {
+  const value = params[name]
+  if (value === undefined) {
+    return undefined
+  }
+  if (typeof value !== 'string' || value.trim() === '') {
+    throw new InvalidParams(`${name} must be an ISO timestamp`)
+  }
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    throw new InvalidParams(`${name} must be an ISO timestamp`)
+  }
+  return date
+}
+
 export type Rpc = {
   handle: (request: JsonRpcRequest) => Promise<JsonRpcResponse | undefined>
   serviceInfo: () => Record<string, unknown>
@@ -443,6 +468,24 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     return { commands, disclosedContracts }
   }
 
+  const cip56CreateTransfer = async (
+    params: unknown,
+  ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
+    const p = objectParam<Record<string, unknown>>(params, 'cip56.createTransfer')
+    const expirationDate = optionalDateParam(p, 'expirationDate')
+    const sdk = await getTokenSdk()
+    const [commands, disclosedContracts] = await sdk.token.transfer.create({
+      sender: requiredStringParam(p, 'sender'),
+      recipient: requiredStringParam(p, 'recipient'),
+      amount: requiredStringParam(p, 'amount'),
+      instrumentId: requiredStringParam(p, 'instrumentId'),
+      registryUrl: new URL(config.splice.registryApiUrl),
+      ...(typeof p.memo === 'string' && p.memo.trim() !== '' ? { memo: p.memo.trim() } : {}),
+      ...(expirationDate === undefined ? {} : { expirationDate }),
+    })
+    return { commands, disclosedContracts }
+  }
+
   const dispatch = async (id: JsonRpcId, request: JsonRpcRequest): Promise<JsonRpcResponse> => {
     if (request.jsonrpc !== undefined && request.jsonrpc !== '2.0') {
       return rpcError(id, -32600, 'Invalid request', { reason: 'jsonrpc must be "2.0"' })
@@ -479,6 +522,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await cip56ListHoldings(request.params))
         case 'cip56.acceptTransfer':
           return rpcResult(id, await cip56AcceptTransfer(request.params))
+        case 'cip56.createTransfer':
+          return rpcResult(id, await cip56CreateTransfer(request.params))
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -525,6 +570,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'cip56.listPendingTransfers',
       'cip56.listHoldings',
       'cip56.acceptTransfer',
+      'cip56.createTransfer',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     adminEndpoints: ['POST /admin/party/prepare', 'POST /admin/party/complete'],
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 0297390c..9a69ce07 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -280,6 +280,59 @@ describe('CIP-56 token helpers', () => {
     assert.equal(seen.registryUrl, 'http://localhost:2000/api/validator/v0/scan-proxy')
   })
 
+  it('prepares a token transfer command through the SDK token namespace', async () => {
+    // Scenario: sending CIP-56 tokens requires wallet-service to ask the
+    // Node-only SDK for transfer commands, while Carpincho remains responsible
+    // for signing the prepared transaction hash with the sender's local key.
+    const disclosedContracts = [{ contractId: 'transfer-context-cid', createdEventBlob: 'blob' }]
+    const expirationDate = '2026-06-10T15:00:00.000Z'
+    const seen: { params?: Record<string, unknown> } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        token: {
+          transfer: {
+            create: async (params: Record<string, unknown>) => {
+              seen.params = params
+              return [
+                { ExerciseCommand: { choice: 'TransferFactory_Transfer' } },
+                disclosedContracts,
+              ]
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.createTransfer',
+      params: {
+        sender: 'sender::party',
+        recipient: 'receiver::party',
+        amount: '7.5',
+        instrumentId: 'Amulet',
+        memo: 'lunch',
+        expirationDate,
+      },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      commands: { ExerciseCommand: { choice: 'TransferFactory_Transfer' } },
+      disclosedContracts,
+    })
+    assert.deepEqual(seen.params, {
+      sender: 'sender::party',
+      recipient: 'receiver::party',
+      amount: '7.5',
+      instrumentId: 'Amulet',
+      registryUrl: new URL('http://localhost:2000/api/validator/v0/scan-proxy'),
+      memo: 'lunch',
+      expirationDate: new Date(expirationDate),
+    })
+  })
+
   it('lists token holding UTXOs through the SDK token namespace without reshaping contracts', async () => {
     // Scenario: Carpincho needs the active CIP-56 holdings for a party, but the
     // Node-only wallet SDK must stay behind wallet-service. The RPC returns the

From 2233a9db0244b45e84b10c7aecf41b019146d417 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:12:26 -0300
Subject: [PATCH 21/98] feat(carpincho): add cip56 transfer logic

---
 carpincho-wallet/src/cip56/transfers.ts       | 49 ++++++++++
 carpincho-wallet/test/cip56/transfers.test.ts | 92 ++++++++++++++++++-
 2 files changed, 140 insertions(+), 1 deletion(-)

diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index b6236d73..dec09b7d 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -38,6 +38,11 @@ interface AcceptTransferCommands {
   disclosedContracts?: unknown[]
 }
 
+interface CreateTransferCommands {
+  commands: unknown
+  disclosedContracts?: unknown[]
+}
+
 interface AcceptTransferParams {
   account: AccountPublic
   transferInstructionCid: string
@@ -45,6 +50,17 @@ interface AcceptTransferParams {
   recordTransaction: VaultContextValue['recordTransaction']
 }
 
+export interface CreateTokenTransferParams {
+  account: AccountPublic
+  recipient: string
+  amount: string
+  instrumentId: TokenInstrumentId
+  memo?: string
+  expirationDate: string
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction: VaultContextValue['recordTransaction']
+}
+
 const TRANSFER_REASON_KEY = 'splice.lfdecentralizedtrust.org/reason'
 
 // Keeps token labels readable while preserving the SDK contract payload shape elsewhere.
@@ -109,3 +125,36 @@ export const acceptPendingTransfer = async ({
     recordTransaction,
   })
 }
+
+// Creates a transfer instruction while keeping the final transaction signature inside Carpincho.
+export const createTokenTransfer = async ({
+  account,
+  recipient,
+  amount,
+  instrumentId,
+  memo,
+  expirationDate,
+  signMessage,
+  recordTransaction,
+}: CreateTokenTransferParams): Promise<{ updateId?: string; completionOffset?: number }> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<CreateTransferCommands>(
+    'cip56.createTransfer',
+    {
+      sender: account.partyId,
+      recipient,
+      amount,
+      instrumentId: instrumentId.id,
+      ...(memo === undefined || memo.trim() === '' ? {} : { memo: memo.trim() }),
+      expirationDate,
+    },
+  )
+  return await executePreparedCommands({
+    account,
+    commands,
+    disclosedContracts,
+    method: 'cip56.transfer.create',
+    summary: `Send ${amount} ${tokenDisplayLabel(instrumentId)}`,
+    signMessage,
+    recordTransaction,
+  })
+}
diff --git a/carpincho-wallet/test/cip56/transfers.test.ts b/carpincho-wallet/test/cip56/transfers.test.ts
index 7a1d2198..7fa1300c 100644
--- a/carpincho-wallet/test/cip56/transfers.test.ts
+++ b/carpincho-wallet/test/cip56/transfers.test.ts
@@ -1,6 +1,10 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { acceptPendingTransfer, listPendingIncomingTransfers } from '@/cip56/transfers'
+import {
+  acceptPendingTransfer,
+  createTokenTransfer,
+  listPendingIncomingTransfers,
+} from '@/cip56/transfers'
 import type { AccountPublic } from '@/vault/types'
 
 const originalFetch = globalThis.fetch
@@ -130,4 +134,90 @@ describe('CIP-56 wallet-service transfer helpers', () => {
     })
     assert.equal((recorded[0] as { method?: string } | undefined)?.method, 'cip56.transfer.accept')
   })
+
+  it('creates a token transfer by preparing SDK commands and signing only the prepared hash', async () => {
+    // Scenario: sending a CIP-56 token should keep the wallet-service SDK boundary
+    // thin. Carpincho sends transfer intent data, receives commands, signs the
+    // prepared transaction hash locally, and submits that signature.
+    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 === 'cip56.createTransfer') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { ExerciseCommand: { choice: 'TransferFactory_Transfer' } },
+              disclosedContracts: [
+                { contractId: 'transfer-context-cid', createdEventBlob: 'blob' },
+              ],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-transfer-tx',
+              preparedTransactionHash: 'prepared-transfer-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-transfer-1' } }), {
+          status: 200,
+        })
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+    const expirationDate = '2026-06-10T15:00:00.000Z'
+    const recorded: unknown[] = []
+
+    const result = await createTokenTransfer({
+      account: ACCOUNT,
+      recipient: 'receiver::party',
+      amount: '7.5',
+      instrumentId: { admin: 'admin::party', id: 'Amulet' },
+      memo: 'lunch',
+      expirationDate,
+      signMessage: async (accountId, messageBase64) => {
+        assert.equal(accountId, 'account-1')
+        assert.equal(messageBase64, 'prepared-transfer-hash')
+        return 'signature-base64'
+      },
+      recordTransaction: async (tx) => {
+        recorded.push(tx)
+        return { ...tx, id: 'tx-transfer-1', createdAt: 3 }
+      },
+    })
+
+    assert.deepEqual(result, { updateId: 'update-transfer-1' })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['cip56.createTransfer', 'prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, {
+      sender: 'alice::party',
+      recipient: 'receiver::party',
+      amount: '7.5',
+      instrumentId: 'Amulet',
+      memo: 'lunch',
+      expirationDate,
+    })
+    assert.deepEqual(calls[1]?.params, {
+      partyId: 'alice::party',
+      actAs: ['alice::party'],
+      commands: { ExerciseCommand: { choice: 'TransferFactory_Transfer' } },
+      disclosedContracts: [{ contractId: 'transfer-context-cid', createdEventBlob: 'blob' }],
+    })
+    assert.equal((recorded[0] as { method?: string } | undefined)?.method, 'cip56.transfer.create')
+  })
 })

From 249472710bf5e4ea0c48835d5cb6119811d96ee8 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:16:44 -0300
Subject: [PATCH 22/98] feat(carpincho): add send token tab

---
 carpincho-wallet/src/components/HomeTabs.tsx  |  19 +-
 .../src/components/SendTokensPanel.tsx        | 282 ++++++++++++++++++
 .../test/components/HomeTabs.test.tsx         |   5 +-
 .../test/components/SendTokensPanel.test.tsx  | 125 ++++++++
 4 files changed, 428 insertions(+), 3 deletions(-)
 create mode 100644 carpincho-wallet/src/components/SendTokensPanel.tsx
 create mode 100644 carpincho-wallet/test/components/SendTokensPanel.test.tsx

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index ca9c3ddb..85ea77eb 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
+import { type Cip56SendApi, SendTokensPanel } from '@/components/SendTokensPanel'
 import { TokensPanel } from '@/components/TokensPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
@@ -10,13 +11,19 @@ interface HomeTabsProps {
   transactions: TransactionRecord[]
   tokensApi?: Cip56HoldingsApi
   transfersApi?: Cip56TransferApi
+  sendApi?: Cip56SendApi
 }
 
 // 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; token-related balances and actions share the Tokens view.
-export const HomeTabs = ({ transactions, tokensApi, transfersApi }: HomeTabsProps): JSX.Element => {
+export const HomeTabs = ({
+  transactions,
+  tokensApi,
+  transfersApi,
+  sendApi,
+}: HomeTabsProps): JSX.Element => {
   const [pendingTransferCount, setPendingTransferCount] = useState(0)
 
   return (
@@ -34,6 +41,7 @@ export const HomeTabs = ({ transactions, tokensApi, transfersApi }: HomeTabsProp
             </span>
           ) : null}
         </TabTrigger>
+        <TabTrigger value="send">Send</TabTrigger>
       </TabsList>
       <TabContent
         value="activity"
@@ -52,6 +60,15 @@ export const HomeTabs = ({ transactions, tokensApi, transfersApi }: HomeTabsProp
           onPendingTransferCountChange={setPendingTransferCount}
         />
       </TabContent>
+      <TabContent
+        value="send"
+        className={TAB_CONTENT_CLASS}
+      >
+        <SendTokensPanel
+          holdingsApi={tokensApi}
+          sendApi={sendApi}
+        />
+      </TabContent>
     </Tabs>
   )
 }
diff --git a/carpincho-wallet/src/components/SendTokensPanel.tsx b/carpincho-wallet/src/components/SendTokensPanel.tsx
new file mode 100644
index 00000000..8c5353d5
--- /dev/null
+++ b/carpincho-wallet/src/components/SendTokensPanel.tsx
@@ -0,0 +1,282 @@
+import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import { type CreateTokenTransferParams, createTokenTransfer } from '@/cip56/transfers'
+import { PrimaryButton } from '@/components/ui/Button'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { useTokenHoldings } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export type TransferDeadline = '1h' | '1d' | '1w' | '1m' | '1y'
+
+export interface Cip56SendApi {
+  createTokenTransfer: (
+    params: CreateTokenTransferParams,
+  ) => Promise<{ updateId?: string; completionOffset?: number }>
+}
+
+export interface SendTokensPanelProps {
+  account?: AccountPublic
+  holdingsApi?: Cip56HoldingsApi
+  sendApi?: Cip56SendApi
+}
+
+const defaultSendApi: Cip56SendApi = {
+  createTokenTransfer,
+}
+
+const DEADLINE_OPTIONS: Array<{ value: TransferDeadline; label: string }> = [
+  { value: '1h', label: '1 hour' },
+  { value: '1d', label: '1 day' },
+  { value: '1w', label: '1 week' },
+  { value: '1m', label: '1 month' },
+  { value: '1y', label: '1 year' },
+]
+
+// Converts compact UI presets into absolute expiration timestamps for CIP-56 transfers.
+export const transferDeadlineExpiration = (deadline: TransferDeadline, now = new Date()): Date => {
+  const next = new Date(now.getTime())
+  if (deadline === '1h') {
+    next.setUTCHours(next.getUTCHours() + 1)
+    return next
+  }
+  if (deadline === '1d') {
+    next.setUTCDate(next.getUTCDate() + 1)
+    return next
+  }
+  if (deadline === '1w') {
+    next.setUTCDate(next.getUTCDate() + 7)
+    return next
+  }
+  if (deadline === '1m') {
+    next.setUTCMonth(next.getUTCMonth() + 1)
+    return next
+  }
+  next.setUTCFullYear(next.getUTCFullYear() + 1)
+  return next
+}
+
+// Renders the outgoing CIP-56 transfer form for the active Carpincho party.
+export const SendTokensPanel = ({
+  account,
+  holdingsApi,
+  sendApi = defaultSendApi,
+}: SendTokensPanelProps): JSX.Element => {
+  const vault = useVault()
+  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
+  const { summaries, loading, error, refresh } = useTokenHoldings(activeAccount, {
+    api: holdingsApi,
+  })
+  const [selectedTokenKey, setSelectedTokenKey] = useState('')
+  const [recipient, setRecipient] = useState('')
+  const [amount, setAmount] = useState('')
+  const [memo, setMemo] = useState('')
+  const [deadline, setDeadline] = useState<TransferDeadline>('1h')
+  const [submitting, setSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | undefined>(undefined)
+  const [submitStatus, setSubmitStatus] = useState<string | undefined>(undefined)
+
+  const selectedSummary = useMemo(
+    () => summaries.find((summary) => summary.key === selectedTokenKey) ?? summaries[0],
+    [selectedTokenKey, summaries],
+  )
+
+  // Keeps the selected token aligned with the latest holdings after polling or sending.
+  useEffect(() => {
+    if (selectedSummary !== undefined && selectedTokenKey !== selectedSummary.key) {
+      setSelectedTokenKey(selectedSummary.key)
+    }
+    if (summaries.length === 0 && selectedTokenKey !== '') {
+      setSelectedTokenKey('')
+    }
+  }, [selectedSummary, selectedTokenKey, summaries.length])
+
+  // Submits the transfer intent while Carpincho remains the signer of the prepared transaction.
+  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault()
+    if (activeAccount === undefined) {
+      setSubmitError('No account selected')
+      return
+    }
+    if (selectedSummary?.instrumentId?.id === undefined) {
+      setSubmitError('Select a token')
+      return
+    }
+    setSubmitting(true)
+    setSubmitError(undefined)
+    setSubmitStatus(undefined)
+    try {
+      await sendApi.createTokenTransfer({
+        account: activeAccount,
+        recipient: recipient.trim(),
+        amount: amount.trim(),
+        instrumentId: selectedSummary.instrumentId,
+        ...(memo.trim() === '' ? {} : { memo: memo.trim() }),
+        expirationDate: transferDeadlineExpiration(deadline).toISOString(),
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setRecipient('')
+      setAmount('')
+      setMemo('')
+      setSubmitStatus('Transfer submitted.')
+      toast.success('Transfer submitted.')
+      await refresh()
+    } catch (err) {
+      const message = (err as Error).message
+      setSubmitError(message)
+      toast.error(`Send failed: ${message}`)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  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>
+    )
+  }
+
+  return (
+    <form
+      className="flex min-h-full flex-col gap-3 px-1 py-2"
+      onSubmit={(event) => {
+        void onSubmit(event)
+      }}
+    >
+      <div className="flex items-center justify-between gap-3 px-1">
+        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Send tokens</h2>
+        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
+      </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}
+        </div>
+      )}
+
+      {submitError === undefined ? null : (
+        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+          {submitError}
+        </div>
+      )}
+
+      {submitStatus === undefined ? null : (
+        <div className="rounded-md border border-primary/30 bg-primary-soft px-3 py-2 text-[0.82rem] text-primary">
+          {submitStatus}
+        </div>
+      )}
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-token"
+      >
+        Token
+        <select
+          aria-label="Token"
+          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
+          disabled={summaries.length === 0}
+          id="send-token"
+          value={selectedSummary?.key ?? ''}
+          onChange={(event) => setSelectedTokenKey(event.target.value)}
+        >
+          {summaries.map((summary) => (
+            <option
+              key={summary.key}
+              value={summary.key}
+            >
+              {summary.tokenLabel} - {summary.totalAmount}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-recipient"
+      >
+        Recipient party
+        <TextInput
+          aria-label="Recipient party"
+          autoComplete="off"
+          id="send-recipient"
+          value={recipient}
+          onChange={(event) => setRecipient(event.target.value)}
+        />
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-amount"
+      >
+        Amount
+        <TextInput
+          aria-label="Amount"
+          id="send-amount"
+          inputMode="decimal"
+          value={amount}
+          onChange={(event) => setAmount(event.target.value)}
+        />
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-deadline"
+      >
+        Deadline
+        <select
+          aria-label="Deadline"
+          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
+          id="send-deadline"
+          value={deadline}
+          onChange={(event) => setDeadline(event.target.value as TransferDeadline)}
+        >
+          {DEADLINE_OPTIONS.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-memo"
+      >
+        Memo
+        <TextInput
+          aria-label="Memo"
+          id="send-memo"
+          value={memo}
+          onChange={(event) => setMemo(event.target.value)}
+        />
+      </label>
+
+      {summaries.length === 0 && !loading ? (
+        <p className="m-0 rounded-md border border-border bg-surface px-3 py-3 text-[0.85rem] text-muted-foreground">
+          No token holdings
+        </p>
+      ) : null}
+
+      <PrimaryButton
+        className="mt-1"
+        disabled={
+          submitting ||
+          summaries.length === 0 ||
+          recipient.trim() === '' ||
+          amount.trim() === '' ||
+          selectedSummary?.instrumentId?.id === undefined
+        }
+        type="submit"
+      >
+        {submitting ? 'Sending...' : 'Send'}
+      </PrimaryButton>
+    </form>
+  )
+}
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index e3f013be..c44c5389 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -49,9 +49,9 @@ describe('HomeTabs token navigation', () => {
     cleanup()
   })
 
-  it('renders Activity and Tokens tabs without the former Assets tab', () => {
+  it('renders Activity, Tokens, and Send tabs without the former Assets tab', () => {
     // Scenario: token balances and incoming token actions now live under Tokens.
-    // The top-level wallet navigation should expose only Activity and Tokens.
+    // The top-level wallet navigation should expose token viewing and token sending separately.
     render(
       <VaultContext.Provider value={baseVault()}>
         <HomeTabs transactions={[]} />
@@ -60,6 +60,7 @@ describe('HomeTabs token navigation', () => {
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
     assert.ok(screen.getByRole('tab', { name: 'Tokens' }))
+    assert.ok(screen.getByRole('tab', { name: 'Send' }))
     assert.equal(screen.queryByRole('tab', { name: /Assets/ }), null)
   })
 
diff --git a/carpincho-wallet/test/components/SendTokensPanel.test.tsx b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
new file mode 100644
index 00000000..a9d51a77
--- /dev/null
+++ b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
@@ -0,0 +1,125 @@
+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 Cip56SendApi,
+  SendTokensPanel,
+  transferDeadlineExpiration,
+} from '@/components/SendTokensPanel'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the active self-custodial party that sends tokens.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+// Builds the minimum unlocked vault context required by the send panel.
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+// Mounts the send panel with injectable APIs so the test observes only UI intent.
+const renderSendTokens = (holdingsApi: Cip56HoldingsApi, sendApi: Cip56SendApi): void => {
+  render(
+    <VaultContext.Provider value={baseVault()}>
+      <SendTokensPanel
+        holdingsApi={holdingsApi}
+        sendApi={sendApi}
+      />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('SendTokensPanel', () => {
+  afterEach(() => {
+    // The send panel polls holdings through a hook; cleanup stops the poller between scenarios.
+    cleanup()
+  })
+
+  it('submits a transfer for the selected token with recipient, amount, memo, and deadline', async () => {
+    // Scenario: Alice has one Amulet holding and wants to create an outgoing
+    // transfer request. The panel should derive the sender from the active
+    // account, default the deadline to 1h, and pass the selected instrument id.
+    const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldings: async () => [
+        {
+          contractId: 'holding-cid-1',
+          interfaceViewValue: {
+            owner: 'alice::party',
+            amount: '12.5000000000',
+            instrumentId: { admin: 'dso::party', id: 'Amulet' },
+            lock: null,
+          },
+        },
+      ],
+    }
+    const sendApi: Cip56SendApi = {
+      createTokenTransfer: async (params) => {
+        sent.push(params)
+        return { updateId: 'update-transfer-1' }
+      },
+    }
+
+    renderSendTokens(holdingsApi, sendApi)
+
+    await screen.findByRole('option', { name: /Amulet/ })
+    await userEvent.type(screen.getByLabelText('Recipient party'), 'receiver::party')
+    await userEvent.type(screen.getByLabelText('Amount'), '7.5')
+    await userEvent.type(screen.getByLabelText('Memo'), 'lunch')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+
+    assert.equal(sent.length, 1)
+    assert.equal(sent[0]?.account.partyId, 'alice::party')
+    assert.equal(sent[0]?.recipient, 'receiver::party')
+    assert.equal(sent[0]?.amount, '7.5')
+    assert.deepEqual(sent[0]?.instrumentId, { admin: 'dso::party', id: 'Amulet' })
+    assert.equal(sent[0]?.memo, 'lunch')
+    assert.equal(typeof sent[0]?.expirationDate, 'string')
+    assert.equal(
+      await screen.findByText('Transfer submitted.'),
+      screen.getByText('Transfer submitted.'),
+    )
+  })
+
+  it('computes calendar deadline expirations from the selected preset', () => {
+    // Scenario: deadline options are user-facing presets, but the transfer
+    // command needs an absolute ISO timestamp. Month/year options must use
+    // calendar arithmetic instead of fixed day counts.
+    const now = new Date('2026-06-10T12:00:00.000Z')
+
+    assert.equal(transferDeadlineExpiration('1h', now).toISOString(), '2026-06-10T13:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1d', now).toISOString(), '2026-06-11T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1w', now).toISOString(), '2026-06-17T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1m', now).toISOString(), '2026-07-10T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1y', now).toISOString(), '2027-06-10T12:00:00.000Z')
+  })
+})

From 4927fc2825f96931e14077b32aa12c00ae05f954 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:32:02 -0300
Subject: [PATCH 23/98] fix(carpincho): scope token tabs to selected account

---
 carpincho-wallet/src/components/HomeTabs.tsx  | 35 ++++++--
 .../src/hooks/usePendingCip56Transfers.ts     | 43 ++++++---
 .../src/hooks/useTokenHoldings.ts             | 43 ++++++---
 carpincho-wallet/src/views/HomeView.tsx       |  5 +-
 .../test/components/HomeTabs.test.tsx         | 48 +++++++++-
 .../hooks/usePendingCip56Transfers.test.tsx   | 54 +++++++++++-
 .../test/hooks/useTokenHoldings.test.tsx      | 88 +++++++++++++++++++
 7 files changed, 287 insertions(+), 29 deletions(-)
 create mode 100644 carpincho-wallet/test/hooks/useTokenHoldings.test.tsx

diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 85ea77eb..ed147227 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { type Cip56SendApi, SendTokensPanel } from '@/components/SendTokensPanel'
 import { TokensPanel } from '@/components/TokensPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
-import type { TransactionRecord } from '@/vault/types'
+import type { AccountPublic, TransactionRecord } from '@/vault/types'
 
 interface HomeTabsProps {
+  account?: AccountPublic
   transactions: TransactionRecord[]
   tokensApi?: Cip56HoldingsApi
   transfersApi?: Cip56TransferApi
@@ -19,12 +20,34 @@ const TAB_CONTENT_CLASS = 'min-h-0 flex-1 overflow-y-auto outline-none'
 
 // Tabbed home body; token-related balances and actions share the Tokens view.
 export const HomeTabs = ({
+  account,
   transactions,
   tokensApi,
   transfersApi,
   sendApi,
 }: HomeTabsProps): JSX.Element => {
-  const [pendingTransferCount, setPendingTransferCount] = useState(0)
+  const activeAccountId = account?.id
+  const [pendingTransferState, setPendingTransferState] = useState<{
+    accountId: string | undefined
+    count: number
+  }>({ accountId: undefined, count: 0 })
+  const pendingTransferCount =
+    pendingTransferState.accountId === activeAccountId ? pendingTransferState.count : 0
+  const onPendingTransferCountChange = useCallback(
+    (count: number) => {
+      setPendingTransferState({ accountId: activeAccountId, count })
+    },
+    [activeAccountId],
+  )
+  const activeTransactions = useMemo(
+    () =>
+      account === undefined
+        ? transactions
+        : transactions.filter(
+            (tx) => tx.accountId === account.id || tx.partyId === account.partyId,
+          ),
+    [account, transactions],
+  )
 
   return (
     <Tabs
@@ -47,7 +70,7 @@ export const HomeTabs = ({
         value="activity"
         className={TAB_CONTENT_CLASS}
       >
-        <ActivityList transactions={transactions} />
+        <ActivityList transactions={activeTransactions} />
       </TabContent>
       <TabContent
         forceMount
@@ -55,9 +78,10 @@ export const HomeTabs = ({
         className={TAB_CONTENT_CLASS}
       >
         <TokensPanel
+          account={account}
           api={tokensApi}
           transfersApi={transfersApi}
-          onPendingTransferCountChange={setPendingTransferCount}
+          onPendingTransferCountChange={onPendingTransferCountChange}
         />
       </TabContent>
       <TabContent
@@ -65,6 +89,7 @@ export const HomeTabs = ({
         className={TAB_CONTENT_CLASS}
       >
         <SendTokensPanel
+          account={account}
           holdingsApi={tokensApi}
           sendApi={sendApi}
         />
diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
index b2b3aebc..c5336e33 100644
--- a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   acceptPendingTransfer,
   listPendingIncomingTransfers,
@@ -32,6 +32,16 @@ export interface PendingCip56TransfersOptions {
   recordTransaction?: VaultContextValue['recordTransaction']
 }
 
+interface PendingCip56TransfersData {
+  accountKey?: string
+  transfers: PendingTokenTransfer[]
+}
+
+interface PendingCip56TransfersError {
+  accountKey?: string
+  message: string
+}
+
 const defaultApi: Cip56TransferApi = {
   listPendingIncomingTransfers,
   acceptTransfer: acceptPendingTransfer,
@@ -46,26 +56,39 @@ export const usePendingCip56Transfers = (
 ): PendingCip56TransfersState => {
   const api = options.api ?? defaultApi
   const pollMs = options.pollMs === undefined ? CIP56_TRANSFER_POLL_MS : options.pollMs
-  const [transfers, setTransfers] = useState<PendingTokenTransfer[]>([])
+  const [data, setData] = useState<PendingCip56TransfersData>({ transfers: [] })
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | undefined>(undefined)
+  const [errorData, setErrorData] = useState<PendingCip56TransfersError | undefined>(undefined)
+  const accountKey = account === undefined ? undefined : `${account.id}:${account.partyId}`
+  const currentAccountKey = useRef(accountKey)
+  currentAccountKey.current = accountKey
+  const transfers = data.accountKey === accountKey ? data.transfers : []
+  const error =
+    errorData !== undefined && errorData.accountKey === accountKey ? errorData.message : undefined
 
   const refresh = useCallback(async (): Promise<void> => {
     if (account === undefined) {
-      setTransfers([])
-      setError(undefined)
+      setData({ transfers: [] })
+      setErrorData(undefined)
       return
     }
     setLoading(true)
     try {
-      setTransfers(await api.listPendingIncomingTransfers(account.partyId))
-      setError(undefined)
+      const nextTransfers = await api.listPendingIncomingTransfers(account.partyId)
+      if (accountKey === currentAccountKey.current) {
+        setData({ accountKey, transfers: nextTransfers })
+        setErrorData(undefined)
+      }
     } catch (err) {
-      setError((err as Error).message)
+      if (accountKey === currentAccountKey.current) {
+        setErrorData({ accountKey, message: (err as Error).message })
+      }
     } finally {
-      setLoading(false)
+      if (accountKey === currentAccountKey.current) {
+        setLoading(false)
+      }
     }
-  }, [account, api])
+  }, [account, accountKey, api])
 
   useEffect(() => {
     let cancelled = false
diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
index 4e668091..07578451 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldings.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
   listTokenHoldings,
   summarizeTokenHoldings,
@@ -19,6 +19,16 @@ export interface TokenHoldingsState {
   refresh: () => Promise<void>
 }
 
+interface TokenHoldingsData {
+  accountKey?: string
+  holdings: TokenHolding[]
+}
+
+interface TokenHoldingsError {
+  accountKey?: string
+  message: string
+}
+
 export interface TokenHoldingsOptions {
   pollMs?: number | null
   api?: Cip56HoldingsApi
@@ -37,27 +47,40 @@ export const useTokenHoldings = (
 ): TokenHoldingsState => {
   const api = options.api ?? defaultApi
   const pollMs = options.pollMs === undefined ? TOKEN_HOLDINGS_POLL_MS : options.pollMs
-  const [holdings, setHoldings] = useState<TokenHolding[]>([])
+  const [data, setData] = useState<TokenHoldingsData>({ holdings: [] })
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState<string | undefined>(undefined)
+  const [errorData, setErrorData] = useState<TokenHoldingsError | undefined>(undefined)
+  const accountKey = account === undefined ? undefined : `${account.id}:${account.partyId}`
+  const currentAccountKey = useRef(accountKey)
+  currentAccountKey.current = accountKey
+  const holdings = data.accountKey === accountKey ? data.holdings : []
+  const error =
+    errorData !== undefined && errorData.accountKey === accountKey ? errorData.message : undefined
 
   // Refreshes holdings for the active party and keeps the previous list on transient errors.
   const refresh = useCallback(async (): Promise<void> => {
     if (account === undefined) {
-      setHoldings([])
-      setError(undefined)
+      setData({ holdings: [] })
+      setErrorData(undefined)
       return
     }
     setLoading(true)
     try {
-      setHoldings(await api.listTokenHoldings(account.partyId))
-      setError(undefined)
+      const nextHoldings = await api.listTokenHoldings(account.partyId)
+      if (accountKey === currentAccountKey.current) {
+        setData({ accountKey, holdings: nextHoldings })
+        setErrorData(undefined)
+      }
     } catch (err) {
-      setError((err as Error).message)
+      if (accountKey === currentAccountKey.current) {
+        setErrorData({ accountKey, message: (err as Error).message })
+      }
     } finally {
-      setLoading(false)
+      if (accountKey === currentAccountKey.current) {
+        setLoading(false)
+      }
     }
-  }, [account, api])
+  }, [account, accountKey, api])
 
   useEffect(() => {
     let cancelled = false
diff --git a/carpincho-wallet/src/views/HomeView.tsx b/carpincho-wallet/src/views/HomeView.tsx
index 535f4170..319577f9 100644
--- a/carpincho-wallet/src/views/HomeView.tsx
+++ b/carpincho-wallet/src/views/HomeView.tsx
@@ -151,7 +151,10 @@ export const HomeView = (): JSX.Element => {
         <AccountCard primary={primary} />
       </div>
 
-      <HomeTabs transactions={v.transactions} />
+      <HomeTabs
+        account={primary}
+        transactions={v.transactions}
+      />
 
       {/* Approval requests are modal: explicit approve/reject only, no dismiss affordance. */}
       <Sheet
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index c44c5389..6e18cb98 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'
 import { HomeTabs } from '@/components/HomeTabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
-import type { AccountPublic } from '@/vault/types'
+import type { AccountPublic, TransactionRecord } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
 const ACCOUNT: AccountPublic = {
@@ -19,6 +19,31 @@ const ACCOUNT: AccountPublic = {
   createdAt: 1,
 }
 
+const SECOND_ACCOUNT: AccountPublic = {
+  // Second account fixture catches stale tab state when the selected party changes.
+  id: 'account-2',
+  name: 'Bob',
+  partyId: 'bob::party',
+  publicKeyBase64: 'public-key-2',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 2,
+}
+
+// Creates an executed transaction tied to one wallet account for Activity filtering.
+const txFor = (account: AccountPublic, 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,
+})
+
 // Builds the minimum unlocked vault context required by HomeTabs child panels.
 const baseVault = (): VaultContextValue =>
   ({
@@ -134,4 +159,25 @@ describe('HomeTabs token navigation', () => {
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
     await screen.findByRole('tab', { name: 'Tokens 1' })
   })
+
+  it('shows Activity only for the selected account', () => {
+    // Scenario: Alice and Bob share one local vault, but Activity belongs to the
+    // selected party. Switching to Bob must hide Alice's transaction history.
+    render(
+      <VaultContext.Provider
+        value={{ ...baseVault(), accounts: [ACCOUNT, SECOND_ACCOUNT], primary: SECOND_ACCOUNT }}
+      >
+        <HomeTabs
+          account={SECOND_ACCOUNT}
+          transactions={[
+            txFor(ACCOUNT, 'tx-alice', 'Alice transfer'),
+            txFor(SECOND_ACCOUNT, 'tx-bob', 'Bob transfer'),
+          ]}
+        />
+      </VaultContext.Provider>,
+    )
+
+    assert.equal(screen.queryByText('Alice transfer'), null)
+    assert.equal(screen.getByText('Bob transfer').textContent, 'Bob transfer')
+  })
 })
diff --git a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
index e79213a5..d4a84cc6 100644
--- a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
+++ b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
@@ -20,8 +20,26 @@ const ACCOUNT: AccountPublic = {
   createdAt: 1,
 }
 
-const Probe = ({ api }: { api: Cip56TransferApi }): JSX.Element => {
-  const state = usePendingCip56Transfers(ACCOUNT, {
+const SECOND_ACCOUNT: AccountPublic = {
+  // Second account fixture catches stale incoming transfers after switching parties.
+  id: 'account-2',
+  name: 'Bob',
+  partyId: 'bob::party',
+  publicKeyBase64: 'public-key-2',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 2,
+}
+
+const Probe = ({
+  account = ACCOUNT,
+  api,
+}: {
+  account?: AccountPublic
+  api: Cip56TransferApi
+}): JSX.Element => {
+  // Probe renders raw transfer ids so the test can observe hook state across account changes.
+  const state = usePendingCip56Transfers(account, {
     api,
     pollMs: null,
     signMessage: async () => 'signature',
@@ -82,4 +100,36 @@ describe('usePendingCip56Transfers', () => {
 
     assert.deepEqual(calls, ['list', 'accept', 'list'])
   })
+
+  it('clears previous party transfers while the newly selected party loads', async () => {
+    // Scenario: Alice has an incoming transfer, then the user selects Bob. Bob's
+    // wallet-service call can still be in flight, but Alice's request must not remain visible.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async (partyId) => {
+        if (partyId === ACCOUNT.partyId) {
+          return [{ contractId: 'alice-transfer-cid' }]
+        }
+        return new Promise(() => undefined)
+      },
+      acceptTransfer: async () => ({ updateId: 'update-1' }),
+    }
+
+    const { rerender } = render(
+      <Probe
+        account={ACCOUNT}
+        api={api}
+      />,
+    )
+
+    await screen.findByText('alice-transfer-cid')
+
+    rerender(
+      <Probe
+        account={SECOND_ACCOUNT}
+        api={api}
+      />,
+    )
+
+    await waitFor(() => assert.equal(screen.getByRole('status').textContent, ''))
+  })
 })
diff --git a/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
new file mode 100644
index 00000000..2598e108
--- /dev/null
+++ b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
@@ -0,0 +1,88 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { useTokenHoldings } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+
+const ALICE: AccountPublic = {
+  // Alice owns the initial holding shown before the user switches parties.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const BOB: AccountPublic = {
+  // Bob is selected after Alice, so stale Alice holdings must disappear immediately.
+  id: 'account-2',
+  name: 'Bob',
+  partyId: 'bob::party',
+  publicKeyBase64: 'public-key-2',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 2,
+}
+
+const Probe = ({
+  account,
+  api,
+}: {
+  account: AccountPublic
+  api: Cip56HoldingsApi
+}): JSX.Element => {
+  // Probe renders raw contract ids so the test can observe hook state across account changes.
+  const state = useTokenHoldings(account, { api, pollMs: null })
+  return <output>{state.holdings.map((holding) => holding.contractId).join(',')}</output>
+}
+
+describe('useTokenHoldings', () => {
+  afterEach(() => {
+    // Cleanup unmounts the polling hook and cancels pending timers between scenarios.
+    cleanup()
+  })
+
+  it('clears previous party holdings while the newly selected party loads', async () => {
+    // Scenario: Alice holdings loaded, then the user selects Bob. Bob's wallet-service
+    // call can still be in flight, but Alice's holding must no longer appear under Bob.
+    const api: Cip56HoldingsApi = {
+      listTokenHoldings: async (partyId) => {
+        if (partyId === ALICE.partyId) {
+          return [
+            {
+              contractId: 'alice-holding-cid',
+              interfaceViewValue: {
+                owner: ALICE.partyId,
+                amount: '7',
+                instrumentId: { id: 'Amulet' },
+                lock: null,
+              },
+            },
+          ]
+        }
+        return new Promise(() => undefined)
+      },
+    }
+
+    const { rerender } = render(
+      <Probe
+        account={ALICE}
+        api={api}
+      />,
+    )
+
+    await screen.findByText('alice-holding-cid')
+
+    rerender(
+      <Probe
+        account={BOB}
+        api={api}
+      />,
+    )
+
+    await waitFor(() => assert.equal(screen.getByRole('status').textContent, ''))
+  })
+})

From b6fbfc9d886b7cdf0d64604d565f4d7777e62b08 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:45:06 -0300
Subject: [PATCH 24/98] chore(carpincho): add tanstack query provider

---
 carpincho-wallet/package.json |  1 +
 carpincho-wallet/src/App.tsx  | 26 +++++++++++----
 package-lock.json             | 60 ++++++++++++++++++++++++-----------
 3 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index c383d5f8..c45b5bf3 100644
--- a/carpincho-wallet/package.json
+++ b/carpincho-wallet/package.json
@@ -22,6 +22,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.101.0",
     "@walletconnect/core": "^2.23.9",
     "@walletconnect/jsonrpc-utils": "^1.0.8",
     "@walletconnect/sign-client": "^2.23.9",
diff --git a/carpincho-wallet/src/App.tsx b/carpincho-wallet/src/App.tsx
index 55239fef..78bcd551 100644
--- a/carpincho-wallet/src/App.tsx
+++ b/carpincho-wallet/src/App.tsx
@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Header } from '@/components/Header'
 import { MenuSheet } from '@/components/menu/MenuSheet'
@@ -12,6 +13,15 @@ import { HomeView } from '@/views/HomeView'
 import { OnboardingFlow } from '@/views/onboarding/OnboardingFlow'
 import { UnlockView } from '@/views/UnlockView'
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+})
+
 export type ShellView = 'loading' | 'unlock' | 'onboarding' | 'home'
 
 // First-run routing; order matters. OnboardingFlow picks step 1 (no vault) vs step 2
@@ -65,13 +75,15 @@ const Shell = (): JSX.Element => {
 }
 
 const App = (): JSX.Element => (
-  <VaultProvider>
-    <TooltipProvider>
-      <ToastProvider>
-        <Shell />
-      </ToastProvider>
-    </TooltipProvider>
-  </VaultProvider>
+  <QueryClientProvider client={queryClient}>
+    <VaultProvider>
+      <TooltipProvider>
+        <ToastProvider>
+          <Shell />
+        </ToastProvider>
+      </TooltipProvider>
+    </VaultProvider>
+  </QueryClientProvider>
 )
 
 export default App
diff --git a/package-lock.json b/package-lock.json
index 8b1d22ba..f0e413e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -113,6 +113,7 @@
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.8",
+        "@tanstack/react-query": "^5.101.0",
         "@walletconnect/core": "^2.23.9",
         "@walletconnect/jsonrpc-utils": "^1.0.8",
         "@walletconnect/sign-client": "^2.23.9",
@@ -278,6 +279,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -2005,6 +2007,7 @@
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.4.tgz",
       "integrity": "sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@grpc/proto-loader": "^0.8.0",
         "@js-sdsl/ordered-map": "^4.4.2"
@@ -2394,6 +2397,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -3859,12 +3863,39 @@
         "vite": "^5.2.0 || ^6 || ^7 || ^8"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.101.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.101.0.tgz",
+      "integrity": "sha512-cQetA74EB+seWySv1TTKr828TnP0u39m6LykwDXIo84SNortpDkp30TMEjkqtYCNP9c40uT/iwl6MLiufEt0Ow==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.101.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.101.0.tgz",
+      "integrity": "sha512-rLlJXSpkqfizLWgkR5+eLeIk0MvTx/meEIR7LRjxic+qxiQP8zVjq7BqQkiCMNLQBlLfuOLqqr6KO5GtrDlmSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.101.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4069,6 +4100,7 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
       "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
       }
@@ -4106,6 +4138,7 @@
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4117,6 +4150,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -5138,6 +5172,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5554,6 +5589,7 @@
       "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -6508,7 +6544,8 @@
       "version": "6.2.5",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.5.tgz",
       "integrity": "sha512-eKQkTnS0relYsSOYomx8ozIbmdsQCKUdhyuIaQ2DZgKuaxtyQQMkyD/wlnQN32pO3yutN1b1L8uqwcDKaJd7/Q==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -7710,6 +7747,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8145,6 +8183,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8157,6 +8196,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -9122,6 +9162,7 @@
       "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -9780,23 +9821,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yargs": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",

From ec7e295b3ef31f474110bcb154033d3fd34dd24d Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:48:12 -0300
Subject: [PATCH 25/98] refactor(carpincho): query token holdings with tanstack

---
 .../src/hooks/useTokenHoldings.ts             | 84 +++++--------------
 .../src/test-utils/queryClient.tsx            | 19 +++++
 .../test/components/HomeTabs.test.tsx         | 63 ++++++++------
 .../test/components/SendTokensPanel.test.tsx  | 15 ++--
 .../test/components/TokensPanel.test.tsx      | 15 ++--
 .../test/hooks/useTokenHoldings.test.tsx      |  2 +
 6 files changed, 96 insertions(+), 102 deletions(-)
 create mode 100644 carpincho-wallet/src/test-utils/queryClient.tsx

diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
index 07578451..be36eb42 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldings.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
 import {
   listTokenHoldings,
   summarizeTokenHoldings,
@@ -19,16 +20,6 @@ export interface TokenHoldingsState {
   refresh: () => Promise<void>
 }
 
-interface TokenHoldingsData {
-  accountKey?: string
-  holdings: TokenHolding[]
-}
-
-interface TokenHoldingsError {
-  accountKey?: string
-  message: string
-}
-
 export interface TokenHoldingsOptions {
   pollMs?: number | null
   api?: Cip56HoldingsApi
@@ -47,66 +38,33 @@ export const useTokenHoldings = (
 ): TokenHoldingsState => {
   const api = options.api ?? defaultApi
   const pollMs = options.pollMs === undefined ? TOKEN_HOLDINGS_POLL_MS : options.pollMs
-  const [data, setData] = useState<TokenHoldingsData>({ holdings: [] })
-  const [loading, setLoading] = useState(false)
-  const [errorData, setErrorData] = useState<TokenHoldingsError | undefined>(undefined)
-  const accountKey = account === undefined ? undefined : `${account.id}:${account.partyId}`
-  const currentAccountKey = useRef(accountKey)
-  currentAccountKey.current = accountKey
-  const holdings = data.accountKey === accountKey ? data.holdings : []
-  const error =
-    errorData !== undefined && errorData.accountKey === accountKey ? errorData.message : undefined
+  const query = useQuery({
+    enabled: account !== undefined,
+    queryKey: ['cip56', 'holdings', account?.id, account?.partyId],
+    queryFn: () => api.listTokenHoldings(account?.partyId ?? ''),
+    refetchInterval: pollMs === null ? false : pollMs,
+  })
+  const holdings = query.data ?? []
+  const error = query.error instanceof Error ? query.error.message : undefined
 
-  // Refreshes holdings for the active party and keeps the previous list on transient errors.
+  // Imperative refresh lets send flows reload balances after creating a transfer.
   const refresh = useCallback(async (): Promise<void> => {
     if (account === undefined) {
-      setData({ holdings: [] })
-      setErrorData(undefined)
       return
     }
-    setLoading(true)
-    try {
-      const nextHoldings = await api.listTokenHoldings(account.partyId)
-      if (accountKey === currentAccountKey.current) {
-        setData({ accountKey, holdings: nextHoldings })
-        setErrorData(undefined)
-      }
-    } catch (err) {
-      if (accountKey === currentAccountKey.current) {
-        setErrorData({ accountKey, message: (err as Error).message })
-      }
-    } finally {
-      if (accountKey === currentAccountKey.current) {
-        setLoading(false)
-      }
-    }
-  }, [account, accountKey, api])
-
-  useEffect(() => {
-    let cancelled = false
-    let timer: ReturnType<typeof setTimeout> | undefined
-    // Polls serially so slow wallet-service calls cannot overlap.
-    const tick = async (): Promise<void> => {
-      await refresh()
-      if (!cancelled && pollMs !== null) {
-        timer = setTimeout(() => {
-          void tick()
-        }, pollMs)
-      }
-    }
-    void tick()
-    return () => {
-      cancelled = true
-      if (timer !== undefined) {
-        clearTimeout(timer)
-      }
-    }
-  }, [refresh, pollMs])
+    await query.refetch()
+  }, [account, query])
 
   const summaries = useMemo(() => summarizeTokenHoldings(holdings), [holdings])
 
   return useMemo(
-    () => ({ holdings, summaries, loading, ...(error === undefined ? {} : { error }), refresh }),
-    [holdings, summaries, loading, error, refresh],
+    () => ({
+      holdings,
+      summaries,
+      loading: query.isFetching,
+      ...(error === undefined ? {} : { error }),
+      refresh,
+    }),
+    [holdings, summaries, query.isFetching, error, refresh],
   )
 }
diff --git a/carpincho-wallet/src/test-utils/queryClient.tsx b/carpincho-wallet/src/test-utils/queryClient.tsx
new file mode 100644
index 00000000..a1d5d771
--- /dev/null
+++ b/carpincho-wallet/src/test-utils/queryClient.tsx
@@ -0,0 +1,19 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+
+// Creates an isolated query cache so tests cannot share CIP-56 server state.
+export const createTestQueryClient = (): QueryClient =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        gcTime: 0,
+        refetchOnWindowFocus: false,
+        retry: false,
+      },
+    },
+  })
+
+// Wraps a test subtree in a fresh TanStack Query provider.
+export const TestQueryClientProvider = ({ children }: { children: ReactNode }): JSX.Element => (
+  <QueryClientProvider client={createTestQueryClient()}>{children}</QueryClientProvider>
+)
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 6e18cb98..e61e1bb7 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'
 import { HomeTabs } from '@/components/HomeTabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic, TransactionRecord } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
@@ -78,9 +79,11 @@ describe('HomeTabs token navigation', () => {
     // Scenario: token balances and incoming token actions now live under Tokens.
     // The top-level wallet navigation should expose token viewing and token sending separately.
     render(
-      <VaultContext.Provider value={baseVault()}>
-        <HomeTabs transactions={[]} />
-      </VaultContext.Provider>,
+      <TestQueryClientProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <HomeTabs transactions={[]} />
+        </VaultContext.Provider>
+      </TestQueryClientProvider>,
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
@@ -108,12 +111,14 @@ describe('HomeTabs token navigation', () => {
     }
 
     render(
-      <VaultContext.Provider value={baseVault()}>
-        <HomeTabs
-          transactions={[]}
-          tokensApi={holdingsApi}
-        />
-      </VaultContext.Provider>,
+      <TestQueryClientProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <HomeTabs
+            transactions={[]}
+            tokensApi={holdingsApi}
+          />
+        </VaultContext.Provider>
+      </TestQueryClientProvider>,
     )
 
     await userEvent.click(screen.getByRole('tab', { name: 'Tokens' }))
@@ -147,13 +152,15 @@ describe('HomeTabs token navigation', () => {
     }
 
     render(
-      <VaultContext.Provider value={baseVault()}>
-        <HomeTabs
-          transactions={[]}
-          tokensApi={holdingsApi}
-          transfersApi={transfersApi}
-        />
-      </VaultContext.Provider>,
+      <TestQueryClientProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <HomeTabs
+            transactions={[]}
+            tokensApi={holdingsApi}
+            transfersApi={transfersApi}
+          />
+        </VaultContext.Provider>
+      </TestQueryClientProvider>,
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
@@ -164,17 +171,19 @@ describe('HomeTabs token navigation', () => {
     // Scenario: Alice and Bob share one local vault, but Activity belongs to the
     // selected party. Switching to Bob must hide Alice's transaction history.
     render(
-      <VaultContext.Provider
-        value={{ ...baseVault(), accounts: [ACCOUNT, SECOND_ACCOUNT], primary: SECOND_ACCOUNT }}
-      >
-        <HomeTabs
-          account={SECOND_ACCOUNT}
-          transactions={[
-            txFor(ACCOUNT, 'tx-alice', 'Alice transfer'),
-            txFor(SECOND_ACCOUNT, 'tx-bob', 'Bob transfer'),
-          ]}
-        />
-      </VaultContext.Provider>,
+      <TestQueryClientProvider>
+        <VaultContext.Provider
+          value={{ ...baseVault(), accounts: [ACCOUNT, SECOND_ACCOUNT], primary: SECOND_ACCOUNT }}
+        >
+          <HomeTabs
+            account={SECOND_ACCOUNT}
+            transactions={[
+              txFor(ACCOUNT, 'tx-alice', 'Alice transfer'),
+              txFor(SECOND_ACCOUNT, 'tx-bob', 'Bob transfer'),
+            ]}
+          />
+        </VaultContext.Provider>
+      </TestQueryClientProvider>,
     )
 
     assert.equal(screen.queryByText('Alice transfer'), null)
diff --git a/carpincho-wallet/test/components/SendTokensPanel.test.tsx b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
index a9d51a77..be6b8848 100644
--- a/carpincho-wallet/test/components/SendTokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
@@ -8,6 +8,7 @@ import {
   transferDeadlineExpiration,
 } from '@/components/SendTokensPanel'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
@@ -49,12 +50,14 @@ const baseVault = (): VaultContextValue =>
 // Mounts the send panel with injectable APIs so the test observes only UI intent.
 const renderSendTokens = (holdingsApi: Cip56HoldingsApi, sendApi: Cip56SendApi): void => {
   render(
-    <VaultContext.Provider value={baseVault()}>
-      <SendTokensPanel
-        holdingsApi={holdingsApi}
-        sendApi={sendApi}
-      />
-    </VaultContext.Provider>,
+    <TestQueryClientProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <SendTokensPanel
+          holdingsApi={holdingsApi}
+          sendApi={sendApi}
+        />
+      </VaultContext.Provider>
+    </TestQueryClientProvider>,
   )
 }
 
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index 5c84e428..3a73d6df 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.test.tsx
@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event'
 import { TokensPanel } from '@/components/TokensPanel'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
@@ -46,12 +47,14 @@ const baseVault = (): VaultContextValue =>
 // Mounts the panel under vault context so it can resolve the active account.
 const renderTokens = (api: Cip56HoldingsApi, transfersApi?: Cip56TransferApi): void => {
   render(
-    <VaultContext.Provider value={baseVault()}>
-      <TokensPanel
-        api={api}
-        transfersApi={transfersApi}
-      />
-    </VaultContext.Provider>,
+    <TestQueryClientProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <TokensPanel
+          api={api}
+          transfersApi={transfersApi}
+        />
+      </VaultContext.Provider>
+    </TestQueryClientProvider>,
   )
 }
 
diff --git a/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
index 2598e108..18353780 100644
--- a/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
+++ b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
@@ -3,6 +3,7 @@ import { afterEach, describe, it } from 'node:test'
 import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 
 const ALICE: AccountPublic = {
@@ -72,6 +73,7 @@ describe('useTokenHoldings', () => {
         account={ALICE}
         api={api}
       />,
+      { wrapper: TestQueryClientProvider },
     )
 
     await screen.findByText('alice-holding-cid')

From fcd290463d94e2f8e56eee8879496d54098f44fc Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 11:49:48 -0300
Subject: [PATCH 26/98] refactor(carpincho): query incoming transfers with
 tanstack

---
 .../src/hooks/usePendingCip56Transfers.ts     | 85 +++++--------------
 .../IncomingTransfersSection.test.tsx         |  9 +-
 .../hooks/usePendingCip56Transfers.test.tsx   |  4 +-
 3 files changed, 31 insertions(+), 67 deletions(-)

diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
index c5336e33..83144c31 100644
--- a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
 import {
   acceptPendingTransfer,
   listPendingIncomingTransfers,
@@ -32,16 +33,6 @@ export interface PendingCip56TransfersOptions {
   recordTransaction?: VaultContextValue['recordTransaction']
 }
 
-interface PendingCip56TransfersData {
-  accountKey?: string
-  transfers: PendingTokenTransfer[]
-}
-
-interface PendingCip56TransfersError {
-  accountKey?: string
-  message: string
-}
-
 const defaultApi: Cip56TransferApi = {
   listPendingIncomingTransfers,
   acceptTransfer: acceptPendingTransfer,
@@ -56,59 +47,21 @@ export const usePendingCip56Transfers = (
 ): PendingCip56TransfersState => {
   const api = options.api ?? defaultApi
   const pollMs = options.pollMs === undefined ? CIP56_TRANSFER_POLL_MS : options.pollMs
-  const [data, setData] = useState<PendingCip56TransfersData>({ transfers: [] })
-  const [loading, setLoading] = useState(false)
-  const [errorData, setErrorData] = useState<PendingCip56TransfersError | undefined>(undefined)
-  const accountKey = account === undefined ? undefined : `${account.id}:${account.partyId}`
-  const currentAccountKey = useRef(accountKey)
-  currentAccountKey.current = accountKey
-  const transfers = data.accountKey === accountKey ? data.transfers : []
-  const error =
-    errorData !== undefined && errorData.accountKey === accountKey ? errorData.message : undefined
+  const query = useQuery({
+    enabled: account !== undefined,
+    queryKey: ['cip56', 'incomingTransfers', account?.id, account?.partyId],
+    queryFn: () => api.listPendingIncomingTransfers(account?.partyId ?? ''),
+    refetchInterval: pollMs === null ? false : pollMs,
+  })
+  const transfers = query.data ?? []
+  const error = query.error instanceof Error ? query.error.message : undefined
 
   const refresh = useCallback(async (): Promise<void> => {
     if (account === undefined) {
-      setData({ transfers: [] })
-      setErrorData(undefined)
       return
     }
-    setLoading(true)
-    try {
-      const nextTransfers = await api.listPendingIncomingTransfers(account.partyId)
-      if (accountKey === currentAccountKey.current) {
-        setData({ accountKey, transfers: nextTransfers })
-        setErrorData(undefined)
-      }
-    } catch (err) {
-      if (accountKey === currentAccountKey.current) {
-        setErrorData({ accountKey, message: (err as Error).message })
-      }
-    } finally {
-      if (accountKey === currentAccountKey.current) {
-        setLoading(false)
-      }
-    }
-  }, [account, accountKey, api])
-
-  useEffect(() => {
-    let cancelled = false
-    let timer: ReturnType<typeof setTimeout> | undefined
-    const tick = async (): Promise<void> => {
-      await refresh()
-      if (!cancelled && pollMs !== null) {
-        timer = setTimeout(() => {
-          void tick()
-        }, pollMs)
-      }
-    }
-    void tick()
-    return () => {
-      cancelled = true
-      if (timer !== undefined) {
-        clearTimeout(timer)
-      }
-    }
-  }, [refresh, pollMs])
+    await query.refetch()
+  }, [account, query])
 
   const accept = useCallback(
     async (transferInstructionCid: string): Promise<void> => {
@@ -124,13 +77,19 @@ export const usePendingCip56Transfers = (
         signMessage: options.signMessage,
         recordTransaction: options.recordTransaction,
       })
-      await refresh()
+      await query.refetch()
     },
-    [account, api, options.signMessage, options.recordTransaction, refresh],
+    [account, api, options.signMessage, options.recordTransaction, query],
   )
 
   return useMemo(
-    () => ({ transfers, loading, ...(error === undefined ? {} : { error }), refresh, accept }),
-    [transfers, loading, error, refresh, accept],
+    () => ({
+      transfers,
+      loading: query.isFetching,
+      ...(error === undefined ? {} : { error }),
+      refresh,
+      accept,
+    }),
+    [transfers, query.isFetching, error, refresh, accept],
   )
 }
diff --git a/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx b/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
index f5e3ca4d..ebe4534b 100644
--- a/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
+++ b/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
 
@@ -44,9 +45,11 @@ const baseVault = (): VaultContextValue =>
 // Mounts incoming transfers under vault context so accept can use wallet signing hooks.
 const renderIncomingTransfers = (api: Cip56TransferApi): void => {
   render(
-    <VaultContext.Provider value={baseVault()}>
-      <IncomingTransfersSection api={api} />
-    </VaultContext.Provider>,
+    <TestQueryClientProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <IncomingTransfersSection api={api} />
+      </VaultContext.Provider>
+    </TestQueryClientProvider>,
   )
 }
 
diff --git a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
index d4a84cc6..54d12eb1 100644
--- a/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
+++ b/carpincho-wallet/test/hooks/usePendingCip56Transfers.test.tsx
@@ -7,6 +7,7 @@ import {
   type Cip56TransferApi,
   usePendingCip56Transfers,
 } from '@/hooks/usePendingCip56Transfers'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
 
 const ACCOUNT: AccountPublic = {
@@ -90,7 +91,7 @@ describe('usePendingCip56Transfers', () => {
       },
     }
 
-    render(<Probe api={api} />)
+    render(<Probe api={api} />, { wrapper: TestQueryClientProvider })
 
     await waitFor(() =>
       assert.equal(screen.getByText('transfer-cid-1').textContent, 'transfer-cid-1'),
@@ -119,6 +120,7 @@ describe('usePendingCip56Transfers', () => {
         account={ACCOUNT}
         api={api}
       />,
+      { wrapper: TestQueryClientProvider },
     )
 
     await screen.findByText('alice-transfer-cid')

From 16bfbb6c634b57e405a0d47c0e7b885de59993b8 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 13:21:15 -0300
Subject: [PATCH 27/98] feat(wallet-service): add cip56 holding summary rpc

---
 canton-barebones/wallet-service/src/mock.ts   |   3 +
 canton-barebones/wallet-service/src/rpc.ts    | 257 ++++++++++++++++++
 .../wallet-service/test/rpc.test.ts           | 197 ++++++++++++++
 3 files changed, 457 insertions(+)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index f0e7ea3a..4c511da5 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -151,6 +151,8 @@ export const createMockRpc = (
           return rpcResult(id, ledgerApi(request.params))
         case 'cip56.listPendingTransfers':
           return rpcResult(id, [])
+        case 'cip56.listHoldingSummary':
+          return rpcResult(id, [])
         case 'cip56.listHoldings':
           return rpcResult(id, [])
         case 'cip56.createTransfer':
@@ -205,6 +207,7 @@ export const createMockRpc = (
       'prepareTransaction',
       'executePrepared',
       'cip56.listPendingTransfers',
+      'cip56.listHoldingSummary',
       'cip56.listHoldings',
       'cip56.createTransfer',
     ],
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 7b5cc80b..ab1d74e0 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -89,6 +89,8 @@ type SdkFactory = (options: unknown) => Promise<unknown>
 
 type RpcDependencies = {
   sdkFactory?: SdkFactory
+  fetch?: typeof fetch
+  now?: () => Date
 }
 
 type Cip56TokenSdk = {
@@ -135,6 +137,40 @@ type ExecutePreparedParams = {
   submissionId?: string
 }
 
+type TokenInstrumentId = {
+  admin?: string
+  id?: string
+}
+
+type TokenHolding = {
+  contractId: string
+  interfaceViewValue?: {
+    amount?: string
+    instrumentId?: TokenInstrumentId
+    lock?: unknown
+  }
+}
+
+type TokenHoldingSummary = {
+  key: string
+  tokenLabel: string
+  instrumentId?: TokenInstrumentId
+  totalAmount: string
+  utxoCount?: number
+  lockedCount?: number
+  unlockedCount?: number
+  source: 'scan' | 'utxos'
+  scan?: {
+    totalUnlockedCoin: string
+    totalLockedCoin: string
+    totalCoinHoldings: string
+    accumulatedHoldingFeesUnlocked: string
+    accumulatedHoldingFeesLocked: string
+    accumulatedHoldingFeesTotal: string
+    totalAvailableCoin: string
+  }
+}
+
 export const rpcResult = (id: JsonRpcId, result: unknown): JsonRpcSuccess => ({
   jsonrpc: '2.0',
   id,
@@ -245,6 +281,132 @@ const optionalDateParam = (params: Record<string, unknown>, name: string): Date
   return date
 }
 
+// Reads the optional token instrument selector from JSON-RPC params.
+const optionalInstrumentParam = (p: Record<string, unknown>): TokenInstrumentId | undefined => {
+  const value = p.instrumentId
+  if (value === undefined) {
+    return undefined
+  }
+  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
+    throw new InvalidParams('instrumentId must be an object')
+  }
+  const record = value as Record<string, unknown>
+  const admin = record.admin
+  const id = record.id
+  if (admin !== undefined && typeof admin !== 'string') {
+    throw new InvalidParams('instrumentId.admin must be a string')
+  }
+  if (id !== undefined && typeof id !== 'string') {
+    throw new InvalidParams('instrumentId.id must be a string')
+  }
+  return {
+    ...(admin === undefined || admin.trim() === '' ? {} : { admin: admin.trim() }),
+    ...(id === undefined || id.trim() === '' ? {} : { id: id.trim() }),
+  }
+}
+
+// Identifies CC/Amulet requests, the only token family Scan can summarize.
+const isAmuletInstrument = (instrumentId?: TokenInstrumentId): boolean =>
+  instrumentId === undefined ||
+  instrumentId.id === undefined ||
+  ['amulet', 'amt', 'cantoncoin', 'canton coin', 'cc'].includes(
+    instrumentId.id.trim().toLowerCase(),
+  )
+
+// Creates the same grouping key Carpincho uses for token rows.
+const instrumentKey = (instrumentId?: TokenInstrumentId): string =>
+  `${instrumentId?.admin ?? 'unknown-admin'}:${instrumentId?.id ?? 'unknown-token'}`
+
+// Keeps token labels readable in summary rows.
+const instrumentLabel = (instrumentId?: TokenInstrumentId): string => {
+  const id = instrumentId?.id?.trim()
+  return id === undefined || id === '' ? 'unknown token' : id
+}
+
+// Parses positive decimal strings without floating point rounding.
+const parseDecimalAmount = (value: string): { scaled: bigint; scale: number } | undefined => {
+  const trimmed = value.trim()
+  if (!/^\d+(\.\d+)?$/.test(trimmed)) {
+    return undefined
+  }
+  const [whole, fraction = ''] = trimmed.split('.')
+  return {
+    scaled: BigInt(`${whole}${fraction}`),
+    scale: fraction.length,
+  }
+}
+
+// Adds SDK decimal amount strings exactly enough for token balance display.
+const sumDecimalAmounts = (values: string[]): string => {
+  const parsed = values
+    .map(parseDecimalAmount)
+    .filter((value): value is { scaled: bigint; scale: number } => value !== undefined)
+  if (parsed.length === 0) {
+    return '0'
+  }
+  const scale = Math.max(...parsed.map((value) => value.scale))
+  const total = parsed.reduce((acc, value) => {
+    const multiplier = 10n ** BigInt(scale - value.scale)
+    return acc + value.scaled * multiplier
+  }, 0n)
+  const raw = total.toString().padStart(scale + 1, '0')
+  const whole = raw.slice(0, raw.length - scale)
+  const fraction = scale === 0 ? '' : raw.slice(raw.length - scale).replace(/0+$/, '')
+  return fraction === '' ? whole : `${whole}.${fraction}`
+}
+
+// Narrows SDK contracts to the requested instrument when a token selector is present.
+const filterHoldingsByInstrument = (
+  holdings: TokenHolding[],
+  instrumentId?: TokenInstrumentId,
+): TokenHolding[] => {
+  if (instrumentId === undefined) {
+    return holdings
+  }
+  return holdings.filter((holding) => {
+    const actual = holding.interfaceViewValue?.instrumentId
+    return (
+      (instrumentId.id === undefined || actual?.id === instrumentId.id) &&
+      (instrumentId.admin === undefined || actual?.admin === instrumentId.admin)
+    )
+  })
+}
+
+// Builds balance summaries from UTXOs for generic CIP-56 tokens or Scan fallback.
+const summarizeHoldingUtxos = (
+  holdings: TokenHolding[],
+  requestedInstrument?: TokenInstrumentId,
+): TokenHoldingSummary[] => {
+  const groups = new Map<string, TokenHolding[]>()
+  for (const holding of filterHoldingsByInstrument(holdings, requestedInstrument)) {
+    const key = instrumentKey(holding.interfaceViewValue?.instrumentId ?? requestedInstrument)
+    groups.set(key, [...(groups.get(key) ?? []), holding])
+  }
+  return [...groups.entries()]
+    .map(([key, tokenHoldings]) => {
+      const firstInstrument =
+        tokenHoldings[0]?.interfaceViewValue?.instrumentId ?? requestedInstrument
+      const lockedCount = tokenHoldings.filter(
+        (holding) => holding.interfaceViewValue?.lock != null,
+      ).length
+      return {
+        key,
+        tokenLabel: instrumentLabel(firstInstrument),
+        instrumentId: firstInstrument,
+        totalAmount: sumDecimalAmounts(
+          tokenHoldings
+            .map((holding) => holding.interfaceViewValue?.amount)
+            .filter((amount): amount is string => amount !== undefined),
+        ),
+        utxoCount: tokenHoldings.length,
+        lockedCount,
+        unlockedCount: tokenHoldings.length - lockedCount,
+        source: 'utxos' as const,
+      }
+    })
+    .sort((a, b) => a.tokenLabel.localeCompare(b.tokenLabel))
+}
+
 export type Rpc = {
   handle: (request: JsonRpcRequest) => Promise<JsonRpcResponse | undefined>
   serviceInfo: () => Record<string, unknown>
@@ -257,6 +419,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     (async (options: unknown) => {
       return await SDK.create(options as never)
     })
+  const fetchImpl = deps.fetch ?? fetch
+  const now = deps.now ?? (() => new Date())
   let sdkPromise: Promise<WalletSdk> | undefined
   let tokenSdkPromise: Promise<Cip56TokenSdk> | undefined
 
@@ -455,6 +619,96 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     })
   }
 
+  // Keeps the generic SDK UTXO list behind one helper so Scan fallback cannot diverge.
+  const listHoldingUtxos = async (partyId: string): Promise<TokenHolding[]> => {
+    const sdk = await getTokenSdk()
+    return (await sdk.token.utxos.list({
+      partyId,
+      includeLocked: true,
+      limit: 100,
+      continueUntilCompletion: true,
+    })) as TokenHolding[]
+  }
+
+  // Uses Scan's Amulet aggregate endpoint for fast CC balances.
+  const scanAmuletHoldingSummary = async (
+    partyId: string,
+    instrumentId?: TokenInstrumentId,
+  ): Promise<TokenHoldingSummary[]> => {
+    const url = `${config.splice.scanApiUrl.replace(/\/$/, '')}/v0/holdings/summary`
+    const response = await fetchImpl(url, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json',
+        ...(config.canton.backendToken === undefined
+          ? {}
+          : { authorization: `Bearer ${config.canton.backendToken}` }),
+      },
+      body: JSON.stringify({
+        migration_id: 0,
+        record_time: now().toISOString(),
+        record_time_match: 'at_or_before',
+        owner_party_ids: [partyId],
+      }),
+    })
+    if (!response.ok) {
+      throw new Error(`Scan holdings summary failed with HTTP ${response.status}`)
+    }
+    const parsed = (await response.json()) as {
+      summaries?: Array<{
+        party_id: string
+        total_unlocked_coin: string
+        total_locked_coin: string
+        total_coin_holdings: string
+        accumulated_holding_fees_unlocked: string
+        accumulated_holding_fees_locked: string
+        accumulated_holding_fees_total: string
+        total_available_coin: string
+      }>
+    }
+    const summary = parsed.summaries?.find((item) => item.party_id === partyId)
+    if (summary === undefined) {
+      return []
+    }
+    const normalizedInstrument = {
+      ...(instrumentId?.admin === undefined ? {} : { admin: instrumentId.admin }),
+      id: instrumentId?.id ?? 'Amulet',
+    }
+    return [
+      {
+        key: instrumentKey(normalizedInstrument),
+        tokenLabel: instrumentLabel(normalizedInstrument),
+        instrumentId: normalizedInstrument,
+        totalAmount: summary.total_available_coin,
+        source: 'scan',
+        scan: {
+          totalUnlockedCoin: summary.total_unlocked_coin,
+          totalLockedCoin: summary.total_locked_coin,
+          totalCoinHoldings: summary.total_coin_holdings,
+          accumulatedHoldingFeesUnlocked: summary.accumulated_holding_fees_unlocked,
+          accumulatedHoldingFeesLocked: summary.accumulated_holding_fees_locked,
+          accumulatedHoldingFeesTotal: summary.accumulated_holding_fees_total,
+          totalAvailableCoin: summary.total_available_coin,
+        },
+      },
+    ]
+  }
+
+  // Routes Amulet summaries through Scan and falls back to UTXOs when Scan is unavailable.
+  const cip56ListHoldingSummary = async (params: unknown): Promise<TokenHoldingSummary[]> => {
+    const p = objectParam<Record<string, unknown>>(params, 'cip56.listHoldingSummary')
+    const partyId = requiredStringParam(p, 'partyId')
+    const instrumentId = optionalInstrumentParam(p)
+    if (isAmuletInstrument(instrumentId)) {
+      try {
+        return await scanAmuletHoldingSummary(partyId, instrumentId)
+      } catch (error) {
+        console.warn('[wallet-service] scan holding summary fallback', errorData(error))
+      }
+    }
+    return summarizeHoldingUtxos(await listHoldingUtxos(partyId), instrumentId)
+  }
+
   const cip56AcceptTransfer = async (
     params: unknown,
   ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
@@ -520,6 +774,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await cip56ListPendingTransfers(request.params))
         case 'cip56.listHoldings':
           return rpcResult(id, await cip56ListHoldings(request.params))
+        case 'cip56.listHoldingSummary':
+          return rpcResult(id, await cip56ListHoldingSummary(request.params))
         case 'cip56.acceptTransfer':
           return rpcResult(id, await cip56AcceptTransfer(request.params))
         case 'cip56.createTransfer':
@@ -569,6 +825,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'executePrepared',
       'cip56.listPendingTransfers',
       'cip56.listHoldings',
+      'cip56.listHoldingSummary',
       'cip56.acceptTransfer',
       'cip56.createTransfer',
     ],
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 9a69ce07..2c6defcb 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -386,6 +386,203 @@ describe('CIP-56 token helpers', () => {
     })
   })
 
+  it('lists Amulet holding summaries through Scan without listing UTXOs', async () => {
+    // Scenario: CC/Amulet balances should use Scan's aggregate endpoint so the
+    // wallet can show a balance without walking every Holding UTXO.
+    const calls: { url: string; body?: unknown }[] = []
+    const rpc = createRpc(withToken(), {
+      now: () => new Date('2026-06-10T12:00:00.000Z'),
+      sdkFactory: async () => {
+        throw new Error('SDK should not list UTXOs for Amulet summary')
+      },
+      fetch: async (url, init) => {
+        calls.push({
+          url: String(url),
+          body: init?.body === undefined ? undefined : JSON.parse(String(init.body)),
+        })
+        return new Response(
+          JSON.stringify({
+            summaries: [
+              {
+                party_id: 'receiver::party',
+                total_unlocked_coin: '7.0000000000',
+                total_locked_coin: '2.0000000000',
+                total_coin_holdings: '9.0000000000',
+                accumulated_holding_fees_unlocked: '0.1000000000',
+                accumulated_holding_fees_locked: '0.2000000000',
+                accumulated_holding_fees_total: '0.3000000000',
+                total_available_coin: '8.7000000000',
+              },
+            ],
+            record_time: '2026-06-10T12:00:00.000Z',
+            migration_id: 0,
+          }),
+          { status: 200, headers: { 'content-type': 'application/json' } },
+        )
+      },
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listHoldingSummary',
+      params: { partyId: 'receiver::party', instrumentId: { id: 'Amulet' } },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, [
+      {
+        key: 'unknown-admin:Amulet',
+        tokenLabel: 'Amulet',
+        instrumentId: { id: 'Amulet' },
+        totalAmount: '8.7000000000',
+        source: 'scan',
+        scan: {
+          totalUnlockedCoin: '7.0000000000',
+          totalLockedCoin: '2.0000000000',
+          totalCoinHoldings: '9.0000000000',
+          accumulatedHoldingFeesUnlocked: '0.1000000000',
+          accumulatedHoldingFeesLocked: '0.2000000000',
+          accumulatedHoldingFeesTotal: '0.3000000000',
+          totalAvailableCoin: '8.7000000000',
+        },
+      },
+    ])
+    assert.equal(calls.length, 1)
+    assert.equal(calls[0]?.url, 'http://scan.localhost:4000/api/scan/v0/holdings/summary')
+    assert.deepEqual(calls[0]?.body, {
+      migration_id: 0,
+      record_time: '2026-06-10T12:00:00.000Z',
+      record_time_match: 'at_or_before',
+      owner_party_ids: ['receiver::party'],
+    })
+  })
+
+  it('falls back to UTXO summaries when Scan cannot summarize Amulet', async () => {
+    // Scenario: local Scan may be unavailable or lagging. The summary RPC must still
+    // return a correct balance by falling back to the existing SDK UTXO path.
+    const holdingContracts = [
+      {
+        contractId: 'holding-cid-1',
+        interfaceViewValue: {
+          owner: 'receiver::party',
+          amount: '4.0000000000',
+          instrumentId: { admin: 'admin::party', id: 'Amulet' },
+          lock: null,
+        },
+      },
+      {
+        contractId: 'holding-cid-2',
+        interfaceViewValue: {
+          owner: 'receiver::party',
+          amount: '3.0000000000',
+          instrumentId: { admin: 'admin::party', id: 'Amulet' },
+          lock: { holders: ['validator::party'] },
+        },
+      },
+    ]
+    const seen: { params?: unknown } = {}
+    const rpc = createRpc(withToken(), {
+      fetch: async () => new Response('scan unavailable', { status: 503 }),
+      sdkFactory: async () => ({
+        token: {
+          utxos: {
+            list: async (params: unknown) => {
+              seen.params = params
+              return holdingContracts
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listHoldingSummary',
+      params: { partyId: 'receiver::party', instrumentId: { id: 'Amulet' } },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, [
+      {
+        key: 'admin::party:Amulet',
+        tokenLabel: 'Amulet',
+        instrumentId: { admin: 'admin::party', id: 'Amulet' },
+        totalAmount: '7',
+        utxoCount: 2,
+        lockedCount: 1,
+        unlockedCount: 1,
+        source: 'utxos',
+      },
+    ])
+    assert.deepEqual(seen.params, {
+      partyId: 'receiver::party',
+      includeLocked: true,
+      limit: 100,
+      continueUntilCompletion: true,
+    })
+  })
+
+  it('summarizes non-Amulet tokens from UTXOs without calling Scan', async () => {
+    // Scenario: Scan aggregates only CC/Amulet. Other CIP-56 tokens must use the
+    // generic UTXO list and filter by the requested instrument.
+    let scanCalled = false
+    const rpc = createRpc(withToken(), {
+      fetch: async () => {
+        scanCalled = true
+        return new Response('{}')
+      },
+      sdkFactory: async () => ({
+        token: {
+          utxos: {
+            list: async () => [
+              {
+                contractId: 'holding-cid-1',
+                interfaceViewValue: {
+                  amount: '5',
+                  instrumentId: { admin: 'issuer::party', id: 'MockToken' },
+                },
+              },
+              {
+                contractId: 'holding-cid-2',
+                interfaceViewValue: {
+                  amount: '99',
+                  instrumentId: { admin: 'admin::party', id: 'Amulet' },
+                },
+              },
+            ],
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'cip56.listHoldingSummary',
+      params: {
+        partyId: 'receiver::party',
+        instrumentId: { admin: 'issuer::party', id: 'MockToken' },
+      },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.equal(scanCalled, false)
+    assert.deepEqual(res.result, [
+      {
+        key: 'issuer::party:MockToken',
+        tokenLabel: 'MockToken',
+        instrumentId: { admin: 'issuer::party', id: 'MockToken' },
+        totalAmount: '5',
+        utxoCount: 1,
+        lockedCount: 0,
+        unlockedCount: 1,
+        source: 'utxos',
+      },
+    ])
+  })
+
   it('rejects CIP-56 helper calls without required params', async () => {
     // Scenario: malformed Carpincho calls should fail as JSON-RPC invalid
     // params before the SDK is initialized or any Splice service is contacted.

From 427c52b8035a7c8a73ebd29b06300698ac46df50 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 13:25:41 -0300
Subject: [PATCH 28/98] perf(carpincho): load token details on demand

---
 carpincho-wallet/src/cip56/holdings.ts        |  31 ++++-
 .../src/components/TokensPanel.tsx            | 114 +++++++++++++-----
 .../src/hooks/useTokenHoldingDetails.ts       |  51 ++++++++
 .../src/hooks/useTokenHoldings.ts             |  20 ++-
 carpincho-wallet/test/cip56/holdings.test.ts  |  36 +++++-
 .../test/components/HomeTabs.test.tsx         |  16 ++-
 .../test/components/SendTokensPanel.test.tsx  |  14 +--
 .../test/components/TokensPanel.test.tsx      |  47 +++++---
 .../test/hooks/useTokenHoldings.test.tsx      |  24 ++--
 9 files changed, 254 insertions(+), 99 deletions(-)
 create mode 100644 carpincho-wallet/src/hooks/useTokenHoldingDetails.ts

diff --git a/carpincho-wallet/src/cip56/holdings.ts b/carpincho-wallet/src/cip56/holdings.ts
index 8246c408..b2ddebcd 100644
--- a/carpincho-wallet/src/cip56/holdings.ts
+++ b/carpincho-wallet/src/cip56/holdings.ts
@@ -26,10 +26,11 @@ export interface TokenHoldingSummary {
   tokenLabel: string
   instrumentId?: TokenInstrumentId
   totalAmount: string
-  utxoCount: number
-  lockedCount: number
-  unlockedCount: number
-  holdings: TokenHolding[]
+  utxoCount?: number
+  lockedCount?: number
+  unlockedCount?: number
+  source?: 'scan' | 'utxos'
+  holdings?: TokenHolding[]
 }
 
 interface ParsedDecimal {
@@ -47,6 +48,15 @@ export const holdingTokenLabel = (instrumentId?: TokenInstrumentId): string =>
 const holdingInstrumentKey = (instrumentId?: TokenInstrumentId): string =>
   `${instrumentId?.admin ?? 'unknown-admin'}:${instrumentId?.id ?? 'unknown-token'}`
 
+// Compares optional token ids while allowing callers to filter by id-only CC selectors.
+const isSameInstrument = (
+  actual: TokenInstrumentId | undefined,
+  expected: TokenInstrumentId | undefined,
+): boolean =>
+  expected === undefined ||
+  ((expected.id === undefined || actual?.id === expected.id) &&
+    (expected.admin === undefined || actual?.admin === expected.admin))
+
 // Parses positive decimal strings from SDK holding amounts without floating point rounding.
 const parseDecimalAmount = (value: string): ParsedDecimal | undefined => {
   const trimmed = value.trim()
@@ -110,6 +120,19 @@ export const summarizeTokenHoldings = (holdings: TokenHolding[]): TokenHoldingSu
     .sort((a, b) => a.tokenLabel.localeCompare(b.tokenLabel))
 }
 
+// Filters raw UTXOs for the token row the user expanded.
+export const filterTokenHoldingsByInstrument = (
+  holdings: TokenHolding[],
+  instrumentId?: TokenInstrumentId,
+): TokenHolding[] =>
+  holdings.filter((holding) =>
+    isSameInstrument(holding.interfaceViewValue?.instrumentId, instrumentId),
+  )
+
+// Reads fast token balance summaries through wallet-service.
+export const listTokenHoldingSummaries = async (partyId: string): Promise<TokenHoldingSummary[]> =>
+  await walletServiceRequest<TokenHoldingSummary[]>('cip56.listHoldingSummary', { partyId })
+
 // Reads active CIP-56 holding UTXOs through wallet-service.
 export const listTokenHoldings = async (partyId: string): Promise<TokenHolding[]> =>
   await walletServiceRequest<TokenHolding[]>('cip56.listHoldings', { partyId })
diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index 5b7bce25..dbcb7c61 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react'
+import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
 import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
 import { SecondaryButton } from '@/components/ui/Button'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
+import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -20,6 +22,12 @@ interface HoldingDetailRowProps {
   value: string
 }
 
+interface TokenHoldingDetailsProps {
+  account: AccountPublic
+  api?: Cip56HoldingsApi
+  summary: TokenHoldingSummary
+}
+
 // Keeps raw holding values readable in the expanded UTXO details area.
 const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element => (
   <div className="grid gap-1">
@@ -28,6 +36,66 @@ const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element
   </div>
 )
 
+// Fetches UTXO details lazily so Scan summaries can render balances quickly.
+const TokenHoldingDetails = ({ account, api, summary }: TokenHoldingDetailsProps): JSX.Element => {
+  const detailsApi =
+    api?.listTokenHoldings === undefined ? undefined : { listTokenHoldings: api.listTokenHoldings }
+  const { holdings, loading, error } = useTokenHoldingDetails(account, summary, {
+    api: detailsApi,
+    enabled: true,
+  })
+
+  if (loading && holdings.length === 0) {
+    return <p className="m-0 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
+  }
+
+  if (error !== undefined) {
+    return (
+      <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+        {error}
+      </div>
+    )
+  }
+
+  if (holdings.length === 0) {
+    return <p className="m-0 text-[0.82rem] text-muted-foreground">No UTXO details</p>
+  }
+
+  return (
+    <>
+      {holdings.map((holding) => {
+        const view = holding.interfaceViewValue
+        const lock = view?.lock
+        return (
+          <dl
+            key={holding.contractId}
+            className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3"
+          >
+            <HoldingDetailRow
+              label="amount"
+              value={view?.amount ?? 'unknown'}
+            />
+            <HoldingDetailRow
+              label="lock"
+              value={lock == null ? 'unlocked' : 'locked'}
+            />
+            {lock?.expiresAt === undefined ? null : (
+              <HoldingDetailRow
+                label="expires"
+                value={transferTimeLabel(lock.expiresAt)}
+              />
+            )}
+            <HoldingDetailRow
+              label="contract id"
+              value={holding.contractId}
+            />
+          </dl>
+        )
+      })}
+    </>
+  )
+}
+
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
 export const TokensPanel = ({
   account,
@@ -93,10 +161,14 @@ export const TokensPanel = ({
                       {summary.totalAmount} {summary.tokenLabel}
                     </p>
                     <p className="m-0 mt-1 flex flex-wrap gap-x-1 text-[0.78rem] text-muted-foreground">
-                      <span>
-                        {summary.utxoCount} {summary.utxoCount === 1 ? 'UTXO' : 'UTXOs'}
-                      </span>
-                      {summary.lockedCount > 0 ? (
+                      {summary.utxoCount === undefined ? (
+                        <span>UTXOs load on demand</span>
+                      ) : (
+                        <span>
+                          {summary.utxoCount} {summary.utxoCount === 1 ? 'UTXO' : 'UTXOs'}
+                        </span>
+                      )}
+                      {(summary.lockedCount ?? 0) > 0 ? (
                         <>
                           <span aria-hidden="true">·</span>
                           <span>{summary.lockedCount} locked</span>
@@ -118,35 +190,11 @@ export const TokensPanel = ({
                     id={detailsId}
                     className="mt-3 flex flex-col gap-3 rounded-md border border-border bg-background/60 p-3"
                   >
-                    {summary.holdings.map((holding) => {
-                      const view = holding.interfaceViewValue
-                      const lock = view?.lock
-                      return (
-                        <dl
-                          key={holding.contractId}
-                          className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3"
-                        >
-                          <HoldingDetailRow
-                            label="amount"
-                            value={view?.amount ?? 'unknown'}
-                          />
-                          <HoldingDetailRow
-                            label="lock"
-                            value={lock == null ? 'unlocked' : 'locked'}
-                          />
-                          {lock?.expiresAt === undefined ? null : (
-                            <HoldingDetailRow
-                              label="expires"
-                              value={transferTimeLabel(lock.expiresAt)}
-                            />
-                          )}
-                          <HoldingDetailRow
-                            label="contract id"
-                            value={holding.contractId}
-                          />
-                        </dl>
-                      )
-                    })}
+                    <TokenHoldingDetails
+                      account={activeAccount}
+                      api={api}
+                      summary={summary}
+                    />
                   </div>
                 ) : null}
               </article>
diff --git a/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts b/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts
new file mode 100644
index 00000000..f17d1d53
--- /dev/null
+++ b/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts
@@ -0,0 +1,51 @@
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import {
+  filterTokenHoldingsByInstrument,
+  listTokenHoldings,
+  type TokenHolding,
+  type TokenHoldingSummary,
+} from '@/cip56/holdings'
+import type { AccountPublic } from '@/vault/types'
+
+export interface Cip56HoldingDetailsApi {
+  listTokenHoldings: (partyId: string) => Promise<TokenHolding[]>
+}
+
+export interface TokenHoldingDetailsState {
+  holdings: TokenHolding[]
+  loading: boolean
+  error?: string
+}
+
+const defaultApi: Cip56HoldingDetailsApi = {
+  listTokenHoldings,
+}
+
+// Loads raw UTXOs only after a token row is expanded.
+export const useTokenHoldingDetails = (
+  account: AccountPublic | undefined,
+  summary: TokenHoldingSummary | undefined,
+  options: { api?: Cip56HoldingDetailsApi; enabled?: boolean } = {},
+): TokenHoldingDetailsState => {
+  const api = options.api ?? defaultApi
+  const enabled = options.enabled === true && account !== undefined && summary !== undefined
+  const query = useQuery({
+    enabled,
+    queryKey: ['cip56', 'holdingDetails', account?.id, account?.partyId, summary?.key],
+    queryFn: async () => {
+      const holdings = await api.listTokenHoldings(account?.partyId ?? '')
+      return filterTokenHoldingsByInstrument(holdings, summary?.instrumentId)
+    },
+  })
+  const error = query.error instanceof Error ? query.error.message : undefined
+
+  return useMemo(
+    () => ({
+      holdings: query.data ?? summary?.holdings ?? [],
+      loading: query.isFetching,
+      ...(error === undefined ? {} : { error }),
+    }),
+    [query.data, query.isFetching, summary?.holdings, error],
+  )
+}
diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
index be36eb42..d072ef5b 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldings.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -1,19 +1,18 @@
 import { useQuery } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 import {
-  listTokenHoldings,
-  summarizeTokenHoldings,
+  listTokenHoldingSummaries,
   type TokenHolding,
   type TokenHoldingSummary,
 } from '@/cip56/holdings'
 import type { AccountPublic } from '@/vault/types'
 
 export interface Cip56HoldingsApi {
-  listTokenHoldings: (partyId: string) => Promise<TokenHolding[]>
+  listTokenHoldingSummaries: (partyId: string) => Promise<TokenHoldingSummary[]>
+  listTokenHoldings?: (partyId: string) => Promise<TokenHolding[]>
 }
 
 export interface TokenHoldingsState {
-  holdings: TokenHolding[]
   summaries: TokenHoldingSummary[]
   loading: boolean
   error?: string
@@ -26,7 +25,7 @@ export interface TokenHoldingsOptions {
 }
 
 const defaultApi: Cip56HoldingsApi = {
-  listTokenHoldings,
+  listTokenHoldingSummaries,
 }
 
 export const TOKEN_HOLDINGS_POLL_MS = 5_000
@@ -40,11 +39,11 @@ export const useTokenHoldings = (
   const pollMs = options.pollMs === undefined ? TOKEN_HOLDINGS_POLL_MS : options.pollMs
   const query = useQuery({
     enabled: account !== undefined,
-    queryKey: ['cip56', 'holdings', account?.id, account?.partyId],
-    queryFn: () => api.listTokenHoldings(account?.partyId ?? ''),
+    queryKey: ['cip56', 'holdingSummaries', account?.id, account?.partyId],
+    queryFn: () => api.listTokenHoldingSummaries(account?.partyId ?? ''),
     refetchInterval: pollMs === null ? false : pollMs,
   })
-  const holdings = query.data ?? []
+  const summaries = query.data ?? []
   const error = query.error instanceof Error ? query.error.message : undefined
 
   // Imperative refresh lets send flows reload balances after creating a transfer.
@@ -55,16 +54,13 @@ export const useTokenHoldings = (
     await query.refetch()
   }, [account, query])
 
-  const summaries = useMemo(() => summarizeTokenHoldings(holdings), [holdings])
-
   return useMemo(
     () => ({
-      holdings,
       summaries,
       loading: query.isFetching,
       ...(error === undefined ? {} : { error }),
       refresh,
     }),
-    [holdings, summaries, query.isFetching, error, refresh],
+    [summaries, query.isFetching, error, refresh],
   )
 }
diff --git a/carpincho-wallet/test/cip56/holdings.test.ts b/carpincho-wallet/test/cip56/holdings.test.ts
index e3de4257..6ecac79c 100644
--- a/carpincho-wallet/test/cip56/holdings.test.ts
+++ b/carpincho-wallet/test/cip56/holdings.test.ts
@@ -1,6 +1,12 @@
 import { strict as assert } from 'node:assert'
 import { afterEach, describe, it } from 'node:test'
-import { listTokenHoldings, summarizeTokenHoldings, type TokenHolding } from '@/cip56/holdings'
+import {
+  listTokenHoldingSummaries,
+  listTokenHoldings,
+  summarizeTokenHoldings,
+  type TokenHolding,
+  type TokenHoldingSummary,
+} from '@/cip56/holdings'
 
 const originalFetch = globalThis.fetch
 
@@ -39,6 +45,32 @@ describe('CIP-56 holding helpers', () => {
     assert.deepEqual(result, holdings)
   })
 
+  it('lists token holding summaries through wallet-service', async () => {
+    // Scenario: wallet-service can return Scan-backed balance summaries without
+    // sending every UTXO to the browser.
+    const summaries: TokenHoldingSummary[] = [
+      {
+        key: 'dso::party:Amulet',
+        tokenLabel: 'Amulet',
+        instrumentId: { admin: 'dso::party', id: 'Amulet' },
+        totalAmount: '12.5000000000',
+        source: 'scan',
+      },
+    ]
+    const methods: string[] = []
+    globalThis.fetch = async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as { method: string; params: unknown }
+      methods.push(body.method)
+      assert.deepEqual(body.params, { partyId: 'alice::party' })
+      return new Response(JSON.stringify({ result: summaries }), { status: 200 })
+    }
+
+    const result = await listTokenHoldingSummaries('alice::party')
+
+    assert.deepEqual(methods, ['cip56.listHoldingSummary'])
+    assert.deepEqual(result, summaries)
+  })
+
   it('summarizes holdings by token with decimal totals and lock counts', () => {
     // Scenario: one party can own multiple holding UTXOs for the same token.
     // The Tokens tab should show a balance-like total while preserving UTXO details.
@@ -71,7 +103,7 @@ describe('CIP-56 holding helpers', () => {
     assert.equal(summary.unlockedCount, 1)
     assert.equal(summary.lockedCount, 1)
     assert.deepEqual(
-      summary.holdings.map((holding) => holding.contractId),
+      summary.holdings?.map((holding) => holding.contractId),
       ['holding-cid-1', 'holding-cid-2'],
     )
   })
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index e61e1bb7..3b227ba1 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -97,15 +97,13 @@ describe('HomeTabs token navigation', () => {
     // transfer requests. Opening Tokens should mount the holdings panel for the
     // active account and show the grouped balance.
     const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldings: async () => [
+      listTokenHoldingSummaries: async () => [
         {
-          contractId: 'holding-cid-1',
-          interfaceViewValue: {
-            owner: 'alice::party',
-            amount: '7.0000000000',
-            instrumentId: { admin: 'dso::party', id: 'Amulet' },
-            lock: null,
-          },
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '7',
+          source: 'scan',
         },
       ],
     }
@@ -148,7 +146,7 @@ describe('HomeTabs token navigation', () => {
       acceptTransfer: async () => ({ updateId: 'update-1' }),
     }
     const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldings: async () => [],
+      listTokenHoldingSummaries: async () => [],
     }
 
     render(
diff --git a/carpincho-wallet/test/components/SendTokensPanel.test.tsx b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
index be6b8848..1dfb61bc 100644
--- a/carpincho-wallet/test/components/SendTokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
@@ -73,15 +73,13 @@ describe('SendTokensPanel', () => {
     // account, default the deadline to 1h, and pass the selected instrument id.
     const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
     const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldings: async () => [
+      listTokenHoldingSummaries: async () => [
         {
-          contractId: 'holding-cid-1',
-          interfaceViewValue: {
-            owner: 'alice::party',
-            amount: '12.5000000000',
-            instrumentId: { admin: 'dso::party', id: 'Amulet' },
-            lock: null,
-          },
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '12.5000000000',
+          source: 'scan',
         },
       ],
     }
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index 3a73d6df..10f62450 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.test.tsx
@@ -67,8 +67,22 @@ describe('TokensPanel', () => {
   it('shows token holding totals and expands UTXO details', async () => {
     // Scenario: the active party owns two Amulet holding UTXOs, one unlocked and one locked.
     // The panel should show a grouped total first and expose raw holding ids on demand.
+    let detailsCalls = 0
     const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async (partyId) => {
+        assert.equal(partyId, 'alice::party')
+        return [
+          {
+            key: 'dso::party:Amulet',
+            tokenLabel: 'Amulet',
+            instrumentId: { admin: 'dso::party', id: 'Amulet' },
+            totalAmount: '15.75',
+            source: 'scan',
+          },
+        ]
+      },
       listTokenHoldings: async (partyId) => {
+        detailsCalls += 1
         assert.equal(partyId, 'alice::party')
         return [
           {
@@ -97,9 +111,9 @@ describe('TokensPanel', () => {
 
     await screen.findByText('Token holdings')
     await screen.findByText('15.75 Amulet')
-    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
-    assert.equal(screen.getByText('1 locked').textContent, '1 locked')
+    assert.equal(screen.getByText('UTXOs load on demand').textContent, 'UTXOs load on demand')
     assert.equal(screen.queryByText('holding-cid-1'), null)
+    assert.equal(detailsCalls, 0)
 
     await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
 
@@ -119,21 +133,20 @@ describe('TokensPanel', () => {
     assert.equal(screen.getByText('holding-cid-2').textContent, 'holding-cid-2')
     assert.equal(screen.queryByText('owner'), null)
     assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
+    assert.equal(detailsCalls, 1)
   })
 
   it('shows incoming transfers only when the active party has pending receipts', async () => {
     // Scenario: Tokens combines balances with token actions. Incoming transfers
     // should appear above holdings when pending, and disappear when the API has none.
     const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldings: async () => [
+      listTokenHoldingSummaries: async () => [
         {
-          contractId: 'holding-cid-1',
-          interfaceViewValue: {
-            owner: 'alice::party',
-            amount: '7.0000000000',
-            instrumentId: { admin: 'dso::party', id: 'Amulet' },
-            lock: null,
-          },
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '7',
+          source: 'scan',
         },
       ],
     }
@@ -165,15 +178,13 @@ describe('TokensPanel', () => {
     // Scenario: an empty incoming-transfer list should not take vertical space
     // in Tokens; holdings remain the only visible token section.
     const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldings: async () => [
+      listTokenHoldingSummaries: async () => [
         {
-          contractId: 'holding-cid-1',
-          interfaceViewValue: {
-            owner: 'alice::party',
-            amount: '7.0000000000',
-            instrumentId: { admin: 'dso::party', id: 'Amulet' },
-            lock: null,
-          },
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '7',
+          source: 'scan',
         },
       ],
     }
diff --git a/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
index 18353780..32fc9b5c 100644
--- a/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
+++ b/carpincho-wallet/test/hooks/useTokenHoldings.test.tsx
@@ -35,9 +35,9 @@ const Probe = ({
   account: AccountPublic
   api: Cip56HoldingsApi
 }): JSX.Element => {
-  // Probe renders raw contract ids so the test can observe hook state across account changes.
+  // Probe renders summary keys so the test can observe hook state across account changes.
   const state = useTokenHoldings(account, { api, pollMs: null })
-  return <output>{state.holdings.map((holding) => holding.contractId).join(',')}</output>
+  return <output>{state.summaries.map((summary) => summary.key).join(',')}</output>
 }
 
 describe('useTokenHoldings', () => {
@@ -47,20 +47,18 @@ describe('useTokenHoldings', () => {
   })
 
   it('clears previous party holdings while the newly selected party loads', async () => {
-    // Scenario: Alice holdings loaded, then the user selects Bob. Bob's wallet-service
-    // call can still be in flight, but Alice's holding must no longer appear under Bob.
+    // Scenario: Alice summaries loaded, then the user selects Bob. Bob's wallet-service
+    // call can still be in flight, but Alice's balance must no longer appear under Bob.
     const api: Cip56HoldingsApi = {
-      listTokenHoldings: async (partyId) => {
+      listTokenHoldingSummaries: async (partyId) => {
         if (partyId === ALICE.partyId) {
           return [
             {
-              contractId: 'alice-holding-cid',
-              interfaceViewValue: {
-                owner: ALICE.partyId,
-                amount: '7',
-                instrumentId: { id: 'Amulet' },
-                lock: null,
-              },
+              key: 'unknown-admin:Amulet',
+              tokenLabel: 'Amulet',
+              instrumentId: { id: 'Amulet' },
+              totalAmount: '7',
+              source: 'scan',
             },
           ]
         }
@@ -76,7 +74,7 @@ describe('useTokenHoldings', () => {
       { wrapper: TestQueryClientProvider },
     )
 
-    await screen.findByText('alice-holding-cid')
+    await screen.findByText('unknown-admin:Amulet')
 
     rerender(
       <Probe

From 612dd7ce13b1747bfb69e5d2796525b1d4d42322 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 13:58:37 -0300
Subject: [PATCH 29/98] fix(carpincho): reuse fallback token holding details

---
 canton-barebones/wallet-service/src/rpc.ts    |  2 +
 .../wallet-service/test/rpc.test.ts           |  9 ++++
 .../src/hooks/useTokenHoldingDetails.ts       | 13 ++++--
 .../test/components/TokensPanel.test.tsx      | 44 +++++++++++++++++++
 4 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index ab1d74e0..d2aecb15 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -159,6 +159,7 @@ type TokenHoldingSummary = {
   utxoCount?: number
   lockedCount?: number
   unlockedCount?: number
+  holdings?: TokenHolding[]
   source: 'scan' | 'utxos'
   scan?: {
     totalUnlockedCoin: string
@@ -401,6 +402,7 @@ const summarizeHoldingUtxos = (
         utxoCount: tokenHoldings.length,
         lockedCount,
         unlockedCount: tokenHoldings.length - lockedCount,
+        holdings: tokenHoldings,
         source: 'utxos' as const,
       }
     })
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 2c6defcb..0f39e760 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -513,6 +513,7 @@ describe('CIP-56 token helpers', () => {
         utxoCount: 2,
         lockedCount: 1,
         unlockedCount: 1,
+        holdings: holdingContracts,
         source: 'utxos',
       },
     ])
@@ -569,6 +570,13 @@ describe('CIP-56 token helpers', () => {
 
     assert.ok('result' in res)
     assert.equal(scanCalled, false)
+    const expectedHolding = {
+      contractId: 'holding-cid-1',
+      interfaceViewValue: {
+        amount: '5',
+        instrumentId: { admin: 'issuer::party', id: 'MockToken' },
+      },
+    }
     assert.deepEqual(res.result, [
       {
         key: 'issuer::party:MockToken',
@@ -578,6 +586,7 @@ describe('CIP-56 token helpers', () => {
         utxoCount: 1,
         lockedCount: 0,
         unlockedCount: 1,
+        holdings: [expectedHolding],
         source: 'utxos',
       },
     ])
diff --git a/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts b/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts
index f17d1d53..c025f080 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldingDetails.ts
@@ -29,7 +29,12 @@ export const useTokenHoldingDetails = (
   options: { api?: Cip56HoldingDetailsApi; enabled?: boolean } = {},
 ): TokenHoldingDetailsState => {
   const api = options.api ?? defaultApi
-  const enabled = options.enabled === true && account !== undefined && summary !== undefined
+  const cachedHoldings = summary?.holdings
+  const enabled =
+    options.enabled === true &&
+    account !== undefined &&
+    summary !== undefined &&
+    cachedHoldings === undefined
   const query = useQuery({
     enabled,
     queryKey: ['cip56', 'holdingDetails', account?.id, account?.partyId, summary?.key],
@@ -42,10 +47,10 @@ export const useTokenHoldingDetails = (
 
   return useMemo(
     () => ({
-      holdings: query.data ?? summary?.holdings ?? [],
-      loading: query.isFetching,
+      holdings: query.data ?? cachedHoldings ?? [],
+      loading: cachedHoldings === undefined && query.isFetching,
       ...(error === undefined ? {} : { error }),
     }),
-    [query.data, query.isFetching, summary?.holdings, error],
+    [query.data, query.isFetching, cachedHoldings, error],
   )
 }
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index 10f62450..e34bdd9e 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.test.tsx
@@ -136,6 +136,50 @@ describe('TokensPanel', () => {
     assert.equal(detailsCalls, 1)
   })
 
+  it('reuses fallback UTXO details from the summary response', async () => {
+    // Scenario: when wallet-service falls back from Scan to UTXOs, the summary
+    // already contains raw holdings. Expanding the row must not make another
+    // UTXO request for the same token.
+    let detailsCalls = 0
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [
+        {
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '15.75',
+          utxoCount: 1,
+          lockedCount: 0,
+          unlockedCount: 1,
+          source: 'utxos',
+          holdings: [
+            {
+              contractId: 'cached-holding-cid',
+              interfaceViewValue: {
+                owner: 'alice::party',
+                amount: '15.7500000000',
+                instrumentId: { admin: 'dso::party', id: 'Amulet' },
+                lock: null,
+              },
+            },
+          ],
+        },
+      ],
+      listTokenHoldings: async () => {
+        detailsCalls += 1
+        return []
+      },
+    }
+
+    renderTokens(api)
+
+    await screen.findByText('15.75 Amulet')
+    await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
+
+    assert.equal(screen.getByText('cached-holding-cid').textContent, 'cached-holding-cid')
+    assert.equal(detailsCalls, 0)
+  })
+
   it('shows incoming transfers only when the active party has pending receipts', async () => {
     // Scenario: Tokens combines balances with token actions. Incoming transfers
     // should appear above holdings when pending, and disappear when the API has none.

From 849fd4fb02dd791fbcf3b2ebdd502a5c71aa535b Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 14:45:19 -0300
Subject: [PATCH 30/98] update package-lock.json

---
 package-lock.json | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f0e413e4..876a8790 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -279,7 +279,6 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -2007,7 +2006,6 @@
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.4.tgz",
       "integrity": "sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@grpc/proto-loader": "^0.8.0",
         "@js-sdsl/ordered-map": "^4.4.2"
@@ -2397,7 +2395,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -3895,7 +3892,6 @@
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4100,7 +4096,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
       "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
       }
@@ -4138,7 +4133,6 @@
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4150,7 +4144,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -5172,7 +5165,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5589,7 +5581,6 @@
       "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -6544,8 +6535,7 @@
       "version": "6.2.5",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.5.tgz",
       "integrity": "sha512-eKQkTnS0relYsSOYomx8ozIbmdsQCKUdhyuIaQ2DZgKuaxtyQQMkyD/wlnQN32pO3yutN1b1L8uqwcDKaJd7/Q==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -7747,7 +7737,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8183,7 +8172,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8196,7 +8184,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -9162,7 +9149,6 @@
       "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -9821,6 +9807,23 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
+      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/yargs": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",

From aec8a8921599beafde77b251b1a9a319bd9e8a7e Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 15:03:51 -0300
Subject: [PATCH 31/98] feat(wallet-service): add amulet preapproval rpc

---
 canton-barebones/wallet-service/src/mock.ts   |   8 ++
 canton-barebones/wallet-service/src/rpc.ts    |  75 ++++++++++++
 .../wallet-service/test/mock.test.ts          |  16 +++
 .../wallet-service/test/rpc.test.ts           | 112 ++++++++++++++++++
 4 files changed, 211 insertions(+)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index 4c511da5..19e93e78 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -157,6 +157,11 @@ export const createMockRpc = (
           return rpcResult(id, [])
         case 'cip56.createTransfer':
           return rpcResult(id, { commands: [], disclosedContracts: [] })
+        case 'amulet.preapproval.status':
+          return rpcResult(id, { active: false, expired: false })
+        case 'amulet.preapproval.create':
+        case 'amulet.preapproval.cancel':
+          return rpcResult(id, { commands: [], disclosedContracts: [] })
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -210,6 +215,9 @@ export const createMockRpc = (
       'cip56.listHoldingSummary',
       'cip56.listHoldings',
       'cip56.createTransfer',
+      'amulet.preapproval.status',
+      'amulet.preapproval.create',
+      'amulet.preapproval.cancel',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     network: mockNetworkId(config),
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index d2aecb15..b41ce158 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -94,6 +94,19 @@ type RpcDependencies = {
 }
 
 type Cip56TokenSdk = {
+  amulet?: {
+    preapproval: {
+      command: {
+        create: (args: { parties: { receiver: string } }) => Promise<unknown>
+        cancel: (args: { parties: { receiver: string } }) => Promise<[unknown, unknown[]]>
+      }
+      fetchStatus: (receiver: string) => Promise<{
+        contractId: string
+        templateId: string
+        expiresAt: Date | string
+      } | null>
+    }
+  }
   token: {
     transfer: {
       pending: (partyId: string) => Promise<unknown>
@@ -172,6 +185,14 @@ type TokenHoldingSummary = {
   }
 }
 
+type AmuletPreapprovalStatus = {
+  active: boolean
+  expired: boolean
+  contractId?: string
+  templateId?: string
+  expiresAt?: string
+}
+
 export const rpcResult = (id: JsonRpcId, result: unknown): JsonRpcSuccess => ({
   jsonrpc: '2.0',
   id,
@@ -742,6 +763,51 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     return { commands, disclosedContracts }
   }
 
+  // Normalizes SDK preapproval status into a stable JSON-RPC shape for Carpincho.
+  const amuletPreapprovalStatus = async (params: unknown): Promise<AmuletPreapprovalStatus> => {
+    const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.status')
+    const receiver = requiredStringParam(p, 'receiver')
+    const sdk = await getTokenSdk()
+    const status = await sdk.amulet?.preapproval.fetchStatus(receiver)
+    if (status == null) {
+      return { active: false, expired: false }
+    }
+    const expiresAt = new Date(status.expiresAt)
+    const expiresAtIso = expiresAt.toISOString()
+    const expired = expiresAt.getTime() <= now().getTime()
+    return {
+      contractId: status.contractId,
+      templateId: status.templateId,
+      expiresAt: expiresAtIso,
+      active: !expired,
+      expired,
+    }
+  }
+
+  // Prepares the receiver-signed command that enables automatic Amulet receipts.
+  const amuletPreapprovalCreate = async (
+    params: unknown,
+  ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
+    const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.create')
+    const receiver = requiredStringParam(p, 'receiver')
+    const sdk = await getTokenSdk()
+    const commands = await sdk.amulet?.preapproval.command.create({ parties: { receiver } })
+    return { commands, disclosedContracts: [] }
+  }
+
+  // Prepares the receiver-signed command that disables automatic Amulet receipts.
+  const amuletPreapprovalCancel = async (
+    params: unknown,
+  ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
+    const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.cancel')
+    const receiver = requiredStringParam(p, 'receiver')
+    const sdk = await getTokenSdk()
+    const [commands, disclosedContracts] = (await sdk.amulet?.preapproval.command.cancel({
+      parties: { receiver },
+    })) ?? [null, []]
+    return { commands, disclosedContracts }
+  }
+
   const dispatch = async (id: JsonRpcId, request: JsonRpcRequest): Promise<JsonRpcResponse> => {
     if (request.jsonrpc !== undefined && request.jsonrpc !== '2.0') {
       return rpcError(id, -32600, 'Invalid request', { reason: 'jsonrpc must be "2.0"' })
@@ -782,6 +848,12 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await cip56AcceptTransfer(request.params))
         case 'cip56.createTransfer':
           return rpcResult(id, await cip56CreateTransfer(request.params))
+        case 'amulet.preapproval.status':
+          return rpcResult(id, await amuletPreapprovalStatus(request.params))
+        case 'amulet.preapproval.create':
+          return rpcResult(id, await amuletPreapprovalCreate(request.params))
+        case 'amulet.preapproval.cancel':
+          return rpcResult(id, await amuletPreapprovalCancel(request.params))
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -830,6 +902,9 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'cip56.listHoldingSummary',
       'cip56.acceptTransfer',
       'cip56.createTransfer',
+      'amulet.preapproval.status',
+      'amulet.preapproval.create',
+      'amulet.preapproval.cancel',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
     adminEndpoints: ['POST /admin/party/prepare', 'POST /admin/party/complete'],
diff --git a/canton-barebones/wallet-service/test/mock.test.ts b/canton-barebones/wallet-service/test/mock.test.ts
index 3b97096d..2118d780 100644
--- a/canton-barebones/wallet-service/test/mock.test.ts
+++ b/canton-barebones/wallet-service/test/mock.test.ts
@@ -155,6 +155,22 @@ describe('createMockRpc', () => {
     assert.ok('result' in res)
     assert.deepEqual(res.result, [])
   })
+
+  it('amulet.preapproval.status returns an empty mock status', async () => {
+    // Scenario: mock mode has no Scan or ledger contracts, but Carpincho should
+    // still render the preapproval controls without a method-not-found error.
+    const rpc = createMockRpc(baseConfig())
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.status',
+      params: { receiver: 'alice::mock' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, { active: false, expired: false })
+  })
 })
 
 describe('createMockPartyApi', () => {
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 0f39e760..b677b1e4 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -333,6 +333,118 @@ describe('CIP-56 token helpers', () => {
     })
   })
 
+  it('looks up an Amulet transfer preapproval through the SDK Amulet namespace', async () => {
+    // Scenario: Carpincho needs to know whether the selected party already
+    // allows automatic Amulet receipts before rendering the enable/disable UI.
+    const status = {
+      contractId: 'preapproval-cid-1',
+      templateId: 'Splice.AmuletRules:TransferPreapproval',
+      expiresAt: new Date('2026-06-11T12:00:00.000Z'),
+    }
+    const seen: { receiver?: string } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            fetchStatus: async (receiver: string) => {
+              seen.receiver = receiver
+              return status
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.status',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      contractId: 'preapproval-cid-1',
+      templateId: 'Splice.AmuletRules:TransferPreapproval',
+      expiresAt: '2026-06-11T12:00:00.000Z',
+      active: true,
+      expired: false,
+    })
+    assert.equal(seen.receiver, 'receiver::party')
+  })
+
+  it('prepares an Amulet transfer preapproval create command for the receiver party', async () => {
+    // Scenario: enabling auto-accept must prepare a create command for the
+    // active Carpincho party while leaving signing and execution to Carpincho.
+    const seen: { parties?: unknown } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            command: {
+              create: async (args: unknown) => {
+                seen.parties = (args as { parties?: unknown }).parties
+                return { CreateCommand: { templateId: 'TransferPreapproval' } }
+              },
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.create',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      commands: { CreateCommand: { templateId: 'TransferPreapproval' } },
+      disclosedContracts: [],
+    })
+    assert.deepEqual(seen.parties, { receiver: 'receiver::party' })
+  })
+
+  it('prepares an Amulet transfer preapproval cancel command for the receiver party', async () => {
+    // Scenario: disabling auto-accept must prepare the SDK cancel command and
+    // return any disclosed contracts required by interactive submission.
+    const disclosedContracts = [{ contractId: 'preapproval-context-cid', createdEventBlob: 'blob' }]
+    const seen: { parties?: unknown } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            command: {
+              cancel: async (args: unknown) => {
+                seen.parties = (args as { parties?: unknown }).parties
+                return [
+                  { ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } },
+                  disclosedContracts,
+                ]
+              },
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.cancel',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, {
+      commands: { ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } },
+      disclosedContracts,
+    })
+    assert.deepEqual(seen.parties, { receiver: 'receiver::party' })
+  })
+
   it('lists token holding UTXOs through the SDK token namespace without reshaping contracts', async () => {
     // Scenario: Carpincho needs the active CIP-56 holdings for a party, but the
     // Node-only wallet SDK must stay behind wallet-service. The RPC returns the

From eaf711742d6ee023be3438ebcc2fe7a7a8316777 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:18:34 -0300
Subject: [PATCH 32/98] fix(wallet-service): accept amulet preapproval
 proposals

---
 canton-barebones/wallet-service/src/mock.ts   |   3 +
 canton-barebones/wallet-service/src/rpc.ts    | 197 ++++++++++++++++--
 .../wallet-service/test/rpc.test.ts           | 187 +++++++++++++++--
 3 files changed, 362 insertions(+), 25 deletions(-)

diff --git a/canton-barebones/wallet-service/src/mock.ts b/canton-barebones/wallet-service/src/mock.ts
index 19e93e78..4b10e0c8 100644
--- a/canton-barebones/wallet-service/src/mock.ts
+++ b/canton-barebones/wallet-service/src/mock.ts
@@ -162,6 +162,8 @@ export const createMockRpc = (
         case 'amulet.preapproval.create':
         case 'amulet.preapproval.cancel':
           return rpcResult(id, { commands: [], disclosedContracts: [] })
+        case 'amulet.preapproval.acceptProposal':
+          return rpcResult(id, { updateId: 'mock-amulet-preapproval-accept', completionOffset: 0 })
         case 'prepareExecute':
         case 'prepareExecuteAndWait':
         case 'signMessage':
@@ -217,6 +219,7 @@ export const createMockRpc = (
       'cip56.createTransfer',
       'amulet.preapproval.status',
       'amulet.preapproval.create',
+      'amulet.preapproval.acceptProposal',
       'amulet.preapproval.cancel',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index b41ce158..bff36040 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -96,17 +96,58 @@ type RpcDependencies = {
 type Cip56TokenSdk = {
   amulet?: {
     preapproval: {
+      ctx?: {
+        validatorParty?: string
+        commonCtx?: {
+          defaultSynchronizerId?: string
+        }
+        amuletService?: {
+          scanProxyClient?: {
+            getAmuletRules: () => Promise<AmuletContextContract | null | undefined>
+            getActiveOpenMiningRound: () => Promise<AmuletContextContract | null | undefined>
+          }
+          tokenStandard?: {
+            getInputHoldingsCids: (
+              sender: string,
+              inputUtxos?: string[],
+              amount?: unknown,
+            ) => Promise<string[]>
+          }
+        }
+      }
       command: {
         create: (args: { parties: { receiver: string } }) => Promise<unknown>
         cancel: (args: { parties: { receiver: string } }) => Promise<[unknown, unknown[]]>
       }
-      fetchStatus: (receiver: string) => Promise<{
-        contractId: string
-        templateId: string
-        expiresAt: Date | string
+      fetchQuick: (receiver: string) => Promise<{
+        contract: {
+          contract_id: string
+          template_id: string
+          payload: {
+            expiresAt: Date | string
+          }
+        }
       } | null>
     }
   }
+  ledger?: {
+    acsReader?: {
+      readJsContracts: (options: {
+        parties: string[]
+        templateIds: string[]
+        filterByParty: boolean
+        continueUntilCompletion: boolean
+      }) => Promise<ActiveJsContract[]>
+    }
+    internal?: {
+      submit: (params: {
+        commands: unknown[]
+        disclosedContracts?: unknown[]
+        synchronizerId?: string
+        actAs: string[]
+      }) => Promise<unknown>
+    }
+  }
   token: {
     transfer: {
       pending: (partyId: string) => Promise<unknown>
@@ -135,6 +176,21 @@ type Cip56TokenSdk = {
   }
 }
 
+type AmuletContextContract = {
+  template_id: string
+  contract_id: string
+  created_event_blob: string
+  payload?: {
+    dso?: string
+  }
+}
+
+type ActiveJsContract = {
+  contractId: string
+  templateId: string
+  createArgument?: unknown
+}
+
 type ExecutePreparedParams = {
   partyId?: string
   actAs?: string[]
@@ -193,6 +249,9 @@ type AmuletPreapprovalStatus = {
   expiresAt?: string
 }
 
+const TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID =
+  '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal'
+
 export const rpcResult = (id: JsonRpcId, result: unknown): JsonRpcSuccess => ({
   jsonrpc: '2.0',
   id,
@@ -345,6 +404,26 @@ const instrumentLabel = (instrumentId?: TokenInstrumentId): string => {
   return id === undefined || id === '' ? 'unknown token' : id
 }
 
+// Interactive submission expects a command list, while some SDK helpers return one command object.
+const commandList = (commands: unknown): unknown[] =>
+  Array.isArray(commands) ? commands : commands == null ? [] : [commands]
+
+// Carries Scan context contracts into interactive submission's disclosed-contract format.
+const amuletDisclosedContract = (
+  contract: AmuletContextContract,
+  synchronizerId: string,
+): {
+  templateId: string
+  contractId: string
+  createdEventBlob: string
+  synchronizerId: string
+} => ({
+  templateId: contract.template_id,
+  contractId: contract.contract_id,
+  createdEventBlob: contract.created_event_blob,
+  synchronizerId,
+})
+
 // Parses positive decimal strings without floating point rounding.
 const parseDecimalAmount = (value: string): { scaled: bigint; scale: number } | undefined => {
   const trimmed = value.trim()
@@ -478,6 +557,12 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
         auth,
         registries: [config.splice.registryApiUrl],
       },
+      amulet: {
+        validatorUrl: config.splice.validatorUrl,
+        scanApiUrl: config.splice.scanApiUrl,
+        registryUrl: config.splice.registryApiUrl,
+        auth,
+      },
     })
       .then((sdk) => sdk as Cip56TokenSdk)
       .catch((cause: unknown) => {
@@ -768,23 +853,23 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.status')
     const receiver = requiredStringParam(p, 'receiver')
     const sdk = await getTokenSdk()
-    const status = await sdk.amulet?.preapproval.fetchStatus(receiver)
-    if (status == null) {
+    const status = await sdk.amulet?.preapproval.fetchQuick(receiver)
+    if (status?.contract == null) {
       return { active: false, expired: false }
     }
-    const expiresAt = new Date(status.expiresAt)
+    const expiresAt = new Date(status.contract.payload.expiresAt)
     const expiresAtIso = expiresAt.toISOString()
     const expired = expiresAt.getTime() <= now().getTime()
     return {
-      contractId: status.contractId,
-      templateId: status.templateId,
+      contractId: status.contract.contract_id,
+      templateId: status.contract.template_id,
       expiresAt: expiresAtIso,
       active: !expired,
       expired,
     }
   }
 
-  // Prepares the receiver-signed command that enables automatic Amulet receipts.
+  // Prepares the receiver-signed proposal that asks the validator provider to enable auto-accept.
   const amuletPreapprovalCreate = async (
     params: unknown,
   ): Promise<{ commands: unknown; disclosedContracts: unknown[] }> => {
@@ -792,7 +877,92 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     const receiver = requiredStringParam(p, 'receiver')
     const sdk = await getTokenSdk()
     const commands = await sdk.amulet?.preapproval.command.create({ parties: { receiver } })
-    return { commands, disclosedContracts: [] }
+    return { commands: commandList(commands), disclosedContracts: [] }
+  }
+
+  // Accepts the receiver-created proposal with the locally hosted validator provider party.
+  const amuletPreapprovalAcceptProposal = async (params: unknown): Promise<unknown> => {
+    const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.acceptProposal')
+    const receiver = requiredStringParam(p, 'receiver')
+    const sdk = await getTokenSdk()
+    const ctx = sdk.amulet?.preapproval.ctx
+    const provider = ctx?.validatorParty
+    const synchronizerId = ctx?.commonCtx?.defaultSynchronizerId
+    const scanProxyClient = ctx?.amuletService?.scanProxyClient
+    const tokenStandard = ctx?.amuletService?.tokenStandard
+    const acsReader = sdk.ledger?.acsReader
+    const internalLedger = sdk.ledger?.internal
+    if (provider === undefined || provider.trim() === '') {
+      throw new Error('Amulet validator provider party is unavailable')
+    }
+    if (synchronizerId === undefined || synchronizerId.trim() === '') {
+      throw new Error('Amulet synchronizer id is unavailable')
+    }
+    if (scanProxyClient === undefined || tokenStandard === undefined) {
+      throw new Error('Amulet service context is unavailable')
+    }
+    if (acsReader === undefined || internalLedger === undefined) {
+      throw new Error('Canton ledger context is unavailable')
+    }
+    const proposals = await acsReader.readJsContracts({
+      parties: [provider],
+      templateIds: [TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID],
+      filterByParty: true,
+      continueUntilCompletion: true,
+    })
+    const proposal = proposals.find((contract) => {
+      const createArgument = contract.createArgument
+      return (
+        isPlainObject(createArgument) &&
+        createArgument.receiver === receiver &&
+        createArgument.provider === provider
+      )
+    })
+    if (proposal === undefined) {
+      throw new Error(`TransferPreapprovalProposal not found for receiver ${receiver}`)
+    }
+    const amuletRules = await scanProxyClient.getAmuletRules()
+    const activeRound = await scanProxyClient.getActiveOpenMiningRound()
+    if (amuletRules == null) {
+      throw new Error('AmuletRules contract not found')
+    }
+    if (activeRound == null) {
+      throw new Error('OpenMiningRound active at current moment not found')
+    }
+    const inputHoldings = await tokenStandard.getInputHoldingsCids(provider)
+    const expiresAt =
+      optionalDateParam(p, 'expiresAt') ?? new Date(now().getTime() + 90 * 24 * 60 * 60 * 1000)
+    const commands = [
+      {
+        ExerciseCommand: {
+          templateId: proposal.templateId,
+          contractId: proposal.contractId,
+          choice: 'TransferPreapprovalProposal_Accept',
+          choiceArgument: {
+            context: {
+              context: {
+                openMiningRound: activeRound.contract_id,
+                issuingMiningRounds: [],
+                validatorRights: [],
+                featuredAppRight: null,
+              },
+              amuletRules: amuletRules.contract_id,
+            },
+            inputs: inputHoldings.map((cid) => ({ tag: 'InputAmulet', value: cid })),
+            expiresAt: expiresAt.toISOString(),
+          },
+        },
+      },
+    ]
+    return await internalLedger.submit({
+      commands,
+      disclosedContracts: [
+        amuletDisclosedContract(amuletRules, synchronizerId),
+        amuletDisclosedContract(activeRound, synchronizerId),
+      ],
+      synchronizerId,
+      actAs: [provider],
+    })
   }
 
   // Prepares the receiver-signed command that disables automatic Amulet receipts.
@@ -805,7 +975,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     const [commands, disclosedContracts] = (await sdk.amulet?.preapproval.command.cancel({
       parties: { receiver },
     })) ?? [null, []]
-    return { commands, disclosedContracts }
+    return { commands: commandList(commands), disclosedContracts }
   }
 
   const dispatch = async (id: JsonRpcId, request: JsonRpcRequest): Promise<JsonRpcResponse> => {
@@ -852,6 +1022,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
           return rpcResult(id, await amuletPreapprovalStatus(request.params))
         case 'amulet.preapproval.create':
           return rpcResult(id, await amuletPreapprovalCreate(request.params))
+        case 'amulet.preapproval.acceptProposal':
+          return rpcResult(id, await amuletPreapprovalAcceptProposal(request.params))
         case 'amulet.preapproval.cancel':
           return rpcResult(id, await amuletPreapprovalCancel(request.params))
         case 'prepareExecute':
@@ -904,6 +1076,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
       'cip56.createTransfer',
       'amulet.preapproval.status',
       'amulet.preapproval.create',
+      'amulet.preapproval.acceptProposal',
       'amulet.preapproval.cancel',
     ],
     reservedMethods: ['prepareExecute', 'prepareExecuteAndWait', 'signMessage'],
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index b677b1e4..dcf8e3e9 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -210,10 +210,11 @@ describe('CIP-56 token helpers', () => {
         },
       },
     ]
-    const seen: { partyId?: string; tokenConfig?: unknown } = {}
+    const seen: { partyId?: string; tokenConfig?: unknown; amuletConfig?: unknown } = {}
     const rpc = createRpc(withToken(), {
       sdkFactory: async (options) => {
         seen.tokenConfig = (options as { token?: unknown }).token
+        seen.amuletConfig = (options as { amulet?: unknown }).amulet
         return {
           token: {
             transfer: {
@@ -242,6 +243,12 @@ describe('CIP-56 token helpers', () => {
       auth: { method: 'static', token: 'backend.jwt' },
       registries: ['http://localhost:2000/api/validator/v0/scan-proxy'],
     })
+    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',
+      auth: { method: 'static', token: 'backend.jwt' },
+    })
   })
 
   it('prepares an accept-transfer command through the SDK token namespace', async () => {
@@ -336,19 +343,23 @@ describe('CIP-56 token helpers', () => {
   it('looks up an Amulet transfer preapproval through the SDK Amulet namespace', async () => {
     // Scenario: Carpincho needs to know whether the selected party already
     // allows automatic Amulet receipts before rendering the enable/disable UI.
-    const status = {
-      contractId: 'preapproval-cid-1',
-      templateId: 'Splice.AmuletRules:TransferPreapproval',
-      expiresAt: new Date('2026-06-11T12:00:00.000Z'),
+    const preapproval = {
+      contract: {
+        contract_id: 'preapproval-cid-1',
+        template_id: 'Splice.AmuletRules:TransferPreapproval',
+        payload: {
+          expiresAt: '2026-06-11T12:00:00.000Z',
+        },
+      },
     }
     const seen: { receiver?: string } = {}
     const rpc = createRpc(withToken(), {
       sdkFactory: async () => ({
         amulet: {
           preapproval: {
-            fetchStatus: async (receiver: string) => {
+            fetchQuick: async (receiver: string) => {
               seen.receiver = receiver
-              return status
+              return preapproval
             },
           },
         },
@@ -373,9 +384,38 @@ describe('CIP-56 token helpers', () => {
     assert.equal(seen.receiver, 'receiver::party')
   })
 
-  it('prepares an Amulet transfer preapproval create command for the receiver party', async () => {
-    // Scenario: enabling auto-accept must prepare a create command for the
-    // active Carpincho party while leaving signing and execution to Carpincho.
+  it('returns inactive Amulet preapproval status without waiting when none exists', async () => {
+    // Scenario: the Tokens tab polls this method every few seconds. Missing
+    // preapproval must resolve immediately instead of using the SDK wait helper.
+    const seen: { receiver?: string } = {}
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            fetchQuick: async (receiver: string) => {
+              seen.receiver = receiver
+              return null
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.status',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, { active: false, expired: false })
+    assert.equal(seen.receiver, 'receiver::party')
+  })
+
+  it('prepares an Amulet transfer preapproval proposal create command for the receiver party', async () => {
+    // Scenario: the external receiver can only sign the proposal creation. The
+    // validator provider accepts that proposal in a separate local-party submit.
     const seen: { parties?: unknown } = {}
     const rpc = createRpc(withToken(), {
       sdkFactory: async () => ({
@@ -384,7 +424,7 @@ describe('CIP-56 token helpers', () => {
             command: {
               create: async (args: unknown) => {
                 seen.parties = (args as { parties?: unknown }).parties
-                return { CreateCommand: { templateId: 'TransferPreapproval' } }
+                return { CreateCommand: { templateId: 'TransferPreapprovalProposal' } }
               },
             },
           },
@@ -401,12 +441,133 @@ describe('CIP-56 token helpers', () => {
 
     assert.ok('result' in res)
     assert.deepEqual(res.result, {
-      commands: { CreateCommand: { templateId: 'TransferPreapproval' } },
+      commands: [{ CreateCommand: { templateId: 'TransferPreapprovalProposal' } }],
       disclosedContracts: [],
     })
     assert.deepEqual(seen.parties, { receiver: 'receiver::party' })
   })
 
+  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.
+    const seen: { acs?: unknown; submit?: unknown; inputOwner?: string } = {}
+    const rpc = createRpc(withToken(), {
+      now: () => new Date('2026-06-10T00:00:00.000Z'),
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            ctx: {
+              validatorParty: 'provider::party',
+              commonCtx: { defaultSynchronizerId: 'sync-1' },
+              amuletService: {
+                scanProxyClient: {
+                  getAmuletRules: async () => ({
+                    template_id: '#splice-amulet:Splice.AmuletRules:AmuletRules',
+                    contract_id: 'amulet-rules-cid',
+                    created_event_blob: 'rules-blob',
+                  }),
+                  getActiveOpenMiningRound: async () => ({
+                    template_id: '#splice-amulet:Splice.Round:OpenMiningRound',
+                    contract_id: 'open-round-cid',
+                    created_event_blob: 'round-blob',
+                  }),
+                },
+                tokenStandard: {
+                  getInputHoldingsCids: async (owner: string) => {
+                    seen.inputOwner = owner
+                    return ['provider-holding-cid']
+                  },
+                },
+              },
+            },
+          },
+        },
+        ledger: {
+          acsReader: {
+            readJsContracts: async (options: unknown) => {
+              seen.acs = options
+              return [
+                {
+                  contractId: 'proposal-cid',
+                  templateId:
+                    '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal',
+                  createArgument: {
+                    receiver: 'receiver::party',
+                    provider: 'provider::party',
+                  },
+                },
+              ]
+            },
+          },
+          internal: {
+            submit: async (params: unknown) => {
+              seen.submit = params
+              return { updateId: 'accept-update-1', completionOffset: 42 }
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.acceptProposal',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, { updateId: 'accept-update-1', completionOffset: 42 })
+    assert.deepEqual(seen.acs, {
+      parties: ['provider::party'],
+      templateIds: ['#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal'],
+      filterByParty: true,
+      continueUntilCompletion: true,
+    })
+    assert.deepEqual(seen.submit, {
+      commands: [
+        {
+          ExerciseCommand: {
+            templateId:
+              '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal',
+            contractId: 'proposal-cid',
+            choice: 'TransferPreapprovalProposal_Accept',
+            choiceArgument: {
+              context: {
+                context: {
+                  openMiningRound: 'open-round-cid',
+                  issuingMiningRounds: [],
+                  validatorRights: [],
+                  featuredAppRight: null,
+                },
+                amuletRules: 'amulet-rules-cid',
+              },
+              inputs: [{ tag: 'InputAmulet', value: 'provider-holding-cid' }],
+              expiresAt: '2026-09-08T00:00:00.000Z',
+            },
+          },
+        },
+      ],
+      disclosedContracts: [
+        {
+          templateId: '#splice-amulet:Splice.AmuletRules:AmuletRules',
+          contractId: 'amulet-rules-cid',
+          createdEventBlob: 'rules-blob',
+          synchronizerId: 'sync-1',
+        },
+        {
+          templateId: '#splice-amulet:Splice.Round:OpenMiningRound',
+          contractId: 'open-round-cid',
+          createdEventBlob: 'round-blob',
+          synchronizerId: 'sync-1',
+        },
+      ],
+      synchronizerId: 'sync-1',
+      actAs: ['provider::party'],
+    })
+    assert.equal(seen.inputOwner, 'provider::party')
+  })
+
   it('prepares an Amulet transfer preapproval cancel command for the receiver party', async () => {
     // Scenario: disabling auto-accept must prepare the SDK cancel command and
     // return any disclosed contracts required by interactive submission.
@@ -439,7 +600,7 @@ describe('CIP-56 token helpers', () => {
 
     assert.ok('result' in res)
     assert.deepEqual(res.result, {
-      commands: { ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } },
+      commands: [{ ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } }],
       disclosedContracts,
     })
     assert.deepEqual(seen.parties, { receiver: 'receiver::party' })

From 2cd464ecf95490153e86ef0a9fe7567edad5b52f Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:19:12 -0300
Subject: [PATCH 33/98] feat(carpincho): add amulet preapproval helpers

---
 .../src/cip56/amuletPreapproval.ts            |  75 +++++++
 .../src/hooks/useAmuletPreapproval.ts         | 119 +++++++++++
 .../test/cip56/amuletPreapproval.test.ts      | 197 ++++++++++++++++++
 3 files changed, 391 insertions(+)
 create mode 100644 carpincho-wallet/src/cip56/amuletPreapproval.ts
 create mode 100644 carpincho-wallet/src/hooks/useAmuletPreapproval.ts
 create mode 100644 carpincho-wallet/test/cip56/amuletPreapproval.test.ts

diff --git a/carpincho-wallet/src/cip56/amuletPreapproval.ts b/carpincho-wallet/src/cip56/amuletPreapproval.ts
new file mode 100644
index 00000000..0274957d
--- /dev/null
+++ b/carpincho-wallet/src/cip56/amuletPreapproval.ts
@@ -0,0 +1,75 @@
+import { executePreparedCommands } from '@/api/interactiveSubmission'
+import { walletServiceRequest } from '@/api/walletService'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+export interface AmuletPreapprovalStatus {
+  active: boolean
+  expired: boolean
+  contractId?: string
+  templateId?: string
+  expiresAt?: string
+}
+
+interface AmuletPreapprovalCommands {
+  commands: unknown
+  disclosedContracts?: unknown[]
+}
+
+export interface AmuletPreapprovalActionParams {
+  account: AccountPublic
+  signMessage: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+// Reads the current Amulet auto-accept state for a receiver party.
+export const getAmuletPreapprovalStatus = async (
+  receiver: string,
+): Promise<AmuletPreapprovalStatus> =>
+  await walletServiceRequest<AmuletPreapprovalStatus>('amulet.preapproval.status', { receiver })
+
+// Enables Amulet auto-accept while keeping the receiver signature inside Carpincho.
+export const createAmuletPreapproval = async ({
+  account,
+  signMessage,
+  recordTransaction,
+}: AmuletPreapprovalActionParams): Promise<{ updateId?: string; completionOffset?: number }> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<AmuletPreapprovalCommands>(
+    'amulet.preapproval.create',
+    { receiver: account.partyId },
+  )
+  await executePreparedCommands({
+    account,
+    commands,
+    disclosedContracts,
+    method: 'amulet.preapproval.create',
+    summary: 'Enable Amulet auto-accept',
+    signMessage,
+    recordTransaction,
+  })
+  return await walletServiceRequest<{ updateId?: string; completionOffset?: number }>(
+    'amulet.preapproval.acceptProposal',
+    { receiver: account.partyId },
+  )
+}
+
+// Disables Amulet auto-accept while keeping the receiver signature inside Carpincho.
+export const cancelAmuletPreapproval = async ({
+  account,
+  signMessage,
+  recordTransaction,
+}: AmuletPreapprovalActionParams): Promise<{ updateId?: string; completionOffset?: number }> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<AmuletPreapprovalCommands>(
+    'amulet.preapproval.cancel',
+    { receiver: account.partyId },
+  )
+  return await executePreparedCommands({
+    account,
+    commands,
+    disclosedContracts,
+    method: 'amulet.preapproval.cancel',
+    summary: 'Disable Amulet auto-accept',
+    signMessage,
+    recordTransaction,
+  })
+}
diff --git a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
new file mode 100644
index 00000000..d8b904c7
--- /dev/null
+++ b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
@@ -0,0 +1,119 @@
+import { useQuery } from '@tanstack/react-query'
+import { useCallback, useMemo, useState } from 'react'
+import {
+  type AmuletPreapprovalActionParams,
+  type AmuletPreapprovalStatus,
+  cancelAmuletPreapproval,
+  createAmuletPreapproval,
+  getAmuletPreapprovalStatus,
+} from '@/cip56/amuletPreapproval'
+import type { AccountPublic } from '@/vault/types'
+import type { VaultContextValue } from '@/vault/VaultContext'
+
+export interface AmuletPreapprovalApi {
+  getAmuletPreapprovalStatus: (receiver: string) => Promise<AmuletPreapprovalStatus>
+  createAmuletPreapproval: (
+    params: AmuletPreapprovalActionParams,
+  ) => Promise<{ updateId?: string; completionOffset?: number }>
+  cancelAmuletPreapproval: (
+    params: AmuletPreapprovalActionParams,
+  ) => Promise<{ updateId?: string; completionOffset?: number }>
+}
+
+export interface AmuletPreapprovalState {
+  status?: AmuletPreapprovalStatus
+  loading: boolean
+  busy: boolean
+  error?: string
+  refresh: () => Promise<void>
+  enable: () => Promise<void>
+  disable: () => Promise<void>
+}
+
+export interface AmuletPreapprovalOptions {
+  pollMs?: number | null
+  api?: AmuletPreapprovalApi
+  signMessage?: VaultContextValue['signMessage']
+  recordTransaction?: VaultContextValue['recordTransaction']
+}
+
+const defaultApi: AmuletPreapprovalApi = {
+  getAmuletPreapprovalStatus,
+  createAmuletPreapproval,
+  cancelAmuletPreapproval,
+}
+
+export const AMULET_PREAPPROVAL_POLL_MS = 5_000
+
+// Polls the Amulet receiver preapproval contract because LocalNet has no browser stream for it.
+export const useAmuletPreapproval = (
+  account: AccountPublic | undefined,
+  options: AmuletPreapprovalOptions = {},
+): AmuletPreapprovalState => {
+  const api = options.api ?? defaultApi
+  const [actionBusy, setActionBusy] = useState(false)
+  const pollMs = options.pollMs === undefined ? AMULET_PREAPPROVAL_POLL_MS : options.pollMs
+  const query = useQuery({
+    enabled: account !== undefined,
+    queryKey: ['amulet', 'preapproval', account?.id, account?.partyId],
+    queryFn: () => api.getAmuletPreapprovalStatus(account?.partyId ?? ''),
+    refetchInterval: pollMs === null ? false : pollMs,
+  })
+  const error = query.error instanceof Error ? query.error.message : undefined
+
+  const refresh = useCallback(async (): Promise<void> => {
+    if (account === undefined) {
+      return
+    }
+    await query.refetch()
+  }, [account, query])
+
+  const execute = useCallback(
+    async (action: 'enable' | 'disable'): Promise<void> => {
+      if (account === undefined) {
+        throw new Error('no account selected')
+      }
+      if (options.signMessage === undefined || options.recordTransaction === undefined) {
+        throw new Error('missing signing dependencies')
+      }
+      const params = {
+        account,
+        signMessage: options.signMessage,
+        recordTransaction: options.recordTransaction,
+      }
+      setActionBusy(true)
+      try {
+        if (action === 'enable') {
+          await api.createAmuletPreapproval(params)
+        } else {
+          await api.cancelAmuletPreapproval(params)
+        }
+        await query.refetch()
+      } finally {
+        setActionBusy(false)
+      }
+    },
+    [account, api, options.signMessage, options.recordTransaction, query],
+  )
+
+  const enable = useCallback(async (): Promise<void> => {
+    await execute('enable')
+  }, [execute])
+
+  const disable = useCallback(async (): Promise<void> => {
+    await execute('disable')
+  }, [execute])
+
+  return useMemo(
+    () => ({
+      status: query.data,
+      loading: query.isFetching,
+      busy: query.isRefetching || actionBusy,
+      ...(error === undefined ? {} : { error }),
+      refresh,
+      enable,
+      disable,
+    }),
+    [query.data, query.isFetching, query.isRefetching, actionBusy, error, refresh, enable, disable],
+  )
+}
diff --git a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
new file mode 100644
index 00000000..129ac3ad
--- /dev/null
+++ b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
@@ -0,0 +1,197 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import {
+  cancelAmuletPreapproval,
+  createAmuletPreapproval,
+  getAmuletPreapprovalStatus,
+} from '@/cip56/amuletPreapproval'
+import type { AccountPublic } from '@/vault/types'
+
+const originalFetch = globalThis.fetch
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the self-custodial party enabling automatic Amulet receipts.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+describe('Amulet preapproval helpers', () => {
+  afterEach(() => {
+    // Tests replace the JSON-RPC transport globally, so restore it after each scenario.
+    globalThis.fetch = originalFetch
+    localStorage.clear()
+  })
+
+  it('reads Amulet preapproval status through wallet-service', async () => {
+    // Scenario: Carpincho should display whether the selected receiver party
+    // already has an active TransferPreapproval contract.
+    const methods: string[] = []
+    globalThis.fetch = (async (_input, init) => {
+      const body = JSON.parse(String(init?.body)) as { method: string; params: unknown }
+      methods.push(body.method)
+      assert.deepEqual(body.params, { receiver: 'alice::party' })
+      return new Response(
+        JSON.stringify({
+          result: {
+            active: true,
+            expired: false,
+            contractId: 'preapproval-cid-1',
+            expiresAt: '2026-06-11T12:00:00.000Z',
+          },
+        }),
+        { status: 200 },
+      )
+    }) as typeof globalThis.fetch
+
+    const result = await getAmuletPreapprovalStatus('alice::party')
+
+    assert.deepEqual(methods, ['amulet.preapproval.status'])
+    assert.deepEqual(result, {
+      active: true,
+      expired: false,
+      contractId: 'preapproval-cid-1',
+      expiresAt: '2026-06-11T12:00:00.000Z',
+    })
+  })
+
+  it('creates an Amulet preapproval using Carpincho local signing', async () => {
+    // Scenario: enabling auto-accept prepares the SDK command in wallet-service,
+    // then Carpincho prepares, signs, executes, and records the transaction.
+    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.preapproval.create') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { CreateCommand: { templateId: 'TransferPreapprovalProposal' } },
+              disclosedContracts: [],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-create-tx',
+              preparedTransactionHash: 'prepared-create-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-create-1' } }), {
+          status: 200,
+        })
+      }
+      if (body.method === 'amulet.preapproval.acceptProposal') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-accept-1' } }), {
+          status: 200,
+        })
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+    const recorded: unknown[] = []
+
+    const result = await createAmuletPreapproval({
+      account: ACCOUNT,
+      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-accept-1' })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      [
+        'amulet.preapproval.create',
+        'prepareTransaction',
+        'executePrepared',
+        'amulet.preapproval.acceptProposal',
+      ],
+    )
+    assert.deepEqual(calls[0]?.params, { receiver: 'alice::party' })
+    assert.deepEqual(calls[1]?.params.actAs, ['alice::party'])
+    assert.deepEqual(calls[3]?.params, { receiver: 'alice::party' })
+    assert.equal(
+      (recorded[0] as { method?: string } | undefined)?.method,
+      'amulet.preapproval.create',
+    )
+  })
+
+  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.
+    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.preapproval.cancel') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } },
+              disclosedContracts: [{ contractId: 'preapproval-context-cid' }],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              preparedTransaction: 'prepared-cancel-tx',
+              preparedTransactionHash: 'prepared-cancel-hash',
+              hashingSchemeVersion: 'HASHING_SCHEME_VERSION_V2',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'executePrepared') {
+        return new Response(JSON.stringify({ result: { updateId: 'update-cancel-1' } }), {
+          status: 200,
+        })
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+
+    const result = await cancelAmuletPreapproval({
+      account: ACCOUNT,
+      signMessage: async () => 'signature-base64',
+    })
+
+    assert.deepEqual(result, { updateId: 'update-cancel-1' })
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['amulet.preapproval.cancel', 'prepareTransaction', 'executePrepared'],
+    )
+    assert.deepEqual(calls[0]?.params, { receiver: 'alice::party' })
+    assert.deepEqual(calls[1]?.params.disclosedContracts, [
+      { contractId: 'preapproval-context-cid' },
+    ])
+  })
+})

From 2868e2d6a97894ecded3a9314669c5aa27b62f26 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:19:40 -0300
Subject: [PATCH 34/98] feat(carpincho): add amulet preapproval controls

---
 .../src/components/TokensPanel.tsx            | 102 ++++++++++++-
 .../test/components/TokensPanel.test.tsx      | 137 +++++++++++++++++-
 2 files changed, 236 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index dbcb7c61..3954d28b 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -1,8 +1,11 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
 import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
-import { SecondaryButton } from '@/components/ui/Button'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { toast } from '@/components/ui/toast'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
+import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
@@ -14,6 +17,7 @@ export interface TokensPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
   transfersApi?: Cip56TransferApi
+  preapprovalApi?: AmuletPreapprovalApi
   onPendingTransferCountChange?: (count: number) => void
 }
 
@@ -28,6 +32,11 @@ interface TokenHoldingDetailsProps {
   summary: TokenHoldingSummary
 }
 
+interface AmuletPreapprovalSectionProps {
+  account: AccountPublic
+  api?: AmuletPreapprovalApi
+}
+
 // Keeps raw holding values readable in the expanded UTXO details area.
 const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element => (
   <div className="grid gap-1">
@@ -96,11 +105,95 @@ const TokenHoldingDetails = ({ account, api, summary }: TokenHoldingDetailsProps
   )
 }
 
+// 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 [pendingAction, setPendingAction] = useState<'enable' | 'disable' | undefined>(undefined)
+  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 canDisable = isActive || isExpired
+  const statusLabel = isExpired ? 'Expired' : isActive ? 'Enabled' : 'Disabled'
+  const ActionButton = canDisable ? SecondaryButton : PrimaryButton
+
+  useEffect(() => {
+    if (pendingAction === 'enable' && isActive) {
+      setPendingAction(undefined)
+    }
+    if (pendingAction === 'disable' && status !== undefined && !isActive && !isExpired) {
+      setPendingAction(undefined)
+    }
+  }, [pendingAction, isActive, isExpired, status])
+
+  const handleToggle = async (): Promise<void> => {
+    const action = canDisable ? 'disable' : 'enable'
+    setPendingAction(action)
+    try {
+      if (canDisable) {
+        await preapproval.disable()
+        toast.success('Amulet auto-accept disabled')
+      } else {
+        await preapproval.enable()
+        toast.success('Amulet auto-accept enabled')
+      }
+    } catch (error) {
+      setPendingAction(undefined)
+      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
+    }
+  }
+
+  return (
+    <section 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">
+          <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Amulet auto-accept</h2>
+          <p className="m-0 mt-1 text-[0.82rem] text-muted-foreground">
+            {preapproval.loading && status === undefined ? 'Checking' : statusLabel}
+          </p>
+        </div>
+        <ActionButton
+          className="shrink-0 px-3 py-1.5 text-[0.78rem]"
+          disabled={preapproval.busy || (preapproval.loading && status === undefined)}
+          onClick={handleToggle}
+        >
+          {canDisable ? 'Disable auto-accept' : 'Enable auto-accept'}
+        </ActionButton>
+      </div>
+      {status?.expiresAt === undefined ? null : (
+        <p className="m-0 mt-3 text-[0.78rem] text-muted-foreground">
+          Expires {transferTimeLabel(status.expiresAt)}
+        </p>
+      )}
+      {pendingAction === undefined ? null : (
+        <p className="m-0 mt-3 text-[0.78rem] text-muted-foreground">
+          Puede tardar unos instantes.
+        </p>
+      )}
+      {status?.contractId === undefined ? null : (
+        <p className="m-0 mt-2 break-all font-mono text-[0.74rem] leading-5 text-muted-foreground">
+          {status.contractId}
+        </p>
+      )}
+      {preapproval.error === undefined ? null : (
+        <div className="mt-3 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+          {preapproval.error}
+        </div>
+      )}
+    </section>
+  )
+}
+
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
 export const TokensPanel = ({
   account,
   api,
   transfersApi,
+  preapprovalApi,
   onPendingTransferCountChange,
 }: TokensPanelProps): JSX.Element => {
   const vault = useVault()
@@ -130,6 +223,11 @@ export const TokensPanel = ({
         onPendingCountChange={onPendingTransferCountChange}
       />
 
+      <AmuletPreapprovalSection
+        account={activeAccount}
+        api={preapprovalApi}
+      />
+
       <div className="flex items-center justify-between gap-3 px-1">
         <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Token holdings</h2>
         {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index e34bdd9e..cf603f0a 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.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 { TokensPanel } from '@/components/TokensPanel'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
@@ -45,13 +46,18 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts the panel under vault context so it can resolve the active account.
-const renderTokens = (api: Cip56HoldingsApi, transfersApi?: Cip56TransferApi): void => {
+const renderTokens = (
+  api: Cip56HoldingsApi,
+  transfersApi?: Cip56TransferApi,
+  preapprovalApi?: AmuletPreapprovalApi,
+): void => {
   render(
     <TestQueryClientProvider>
       <VaultContext.Provider value={baseVault()}>
         <TokensPanel
           api={api}
           transfersApi={transfersApi}
+          preapprovalApi={preapprovalApi}
         />
       </VaultContext.Provider>
     </TestQueryClientProvider>,
@@ -243,4 +249,133 @@ describe('TokensPanel', () => {
     assert.equal(screen.queryByText('Incoming transfers'), null)
     assert.equal(screen.queryByText('No pending transfers'), null)
   })
+
+  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 holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: 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')
+      },
+    }
+
+    renderTokens(holdingsApi, undefined, preapprovalApi)
+
+    await screen.findByText('Amulet auto-accept')
+    await screen.findByText('Disabled')
+    await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
+
+    assert.equal(createCalls, 1)
+  })
+
+  it('keeps the polling context visible while Amulet auto-accept is being confirmed', async () => {
+    // Scenario: enabling auto-accept can be committed before Scan reflects the
+    // new TransferPreapproval. The panel should tell the user to wait.
+    let resolveCreate: (() => void) | undefined
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: 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')
+      },
+    }
+
+    renderTokens(holdingsApi, undefined, preapprovalApi)
+
+    await screen.findByText('Disabled')
+    await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
+
+    await screen.findByText('Puede tardar unos instantes.')
+    resolveCreate?.()
+  })
+
+  it('shows active Amulet auto-accept details and disables it for the selected party', async () => {
+    // Scenario: the selected party already has an active receiver preapproval.
+    // The panel should show its expiry and cancel the same receiver preapproval.
+    let cancelCalls = 0
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: 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' }
+      },
+    }
+
+    renderTokens(holdingsApi, undefined, preapprovalApi)
+
+    await screen.findByText('Enabled')
+    await screen.findByText('Expires 2026-06-11 12:00 UTC')
+    await screen.findByText('preapproval-cid-1')
+    await userEvent.click(screen.getByRole('button', { name: 'Disable auto-accept' }))
+
+    assert.equal(cancelCalls, 1)
+  })
+
+  it('marks expired Amulet auto-accept as not active', async () => {
+    // Scenario: a preapproval contract can still exist after its expiry.
+    // The UI should label it expired so the user can clear it before creating a fresh one.
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: 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' }),
+    }
+
+    renderTokens(holdingsApi, undefined, preapprovalApi)
+
+    await screen.findByText('Expired')
+    await screen.findByText('Expires 2026-06-01 12:00 UTC')
+    await screen.findByText('expired-preapproval-cid')
+    assert.ok(screen.getByRole('button', { name: 'Disable auto-accept' }))
+  })
 })

From 88cf0deb5b804b31b0d0f6c4272f499442e8196d Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:39:19 -0300
Subject: [PATCH 35/98] fix(wallet-service): wait for amulet preapproval
 proposals

---
 canton-barebones/wallet-service/src/rpc.ts    | 73 ++++++++++++------
 .../wallet-service/test/rpc.test.ts           | 76 +++++++++++++++++++
 2 files changed, 127 insertions(+), 22 deletions(-)

diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index bff36040..43284f45 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -91,6 +91,16 @@ type RpcDependencies = {
   sdkFactory?: SdkFactory
   fetch?: typeof fetch
   now?: () => Date
+  sleep?: (ms: number) => Promise<void>
+}
+
+type ActiveJsContractReader = {
+  readJsContracts: (options: {
+    parties: string[]
+    templateIds: string[]
+    filterByParty: boolean
+    continueUntilCompletion: boolean
+  }) => Promise<ActiveJsContract[]>
 }
 
 type Cip56TokenSdk = {
@@ -131,14 +141,7 @@ type Cip56TokenSdk = {
     }
   }
   ledger?: {
-    acsReader?: {
-      readJsContracts: (options: {
-        parties: string[]
-        templateIds: string[]
-        filterByParty: boolean
-        continueUntilCompletion: boolean
-      }) => Promise<ActiveJsContract[]>
-    }
+    acsReader?: ActiveJsContractReader
     internal?: {
       submit: (params: {
         commands: unknown[]
@@ -251,6 +254,8 @@ type AmuletPreapprovalStatus = {
 
 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
 
 export const rpcResult = (id: JsonRpcId, result: unknown): JsonRpcSuccess => ({
   jsonrpc: '2.0',
@@ -523,6 +528,12 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     })
   const fetchImpl = deps.fetch ?? fetch
   const now = deps.now ?? (() => new Date())
+  const sleep =
+    deps.sleep ??
+    ((ms) =>
+      new Promise<void>((resolve) => {
+        setTimeout(resolve, ms)
+      }))
   let sdkPromise: Promise<WalletSdk> | undefined
   let tokenSdkPromise: Promise<Cip56TokenSdk> | undefined
 
@@ -880,6 +891,37 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     return { commands: commandList(commands), disclosedContracts: [] }
   }
 
+  // Polls provider ACS until the receiver-signed proposal is assigned to this participant.
+  const findAmuletPreapprovalProposal = async (
+    acsReader: ActiveJsContractReader,
+    receiver: string,
+    provider: string,
+  ): Promise<ActiveJsContract | undefined> => {
+    for (let attempt = 0; attempt < TRANSFER_PREAPPROVAL_PROPOSAL_MAX_ATTEMPTS; attempt += 1) {
+      const proposals = await acsReader.readJsContracts({
+        parties: [provider],
+        templateIds: [TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID],
+        filterByParty: true,
+        continueUntilCompletion: true,
+      })
+      const proposal = proposals.find((contract) => {
+        const createArgument = contract.createArgument
+        return (
+          isPlainObject(createArgument) &&
+          createArgument.receiver === receiver &&
+          createArgument.provider === provider
+        )
+      })
+      if (proposal !== undefined) {
+        return proposal
+      }
+      if (attempt < TRANSFER_PREAPPROVAL_PROPOSAL_MAX_ATTEMPTS - 1) {
+        await sleep(TRANSFER_PREAPPROVAL_PROPOSAL_RETRY_MS)
+      }
+    }
+    return undefined
+  }
+
   // Accepts the receiver-created proposal with the locally hosted validator provider party.
   const amuletPreapprovalAcceptProposal = async (params: unknown): Promise<unknown> => {
     const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.acceptProposal')
@@ -904,20 +946,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     if (acsReader === undefined || internalLedger === undefined) {
       throw new Error('Canton ledger context is unavailable')
     }
-    const proposals = await acsReader.readJsContracts({
-      parties: [provider],
-      templateIds: [TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID],
-      filterByParty: true,
-      continueUntilCompletion: true,
-    })
-    const proposal = proposals.find((contract) => {
-      const createArgument = contract.createArgument
-      return (
-        isPlainObject(createArgument) &&
-        createArgument.receiver === receiver &&
-        createArgument.provider === provider
-      )
-    })
+    const proposal = await findAmuletPreapprovalProposal(acsReader, receiver, provider)
     if (proposal === undefined) {
       throw new Error(`TransferPreapprovalProposal not found for receiver ${receiver}`)
     }
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index dcf8e3e9..b9a0b1f3 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -568,6 +568,82 @@ describe('CIP-56 token helpers', () => {
     assert.equal(seen.inputOwner, 'provider::party')
   })
 
+  it('waits for an Amulet transfer preapproval proposal to become visible before accepting it', async () => {
+    // Scenario: the receiver-signed proposal may not be visible in the provider ACS
+    // immediately after interactive submission execute returns, so acceptance retries briefly.
+    let readCount = 0
+    const slept: number[] = []
+    const rpc = createRpc(withToken(), {
+      now: () => new Date('2026-06-10T00:00:00.000Z'),
+      sleep: async (ms) => {
+        slept.push(ms)
+      },
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            ctx: {
+              validatorParty: 'provider::party',
+              commonCtx: { defaultSynchronizerId: 'sync-1' },
+              amuletService: {
+                scanProxyClient: {
+                  getAmuletRules: async () => ({
+                    template_id: '#splice-amulet:Splice.AmuletRules:AmuletRules',
+                    contract_id: 'amulet-rules-cid',
+                    created_event_blob: 'rules-blob',
+                  }),
+                  getActiveOpenMiningRound: async () => ({
+                    template_id: '#splice-amulet:Splice.Round:OpenMiningRound',
+                    contract_id: 'open-round-cid',
+                    created_event_blob: 'round-blob',
+                  }),
+                },
+                tokenStandard: {
+                  getInputHoldingsCids: async () => ['provider-holding-cid'],
+                },
+              },
+            },
+          },
+        },
+        ledger: {
+          acsReader: {
+            readJsContracts: async () => {
+              readCount += 1
+              if (readCount === 1) {
+                return []
+              }
+              return [
+                {
+                  contractId: 'proposal-cid',
+                  templateId:
+                    '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal',
+                  createArgument: {
+                    receiver: 'receiver::party',
+                    provider: 'provider::party',
+                  },
+                },
+              ]
+            },
+          },
+          internal: {
+            submit: async () => ({ updateId: 'accept-update-1' }),
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.acceptProposal',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, { updateId: 'accept-update-1' })
+    assert.equal(readCount, 2)
+    assert.deepEqual(slept, [1_000])
+  })
+
   it('prepares an Amulet transfer preapproval cancel command for the receiver party', async () => {
     // Scenario: disabling auto-accept must prepare the SDK cancel command and
     // return any disclosed contracts required by interactive submission.

From d12972a09f8790947fe453b1c5b4f3294072b587 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:52:14 -0300
Subject: [PATCH 36/98] fix(wallet-service): read amulet preapproval proposals
 from ACS

---
 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 43284f45..caca1a7c 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -902,7 +902,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
         parties: [provider],
         templateIds: [TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID],
         filterByParty: true,
-        continueUntilCompletion: true,
+        continueUntilCompletion: false,
       })
       const proposal = proposals.find((contract) => {
         const createArgument = contract.createArgument
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index b9a0b1f3..ce55d96e 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -522,7 +522,7 @@ describe('CIP-56 token helpers', () => {
       parties: ['provider::party'],
       templateIds: ['#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal'],
       filterByParty: true,
-      continueUntilCompletion: true,
+      continueUntilCompletion: false,
     })
     assert.deepEqual(seen.submit, {
       commands: [

From be3cc7134e80f9123f5afcb8c2688cd0f50c7476 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 19:55:52 -0300
Subject: [PATCH 37/98] fix(wallet-service): include dso in amulet preapproval
 proposals

---
 canton-barebones/wallet-service/src/rpc.ts    | 45 +++++++++++++++----
 .../wallet-service/test/rpc.test.ts           | 35 ++++++++++++---
 2 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index caca1a7c..538c28cb 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -887,8 +887,31 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.create')
     const receiver = requiredStringParam(p, 'receiver')
     const sdk = await getTokenSdk()
-    const commands = await sdk.amulet?.preapproval.command.create({ parties: { receiver } })
-    return { commands: commandList(commands), disclosedContracts: [] }
+    const ctx = sdk.amulet?.preapproval.ctx
+    const provider = ctx?.validatorParty
+    const scanProxyClient = ctx?.amuletService?.scanProxyClient
+    if (provider === undefined || provider.trim() === '') {
+      throw new Error('Amulet validator provider party is unavailable')
+    }
+    if (scanProxyClient === undefined) {
+      throw new Error('Amulet service context is unavailable')
+    }
+    const amuletRules = await scanProxyClient.getAmuletRules()
+    const expectedDso = amuletRules?.payload?.dso
+    if (expectedDso === undefined || expectedDso.trim() === '') {
+      throw new Error('Amulet DSO party is unavailable')
+    }
+    return {
+      commands: [
+        {
+          CreateCommand: {
+            templateId: TRANSFER_PREAPPROVAL_PROPOSAL_TEMPLATE_ID,
+            createArguments: { provider, receiver, expectedDso },
+          },
+        },
+      ],
+      disclosedContracts: [],
+    }
   }
 
   // Polls provider ACS until the receiver-signed proposal is assigned to this participant.
@@ -896,6 +919,7 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     acsReader: ActiveJsContractReader,
     receiver: string,
     provider: string,
+    expectedDso: string,
   ): Promise<ActiveJsContract | undefined> => {
     for (let attempt = 0; attempt < TRANSFER_PREAPPROVAL_PROPOSAL_MAX_ATTEMPTS; attempt += 1) {
       const proposals = await acsReader.readJsContracts({
@@ -909,7 +933,8 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
         return (
           isPlainObject(createArgument) &&
           createArgument.receiver === receiver &&
-          createArgument.provider === provider
+          createArgument.provider === provider &&
+          createArgument.expectedDso === expectedDso
         )
       })
       if (proposal !== undefined) {
@@ -946,15 +971,19 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     if (acsReader === undefined || internalLedger === undefined) {
       throw new Error('Canton ledger context is unavailable')
     }
-    const proposal = await findAmuletPreapprovalProposal(acsReader, receiver, provider)
-    if (proposal === undefined) {
-      throw new Error(`TransferPreapprovalProposal not found for receiver ${receiver}`)
-    }
     const amuletRules = await scanProxyClient.getAmuletRules()
-    const activeRound = await scanProxyClient.getActiveOpenMiningRound()
     if (amuletRules == null) {
       throw new Error('AmuletRules contract not found')
     }
+    const expectedDso = amuletRules.payload?.dso
+    if (expectedDso === undefined || expectedDso.trim() === '') {
+      throw new Error('Amulet DSO party is unavailable')
+    }
+    const proposal = await findAmuletPreapprovalProposal(acsReader, receiver, provider, expectedDso)
+    if (proposal === undefined) {
+      throw new Error(`TransferPreapprovalProposal not found for receiver ${receiver}`)
+    }
+    const activeRound = await scanProxyClient.getActiveOpenMiningRound()
     if (activeRound == null) {
       throw new Error('OpenMiningRound active at current moment not found')
     }
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index ce55d96e..616682f8 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -416,15 +416,21 @@ describe('CIP-56 token helpers', () => {
   it('prepares an Amulet transfer preapproval proposal create command for the receiver party', async () => {
     // Scenario: the external receiver can only sign the proposal creation. The
     // validator provider accepts that proposal in a separate local-party submit.
-    const seen: { parties?: unknown } = {}
     const rpc = createRpc(withToken(), {
       sdkFactory: async () => ({
         amulet: {
           preapproval: {
-            command: {
-              create: async (args: unknown) => {
-                seen.parties = (args as { parties?: unknown }).parties
-                return { CreateCommand: { templateId: 'TransferPreapprovalProposal' } }
+            ctx: {
+              validatorParty: 'provider::party',
+              amuletService: {
+                scanProxyClient: {
+                  getAmuletRules: async () => ({
+                    template_id: '#splice-amulet:Splice.AmuletRules:AmuletRules',
+                    contract_id: 'amulet-rules-cid',
+                    created_event_blob: 'rules-blob',
+                    payload: { dso: 'DSO::party' },
+                  }),
+                },
               },
             },
           },
@@ -441,10 +447,21 @@ describe('CIP-56 token helpers', () => {
 
     assert.ok('result' in res)
     assert.deepEqual(res.result, {
-      commands: [{ CreateCommand: { templateId: 'TransferPreapprovalProposal' } }],
+      commands: [
+        {
+          CreateCommand: {
+            templateId:
+              '#splice-wallet:Splice.Wallet.TransferPreapproval:TransferPreapprovalProposal',
+            createArguments: {
+              provider: 'provider::party',
+              receiver: 'receiver::party',
+              expectedDso: 'DSO::party',
+            },
+          },
+        },
+      ],
       disclosedContracts: [],
     })
-    assert.deepEqual(seen.parties, { receiver: 'receiver::party' })
   })
 
   it('accepts an Amulet transfer preapproval proposal as the validator provider', async () => {
@@ -465,6 +482,7 @@ describe('CIP-56 token helpers', () => {
                     template_id: '#splice-amulet:Splice.AmuletRules:AmuletRules',
                     contract_id: 'amulet-rules-cid',
                     created_event_blob: 'rules-blob',
+                    payload: { dso: 'DSO::party' },
                   }),
                   getActiveOpenMiningRound: async () => ({
                     template_id: '#splice-amulet:Splice.Round:OpenMiningRound',
@@ -494,6 +512,7 @@ describe('CIP-56 token helpers', () => {
                   createArgument: {
                     receiver: 'receiver::party',
                     provider: 'provider::party',
+                    expectedDso: 'DSO::party',
                   },
                 },
               ]
@@ -590,6 +609,7 @@ describe('CIP-56 token helpers', () => {
                     template_id: '#splice-amulet:Splice.AmuletRules:AmuletRules',
                     contract_id: 'amulet-rules-cid',
                     created_event_blob: 'rules-blob',
+                    payload: { dso: 'DSO::party' },
                   }),
                   getActiveOpenMiningRound: async () => ({
                     template_id: '#splice-amulet:Splice.Round:OpenMiningRound',
@@ -619,6 +639,7 @@ describe('CIP-56 token helpers', () => {
                   createArgument: {
                     receiver: 'receiver::party',
                     provider: 'provider::party',
+                    expectedDso: 'DSO::party',
                   },
                 },
               ]

From b57474ec283ce5be89abad216a7f5ffe86e0162d Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 20:04:56 -0300
Subject: [PATCH 38/98] fix(carpincho): rely on splice preapproval trigger

---
 carpincho-wallet/src/cip56/amuletPreapproval.ts |  6 +-----
 .../test/cip56/amuletPreapproval.test.ts        | 17 +++--------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/carpincho-wallet/src/cip56/amuletPreapproval.ts b/carpincho-wallet/src/cip56/amuletPreapproval.ts
index 0274957d..6f575d6f 100644
--- a/carpincho-wallet/src/cip56/amuletPreapproval.ts
+++ b/carpincho-wallet/src/cip56/amuletPreapproval.ts
@@ -38,7 +38,7 @@ export const createAmuletPreapproval = async ({
     'amulet.preapproval.create',
     { receiver: account.partyId },
   )
-  await executePreparedCommands({
+  return await executePreparedCommands({
     account,
     commands,
     disclosedContracts,
@@ -47,10 +47,6 @@ export const createAmuletPreapproval = async ({
     signMessage,
     recordTransaction,
   })
-  return await walletServiceRequest<{ updateId?: string; completionOffset?: number }>(
-    'amulet.preapproval.acceptProposal',
-    { receiver: account.partyId },
-  )
 }
 
 // Disables Amulet auto-accept while keeping the receiver signature inside Carpincho.
diff --git a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
index 129ac3ad..b0c86c3e 100644
--- a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
+++ b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
@@ -61,7 +61,7 @@ describe('Amulet preapproval helpers', () => {
 
   it('creates an Amulet preapproval using Carpincho local signing', async () => {
     // Scenario: enabling auto-accept prepares the SDK command in wallet-service,
-    // then Carpincho prepares, signs, executes, and records the transaction.
+    // then Carpincho signs the proposal while Splice accepts it asynchronously.
     const calls: Array<{ method: string; params: Record<string, unknown> }> = []
     globalThis.fetch = (async (_input, init) => {
       const body = JSON.parse(String(init?.body)) as {
@@ -97,11 +97,6 @@ describe('Amulet preapproval helpers', () => {
           status: 200,
         })
       }
-      if (body.method === 'amulet.preapproval.acceptProposal') {
-        return new Response(JSON.stringify({ result: { updateId: 'update-accept-1' } }), {
-          status: 200,
-        })
-      }
       throw new Error(`unexpected method ${body.method}`)
     }) as typeof globalThis.fetch
     const recorded: unknown[] = []
@@ -119,19 +114,13 @@ describe('Amulet preapproval helpers', () => {
       },
     })
 
-    assert.deepEqual(result, { updateId: 'update-accept-1' })
+    assert.deepEqual(result, { updateId: 'update-create-1' })
     assert.deepEqual(
       calls.map((call) => call.method),
-      [
-        'amulet.preapproval.create',
-        'prepareTransaction',
-        'executePrepared',
-        'amulet.preapproval.acceptProposal',
-      ],
+      ['amulet.preapproval.create', 'prepareTransaction', 'executePrepared'],
     )
     assert.deepEqual(calls[0]?.params, { receiver: 'alice::party' })
     assert.deepEqual(calls[1]?.params.actAs, ['alice::party'])
-    assert.deepEqual(calls[3]?.params, { receiver: 'alice::party' })
     assert.equal(
       (recorded[0] as { method?: string } | undefined)?.method,
       'amulet.preapproval.create',

From 80ab9691916bd9e746c24938c9de9b2692c8f7b4 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Wed, 10 Jun 2026 20:36:20 -0300
Subject: [PATCH 39/98] fix(amulet): make preapproval disable idempotent

---
 canton-barebones/wallet-service/src/rpc.ts    |  4 +
 .../wallet-service/test/rpc.test.ts           | 33 +++++++
 .../src/cip56/amuletPreapproval.ts            | 41 ++++++--
 .../test/cip56/amuletPreapproval.test.ts      | 96 +++++++++++++++++++
 4 files changed, 165 insertions(+), 9 deletions(-)

diff --git a/canton-barebones/wallet-service/src/rpc.ts b/canton-barebones/wallet-service/src/rpc.ts
index 538c28cb..31c88f63 100644
--- a/canton-barebones/wallet-service/src/rpc.ts
+++ b/canton-barebones/wallet-service/src/rpc.ts
@@ -1030,6 +1030,10 @@ export const createRpc = (config: WalletServiceConfig, deps: RpcDependencies = {
     const p = objectParam<Record<string, unknown>>(params, 'amulet.preapproval.cancel')
     const receiver = requiredStringParam(p, 'receiver')
     const sdk = await getTokenSdk()
+    const status = await sdk.amulet?.preapproval.fetchQuick(receiver)
+    if (status?.contract == null) {
+      return { commands: [], disclosedContracts: [] }
+    }
     const [commands, disclosedContracts] = (await sdk.amulet?.preapproval.command.cancel({
       parties: { receiver },
     })) ?? [null, []]
diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index 616682f8..d2c646eb 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -674,6 +674,7 @@ describe('CIP-56 token helpers', () => {
       sdkFactory: async () => ({
         amulet: {
           preapproval: {
+            fetchQuick: async () => ({ contract: { contract_id: 'preapproval-cid-1' } }),
             command: {
               cancel: async (args: unknown) => {
                 seen.parties = (args as { parties?: unknown }).parties
@@ -703,6 +704,38 @@ describe('CIP-56 token helpers', () => {
     assert.deepEqual(seen.parties, { receiver: 'receiver::party' })
   })
 
+  it('returns no Amulet preapproval cancel command when the receiver is already disabled', async () => {
+    // Scenario: Scan and the ledger can disagree briefly after cancel archives
+    // a TransferPreapproval. A repeated disable must finish as an idempotent no-op.
+    let cancelCalled = false
+    const rpc = createRpc(withToken(), {
+      sdkFactory: async () => ({
+        amulet: {
+          preapproval: {
+            fetchQuick: async () => null,
+            command: {
+              cancel: async () => {
+                cancelCalled = true
+                throw new Error('cancel should not wait for a missing preapproval')
+              },
+            },
+          },
+        },
+      }),
+    })
+
+    const res = (await rpc.handle({
+      jsonrpc: '2.0',
+      id: 1,
+      method: 'amulet.preapproval.cancel',
+      params: { receiver: 'receiver::party' },
+    })) as JsonRpcResponse
+
+    assert.ok('result' in res)
+    assert.deepEqual(res.result, { commands: [], disclosedContracts: [] })
+    assert.equal(cancelCalled, false)
+  })
+
   it('lists token holding UTXOs through the SDK token namespace without reshaping contracts', async () => {
     // Scenario: Carpincho needs the active CIP-56 holdings for a party, but the
     // Node-only wallet SDK must stay behind wallet-service. The RPC returns the
diff --git a/carpincho-wallet/src/cip56/amuletPreapproval.ts b/carpincho-wallet/src/cip56/amuletPreapproval.ts
index 6f575d6f..2cae6a4c 100644
--- a/carpincho-wallet/src/cip56/amuletPreapproval.ts
+++ b/carpincho-wallet/src/cip56/amuletPreapproval.ts
@@ -22,6 +22,16 @@ export interface AmuletPreapprovalActionParams {
   recordTransaction?: VaultContextValue['recordTransaction']
 }
 
+// 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
+
+// Matches stale cancel attempts where the preapproval disappeared before prepare.
+const isMissingPreapprovalError = (error: unknown): boolean => {
+  const message = error instanceof Error ? error.message : String(error)
+  return message.includes('CONTRACT_NOT_FOUND') || message.includes('Contract could not be found')
+}
+
 // Reads the current Amulet auto-accept state for a receiver party.
 export const getAmuletPreapprovalStatus = async (
   receiver: string,
@@ -59,13 +69,26 @@ export const cancelAmuletPreapproval = async ({
     'amulet.preapproval.cancel',
     { receiver: account.partyId },
   )
-  return await executePreparedCommands({
-    account,
-    commands,
-    disclosedContracts,
-    method: 'amulet.preapproval.cancel',
-    summary: 'Disable Amulet auto-accept',
-    signMessage,
-    recordTransaction,
-  })
+  if (!hasCommands(commands)) {
+    return {}
+  }
+  try {
+    return await executePreparedCommands({
+      account,
+      commands,
+      disclosedContracts,
+      method: 'amulet.preapproval.cancel',
+      summary: 'Disable Amulet auto-accept',
+      signMessage,
+      recordTransaction,
+    })
+  } catch (error) {
+    if (isMissingPreapprovalError(error)) {
+      const status = await getAmuletPreapprovalStatus(account.partyId)
+      if (!status.active && !status.expired) {
+        return {}
+      }
+    }
+    throw error
+  }
 }
diff --git a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
index b0c86c3e..d486a555 100644
--- a/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
+++ b/carpincho-wallet/test/cip56/amuletPreapproval.test.ts
@@ -183,4 +183,100 @@ describe('Amulet preapproval helpers', () => {
       { contractId: 'preapproval-context-cid' },
     ])
   })
+
+  it('finishes cancel when the preapproval was already archived before prepare', async () => {
+    // Scenario: Scan can expose a TransferPreapproval contract that is archived
+    // before interactive submission prepares the cancel command. Once status is
+    // inactive, Carpincho should treat the disable action as complete.
+    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.preapproval.cancel') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: { ExerciseCommand: { choice: 'TransferPreapproval_Cancel' } },
+              disclosedContracts: [],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'prepareTransaction') {
+        return new Response(
+          JSON.stringify({
+            error: {
+              code: -32000,
+              message: 'CONTRACT_NOT_FOUND: Contract could not be found',
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      if (body.method === 'amulet.preapproval.status') {
+        return new Response(
+          JSON.stringify({
+            result: { active: false, expired: false },
+          }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+
+    const result = await cancelAmuletPreapproval({
+      account: ACCOUNT,
+      signMessage: async () => {
+        throw new Error('cancel no-op should not request a signature')
+      },
+    })
+
+    assert.deepEqual(result, {})
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['amulet.preapproval.cancel', 'prepareTransaction', 'amulet.preapproval.status'],
+    )
+  })
+
+  it('finishes cancel when wallet-service returns no cancel command', async () => {
+    // Scenario: wallet-service can discover that the receiver is already
+    // disabled before command creation. Carpincho should not prepare or sign.
+    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.preapproval.cancel') {
+        return new Response(
+          JSON.stringify({
+            result: {
+              commands: [],
+              disclosedContracts: [],
+            },
+          }),
+          { status: 200 },
+        )
+      }
+      throw new Error(`unexpected method ${body.method}`)
+    }) as typeof globalThis.fetch
+
+    const result = await cancelAmuletPreapproval({
+      account: ACCOUNT,
+      signMessage: async () => {
+        throw new Error('empty cancel should not request a signature')
+      },
+    })
+
+    assert.deepEqual(result, {})
+    assert.deepEqual(
+      calls.map((call) => call.method),
+      ['amulet.preapproval.cancel'],
+    )
+  })
 })

From dffe2621c93e6f27bb80f5c4ef227fbae2322381 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 11 Jun 2026 09:18:15 -0300
Subject: [PATCH 40/98] fix(carpincho): compact auto-accept contract id

---
 .../src/components/TokensPanel.tsx            | 44 +++++++++++---
 carpincho-wallet/src/utils/clipboard.ts       | 12 +++-
 .../test/components/TokensPanel.test.tsx      | 58 ++++++++++++++++++-
 3 files changed, 99 insertions(+), 15 deletions(-)

diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/TokensPanel.tsx
index 3954d28b..caf836fc 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/TokensPanel.tsx
@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
 import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
-import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { PLAIN_ICON_BUTTON_CLASS, PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { COPY_ICON } from '@/components/ui/icons'
 import { toast } from '@/components/ui/toast'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
@@ -10,6 +11,7 @@ import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
+import { copyText } from '@/utils/clipboard'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
@@ -37,6 +39,18 @@ interface AmuletPreapprovalSectionProps {
   api?: AmuletPreapprovalApi
 }
 
+interface ContractIdRowProps {
+  contractId: string
+}
+
+// Keeps the auto-accept contract id scannable while preserving copy access to the full value.
+const compactContractId = (contractId: string): string => {
+  if (contractId.length <= 10) {
+    return contractId
+  }
+  return `${contractId.slice(0, 4)}..${contractId.slice(-4)}`
+}
+
 // Keeps raw holding values readable in the expanded UTXO details area.
 const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element => (
   <div className="grid gap-1">
@@ -105,6 +119,22 @@ const TokenHoldingDetails = ({ account, api, summary }: TokenHoldingDetailsProps
   )
 }
 
+// Shows the ledger contract id as debug metadata instead of a full-width raw value.
+const ContractIdRow = ({ contractId }: ContractIdRowProps): JSX.Element => (
+  <div className="mt-3 flex min-w-0 items-center gap-1.5 rounded-md border border-border bg-muted px-2 py-1.5 text-[0.74rem] text-muted-foreground">
+    <span className="shrink-0 font-medium">contractId:</span>
+    <span className="min-w-0 font-mono text-foreground">{compactContractId(contractId)}</span>
+    <button
+      type="button"
+      aria-label="Copy contract ID"
+      className={`${PLAIN_ICON_BUTTON_CLASS} ml-auto size-6 shrink-0`}
+      onClick={() => copyText(contractId, 'Contract ID copied')}
+    >
+      {COPY_ICON}
+    </button>
+  </div>
+)
+
 // Lets the receiver opt into Amulet auto-accept without routing signing through wallet-service.
 const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProps): JSX.Element => {
   const vault = useVault()
@@ -170,15 +200,11 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
         </p>
       )}
       {pendingAction === undefined ? null : (
-        <p className="m-0 mt-3 text-[0.78rem] text-muted-foreground">
-          Puede tardar unos instantes.
-        </p>
-      )}
-      {status?.contractId === undefined ? null : (
-        <p className="m-0 mt-2 break-all font-mono text-[0.74rem] leading-5 text-muted-foreground">
-          {status.contractId}
-        </p>
+        <div className="mt-3 rounded-md border border-border bg-muted px-3 py-2 text-[0.78rem] text-muted-foreground">
+          This can take a few moments.
+        </div>
       )}
+      {status?.contractId === undefined ? null : <ContractIdRow contractId={status.contractId} />}
       {preapproval.error === undefined ? null : (
         <div className="mt-3 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
           {preapproval.error}
diff --git a/carpincho-wallet/src/utils/clipboard.ts b/carpincho-wallet/src/utils/clipboard.ts
index 1c782187..3b4ce01a 100644
--- a/carpincho-wallet/src/utils/clipboard.ts
+++ b/carpincho-wallet/src/utils/clipboard.ts
@@ -1,8 +1,14 @@
 import { toast } from '@/components/ui/toast'
 
-export const copyPartyId = (partyId: string): void => {
+// Copies arbitrary wallet text while keeping success and failure feedback consistent.
+export const copyText = (value: string, successMessage: string): void => {
   void navigator.clipboard
-    .writeText(partyId)
-    .then(() => toast.success('Party ID copied'))
+    .writeText(value)
+    .then(() => toast.success(successMessage))
     .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/TokensPanel.test.tsx b/carpincho-wallet/test/components/TokensPanel.test.tsx
index cf603f0a..c2e3d2e1 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/TokensPanel.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 { TokensPanel } from '@/components/TokensPanel'
+import { getToastEntries, toast } from '@/components/ui/toast'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
@@ -65,9 +66,16 @@ const renderTokens = (
 }
 
 describe('TokensPanel', () => {
+  const originalClipboard = globalThis.navigator?.clipboard
+
   afterEach(() => {
     // The panel owns a polling hook; cleanup unmounts it before the next scenario.
     cleanup()
+    toast.clear()
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: originalClipboard,
+      configurable: true,
+    })
   })
 
   it('shows token holding totals and expands UTXO details', async () => {
@@ -311,7 +319,12 @@ describe('TokensPanel', () => {
     await screen.findByText('Disabled')
     await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
 
-    await screen.findByText('Puede tardar unos instantes.')
+    const pendingMessage = await screen.findByText('This can take a few moments.')
+    assert.match(
+      pendingMessage.getAttribute('class') ?? '',
+      /bg-muted/,
+      'pending confirmation should look like an informational state, not a field value',
+    )
     resolveCreate?.()
   })
 
@@ -346,12 +359,51 @@ describe('TokensPanel', () => {
 
     await screen.findByText('Enabled')
     await screen.findByText('Expires 2026-06-11 12:00 UTC')
-    await screen.findByText('preapproval-cid-1')
+    await screen.findByText('prea..id-1')
     await userEvent.click(screen.getByRole('button', { name: 'Disable auto-accept' }))
 
     assert.equal(cancelCalls, 1)
   })
 
+  it('shows a compact copyable Amulet auto-accept contract id', async () => {
+    // Scenario: the active preapproval contract id is useful for debugging, but
+    // it is too long to render as a raw value in the wallet card.
+    const copied: string[] = []
+    const contractId =
+      '000399a68ea61b6f7864584d0c783db8bb6d6ea2ff9f1a3ec923949c787fd0ac27ca1212209fcebb9611ddbf454ed02c9c29d6a4f0f2081be58e636ee00819e750bc9d449c'
+    Object.defineProperty(globalThis.navigator, 'clipboard', {
+      value: { writeText: async (value: string) => void copied.push(value) },
+      configurable: true,
+    })
+    const holdingsApi: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [],
+    }
+    const preapprovalApi: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async () => ({
+        active: true,
+        expired: false,
+        contractId,
+      }),
+      createAmuletPreapproval: async () => {
+        throw new Error('create should not run for an active preapproval')
+      },
+      cancelAmuletPreapproval: async () => ({ updateId: 'cancel-update-1' }),
+    }
+
+    renderTokens(holdingsApi, undefined, preapprovalApi)
+
+    await screen.findByText('contractId:')
+    await screen.findByText('0003..449c')
+    assert.equal(screen.queryByText(contractId), null)
+    await userEvent.click(screen.getByRole('button', { name: 'Copy contract ID' }))
+
+    assert.deepEqual(copied, [contractId])
+    assert.deepEqual(
+      getToastEntries().map((entry) => entry.message),
+      ['Contract ID copied'],
+    )
+  })
+
   it('marks expired Amulet auto-accept as not active', async () => {
     // Scenario: a preapproval contract can still exist after its expiry.
     // The UI should label it expired so the user can clear it before creating a fresh one.
@@ -375,7 +427,7 @@ describe('TokensPanel', () => {
 
     await screen.findByText('Expired')
     await screen.findByText('Expires 2026-06-01 12:00 UTC')
-    await screen.findByText('expired-preapproval-cid')
+    await screen.findByText('expi..-cid')
     assert.ok(screen.getByRole('button', { name: 'Disable auto-accept' }))
   })
 })

From bbf9320f6eef95bd8f1ceb3daaf332449fd5dbe3 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 11 Jun 2026 09:58:40 -0300
Subject: [PATCH 41/98] build: add mermaid cli

---
 package-lock.json | 3266 ++++++++++++++++++++++++++++++++++++++++++---
 package.json      |    1 +
 2 files changed, 3053 insertions(+), 214 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 876a8790..553068a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@biomejs/biome": "2.4.15",
         "@commitlint/cli": "^21.0.1",
         "@commitlint/config-conventional": "^21.0.1",
+        "@mermaid-js/mermaid-cli": "^11.15.0",
         "husky": "^9.1.7",
         "lint-staged": "^17.0.4"
       }
@@ -248,6 +249,20 @@
       "integrity": "sha512-nhCBV3quEgesuf7c7KYfperqSS14T8bYuvJ8PcLJp6znkZpFc0AuW4qBtr8eKVyPPe/8RSr7sglCWPU5eaxwKQ==",
       "license": "MIT"
     },
+    "node_modules/@antfu/install-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
+      "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "package-manager-detector": "^1.3.0",
+        "tinyexec": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.29.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz",
@@ -279,6 +294,7 @@
       "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.7",
         "@babel/generator": "^7.29.7",
@@ -723,6 +739,13 @@
         "node": ">=14.21.3"
       }
     },
+    "node_modules/@braintree/sanitize-url": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-7.1.2.tgz",
+      "integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@canton-dappbooster/canton-barebones": {
       "resolved": "canton-barebones",
       "link": true
@@ -1164,6 +1187,13 @@
         "uuid": "^14.0.0"
       }
     },
+    "node_modules/@chevrotain/types": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.1.2.tgz",
+      "integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@commitlint/cli": {
       "version": "21.0.2",
       "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-21.0.2.tgz",
@@ -1964,6 +1994,22 @@
         "@floating-ui/utils": "^0.2.11"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.27.19",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.19.tgz",
+      "integrity": "sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.8",
+        "@floating-ui/utils": "^0.2.11",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-dom": ">=17.0.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
@@ -2001,11 +2047,22 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fortawesome/fontawesome-free": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-7.2.0.tgz",
+      "integrity": "sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==",
+      "dev": true,
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.14.4",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.14.4.tgz",
       "integrity": "sha512-k9Dj3DV/itK9D06Y8f190Qgop7/Ui+D0njFV3LHMPwPT75DpXLQohE9Wmz0QElrJnzsjB7KPWiKJbOl7IPDArQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@grpc/proto-loader": "^0.8.0",
         "@js-sdsl/ordered-map": "^4.4.2"
@@ -2154,6 +2211,105 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.10",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.10.tgz",
+      "integrity": "sha512-5pVLNK9wlpxTUTy9GpgbX/SdcRh+HBnPktjM2wbiLTH4p+2EPHBO1aoSryUCuKUIItdDWO9ITlhUL8UnUN/oIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.20.2",
+        "@react-aria/interactions": "^3.25.0",
+        "@tanstack/react-virtual": "^3.13.9",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@headlessui/react/node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@headlessui/tailwindcss": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/tailwindcss/-/tailwindcss-0.2.2.tgz",
+      "integrity": "sha512-xNe42KjdyA4kfUKLLPGzME9zkH7Q3rOZ5huFihWNWOQFxnItxPB3/67yBI8/qBfY8nwBRx5GHn4VprsoluVMGw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.0 || ^4.0"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.3.tgz",
+      "integrity": "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "import-meta-resolve": "^4.2.0"
+      }
+    },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.9.tgz",
+      "integrity": "sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -2229,6 +2385,188 @@
         "@lit-labs/ssr-dom-shim": "^1.5.0"
       }
     },
+    "node_modules/@mermaid-js/layout-elk": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/layout-elk/-/layout-elk-0.2.1.tgz",
+      "integrity": "sha512-MX9jwhMyd5zDcFsYcl3duDUkKhjVRUCGEQrdCeNV5hCIR6+3FuDDbRbFmvVbAu15K1+juzsYGG+K8MDvCY1Amg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "d3": "^7.9.0",
+        "elkjs": "^0.9.3"
+      },
+      "peerDependencies": {
+        "mermaid": "^11.0.2"
+      }
+    },
+    "node_modules/@mermaid-js/layout-tidy-tree": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/layout-tidy-tree/-/layout-tidy-tree-0.2.2.tgz",
+      "integrity": "sha512-8RmjDXjKJBxqTS1mICStm8zWRM45fSzs0SOrkp28+KsOGS2YEMFMVTwwRU8CsC6M1L+pDYZVjf1m9AC1c9Wndg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "d3": "^7.9.0"
+      },
+      "peerDependencies": {
+        "mermaid": "^11.0.2"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-cli": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/mermaid-cli/-/mermaid-cli-11.15.0.tgz",
+      "integrity": "sha512-rmz9ELKtmKQvRcYJGI2e509FK9yCBvmEVfHeRSYkleGqo6qqh8LFooxRPCqq04uVx3JHMp9g/vmM85gi/QFFlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-free": "^6.0.0 || ^7.0.1",
+        "@mermaid-js/layout-elk": "^0.1.5 || ^0.2.0",
+        "@mermaid-js/mermaid-zenuml": "^0.2.0",
+        "chalk": "^5.0.1",
+        "commander": "^13.1.0",
+        "import-meta-resolve": "^4.1.0",
+        "katex": "^0.16.25",
+        "mermaid": "^11.14.0",
+        "p-limit": "^6.2.0"
+      },
+      "bin": {
+        "mmdc": "src/cli.js"
+      },
+      "engines": {
+        "node": "^18.19 || >=20.0"
+      },
+      "optionalDependencies": {
+        "@mermaid-js/layout-tidy-tree": "^0.2.1"
+      },
+      "peerDependencies": {
+        "puppeteer": "^23 || ^24"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-cli/node_modules/p-limit": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-6.2.0.tgz",
+      "integrity": "sha512-kuUqqHNUqoIWp/c467RI4X6mmyuojY5jGutNU0wVTmEOOfcuwLqyMVoAi9MKi2Ak+5i9+nhmrK4ufZE8069kHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/mermaid-zenuml/-/mermaid-zenuml-0.2.3.tgz",
+      "integrity": "sha512-RGBtgL6fc+5Y2Jm9odOH9HRJ80BP4l6atBYnAK5bBzEowF0PU3UtvZRRcbFxImPGPuLIzqZq31ur8lVO0AoF3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@zenuml/core": "^3.47.0"
+      },
+      "peerDependencies": {
+        "mermaid": "^10 || ^11"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml/node_modules/@zenuml/core": {
+      "version": "3.49.5",
+      "resolved": "https://registry.npmjs.org/@zenuml/core/-/core-3.49.5.tgz",
+      "integrity": "sha512-cv9n+VnasxOXkObQIXMHBNXm2xdW8CC04oU+VyFKwpKmTKSZZa5rGs3jFleaMbU9VMK04/tpa/2rlCOTdJP8JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.27.16",
+        "@headlessui/react": "^2.2.9",
+        "@headlessui/tailwindcss": "^0.2.2",
+        "antlr4": "~4.11.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "color-string": "^2.1.4",
+        "dompurify": "^3.3.1",
+        "highlight.js": "^11.10.0",
+        "html-to-image": "^1.11.13",
+        "jotai": "^2.16.1",
+        "marked": "^4.3.0",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "tailwind-merge": "^3.4.0"
+      },
+      "bin": {
+        "zenuml": "dist/cli/zenuml.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas": "^0.1.97"
+      },
+      "peerDependencies": {
+        "playwright-core": "1.57.0"
+      },
+      "peerDependenciesMeta": {
+        "playwright-core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml/node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml/node_modules/react": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml/node_modules/react-dom": {
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.7.tgz",
+      "integrity": "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.7"
+      }
+    },
+    "node_modules/@mermaid-js/mermaid-zenuml/node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@mermaid-js/parser": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.1.1.tgz",
+      "integrity": "sha512-VuHdsYMK1bT6X2JbcAaWAhugTRvRBRyuZgd+c22swUeI9g/ntaxF7CY7dYarhZovofCbUNO0G7JesfmNtjYOCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@chevrotain/types": "~11.1.1"
+      }
+    },
     "node_modules/@metamask/rpc-errors": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@metamask/rpc-errors/-/rpc-errors-7.0.3.tgz",
@@ -2308,70 +2646,332 @@
         "node": ">= 18"
       }
     },
-    "node_modules/@noble/ciphers": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
-      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.100.tgz",
+      "integrity": "sha512-xglYA6q3XO5P3BNJYxVZ1IV7DLVjp1Py6nwag88YntrS+3vKHyYcMqXVS4ZztJmwz2uGvz1FWhI/4LgbR5uQDA==",
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "workspaces": [
+        "e2e/*"
+      ],
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 10"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@noble/curves": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.8.0.tgz",
-      "integrity": "sha512-j84kjAbzEnQHaSIhRPUmB3/eVXu2k3dKPl2LOrR8fSOIL+89U+7lV117EWHtq/GHM3ReGHM46iRBdZfpc4HRUQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@noble/hashes": "1.7.0"
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
       },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-arm64": "0.1.100",
+        "@napi-rs/canvas-darwin-x64": "0.1.100",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.100",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.100",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.100",
+        "@napi-rs/canvas-win32-arm64-msvc": "0.1.100",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.100"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.100.tgz",
+      "integrity": "sha512-hjhCKhntPv9+t4ckHymdx0phYNcVW+GKQR6Lzw2zE+pOVjOplSmtx9nNNknTjbEDLcuLZqA1y8ufKg1XfgftzQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 10"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
-    "node_modules/@noble/curves/node_modules/@noble/hashes": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.0.tgz",
-      "integrity": "sha512-HXydb0DgzTpDPwbVeDGCG1gIu7X6+AuU6Zl6av/E/KG8LMsvPntvq+w17CHRpKBmN6Ybdrt1eP3k4cj8DJa78w==",
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.100.tgz",
+      "integrity": "sha512-2PcswRaC7Ly645DGt88///zuFDhJxJYdKAs1uU3mfk1atYkXufgcgLfBpk6Tm12nCQBaNt1wpybuPZ4qOhTo8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 10"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@noble/ed25519": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.1.0.tgz",
-      "integrity": "sha512-pfcObRY3CtvwfaG9Mt5XqZdKmAQppl37tHUeuBhDUbiwJBCVY4/A4lbMvb1xKhMDx96AqAqZpMWuBX1HulhX4g==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
-    "node_modules/@noble/hashes": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
-      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.100.tgz",
+      "integrity": "sha512-ePNZtj7pNIva/siZMg+HmbeozkIjqUIYdoymH8HaA3qK7LfzFN4WMBM8G6HQ9ZC+H3+Dnn5pqtiXpgLykaPOhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": "^14.21.3 || >=16"
+        "node": ">= 10"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
       }
     },
-    "node_modules/@pinojs/redact": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
-      "integrity": "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==",
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.100.tgz",
+      "integrity": "sha512-d5cDB48oWFGU8/XPhUOFAlySgb/VAu7D+s8fi55K1Pcfg8aPplHWqMgibhVLU8ky7Pyg/fuiVLz4Nf3JrSTuUA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.100.tgz",
+      "integrity": "sha512-rDxgxRu69RvDlX/bh9o22DxLsGr8EqsNgotL9+RwQE1S0b0cqeatqsw6aW45mukm0B42DIAaAacKaYQ8cqS1nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.100.tgz",
+      "integrity": "sha512-K3mDW66N+xT2/V439u1alFANiBUjdEx2gLiNYnCmUsva5jZMxWTjafBYwTzYK+EMFMHrUoabuU+T1BIP5CgbYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.100.tgz",
+      "integrity": "sha512-mooqUBTIsccZpnoQC4NgrC1v6C1vof39etLNMnBwCY+p0gajWJvAHLGQ6g/gGyS5YrpDW+GefSN4+Cvcr08UWw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.100.tgz",
+      "integrity": "sha512-1eCvkDCazm7FFhsT7DfGOdSaHgZVK3bt/dSBl5EWHOWmnz+I7j8tPseJqqD81NF+MH21jKUK4wQSDjN0mdhnTg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.100.tgz",
+      "integrity": "sha512-20arT6lnI19S68qNlii73TSEDbECNgzMz2EpldC1V3mZFuRkeujXkcebRk0LRJe9SEUAooYiLokfMViY8IX7yA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-arm64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-arm64-msvc/-/canvas-win32-arm64-msvc-0.1.100.tgz",
+      "integrity": "sha512-DZFFT1wIAg37LJw37yhMRFfjATd3vTQzjZ1Yki8u2vhO6Hi5VE6BVaGQ1aaDu7xb4iMErz+9EOwjpS7xcxFeBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.100",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.100.tgz",
+      "integrity": "sha512-MyT1j3mHC2+Lu4pBi9mKyMJhtP6U7k7EldY7sj/uS5gJA65gTXt8MefJQXLJo5d/vZbuWmfxzkEUNc/urV3pHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      }
+    },
+    "node_modules/@noble/ciphers": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@noble/ciphers/-/ciphers-1.3.0.tgz",
+      "integrity": "sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/curves": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/curves/-/curves-1.8.0.tgz",
+      "integrity": "sha512-j84kjAbzEnQHaSIhRPUmB3/eVXu2k3dKPl2LOrR8fSOIL+89U+7lV117EWHtq/GHM3ReGHM46iRBdZfpc4HRUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@noble/hashes": "1.7.0"
+      },
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/curves/node_modules/@noble/hashes": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.7.0.tgz",
+      "integrity": "sha512-HXydb0DgzTpDPwbVeDGCG1gIu7X6+AuU6Zl6av/E/KG8LMsvPntvq+w17CHRpKBmN6Ybdrt1eP3k4cj8DJa78w==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/ed25519": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.1.0.tgz",
+      "integrity": "sha512-pfcObRY3CtvwfaG9Mt5XqZdKmAQppl37tHUeuBhDUbiwJBCVY4/A4lbMvb1xKhMDx96AqAqZpMWuBX1HulhX4g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@noble/hashes": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.8.0.tgz",
+      "integrity": "sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==",
+      "license": "MIT",
+      "engines": {
+        "node": "^14.21.3 || >=16"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/@pinojs/redact": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@pinojs/redact/-/redact-0.4.0.tgz",
+      "integrity": "sha512-k2ENnmBugE/rzQfEcdWHcCY+/FM3VLzH9cYEsbdsoqrvzAKRhUZeRNhAZvB8OitQJ1TBed3yqWtdjzS6wJKBwg==",
       "license": "MIT"
     },
     "node_modules/@playwright/test": {
@@ -2395,6 +2995,7 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2491,72 +3092,210 @@
       "integrity": "sha512-oOAWABowe8EAbMyWKM0tYDKi8Yaox52D+HWZhAIJqQXbqe0xI/GV7FhLWqlEKreMkfDjshR5FKgi3mnle0h6Eg==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
-      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "license": "MIT"
-    },
-    "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
-      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
-      "license": "MIT",
+    "node_modules/@puppeteer/browsers": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.13.2.tgz",
+      "integrity": "sha512-5EUZSUIc37H6aIXyWO0Z4y8NlF8NnjgmqeQgOGiswAU7pY0HOo16ho4+alIWmSfdZnjqBRawMsP3I5YqLSn6kw==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.1.3"
+        "debug": "^4.4.3",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.5.0",
+        "semver": "^7.7.4",
+        "tar-fs": "^3.1.1",
+        "yargs": "^17.7.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"
+      "bin": {
+        "browsers": "lib/cjs/main-cli.js"
       },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
+      "engines": {
+        "node": ">=18"
       }
     },
-    "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",
-      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+    "node_modules/@puppeteer/browsers/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-slot": "1.2.3"
+        "color-convert": "^2.0.1"
       },
-      "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"
+      "engines": {
+        "node": ">=8"
       },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
-      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
+    "node_modules/@puppeteer/browsers/node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@puppeteer/browsers/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "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-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "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-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
           "optional": true
         }
       }
@@ -3112,6 +3851,47 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.22.1.tgz",
+      "integrity": "sha512-CPxtkyrBi/HYY5P3lE/57sQ6qfa0lN8E55TOm89H0kNGv0lKt+/0zP7lWERzBjRr5IxBVrQX4gFEowBN52LPaA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "react-aria": "^3.48.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.28.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.28.1.tgz",
+      "integrity": "sha512-Bqb+HrD5I5MHS2SKBhISYqo2SW8Y2dfzgF/Y1lIJq7xqLxheo9vzxPGEHhz+XzkgGfoqEJx8A6a3C7uiqS3HWA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-types/shared": "^3.34.0",
+        "@swc/helpers": "^0.5.0",
+        "react-aria": "^3.48.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.35.0.tgz",
+      "integrity": "sha512-iNWvuzEwANttpQpdlu8nPBtdHb0mcCMj1ZTH//iRB5E/14IAnyRlR25rxH7pNLyzHINsPGEKnWvpwDMCT6vziQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -3588,6 +4368,23 @@
         "url": "https://ko-fi.com/dangreen"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@swc/helpers/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/@tailwindcss/node": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.0.tgz",
@@ -3886,12 +4683,42 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.14.2.tgz",
+      "integrity": "sha512-IpWnmCLvuymRfeeLNVXIzNEYBFLpd3drVIS91sqV78VTZFyldlChkOocZRCPp1B+Wnk09bcLNme8WaMU/9/9bQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.17.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.17.0.tgz",
+      "integrity": "sha512-gOxY/hFkPh/XQYhnThBHzkbkX3Ed+z/iushyz+R+JAr213aXxUDgQoTgTdrDpBSRsjFM73P/KfUyWmaF9WHMkQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -3948,6 +4775,13 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tootallnate/quickjs-emscripten": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz",
+      "integrity": "sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/aria-query": {
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
@@ -4031,71 +4865,363 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
-      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/ms": "*"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
-      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+    "node_modules/@types/d3": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
+      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/d3-axis": "*",
+        "@types/d3-brush": "*",
+        "@types/d3-chord": "*",
+        "@types/d3-color": "*",
+        "@types/d3-contour": "*",
+        "@types/d3-delaunay": "*",
+        "@types/d3-dispatch": "*",
+        "@types/d3-drag": "*",
+        "@types/d3-dsv": "*",
+        "@types/d3-ease": "*",
+        "@types/d3-fetch": "*",
+        "@types/d3-force": "*",
+        "@types/d3-format": "*",
+        "@types/d3-geo": "*",
+        "@types/d3-hierarchy": "*",
+        "@types/d3-interpolate": "*",
+        "@types/d3-path": "*",
+        "@types/d3-polygon": "*",
+        "@types/d3-quadtree": "*",
+        "@types/d3-random": "*",
+        "@types/d3-scale": "*",
+        "@types/d3-scale-chromatic": "*",
+        "@types/d3-selection": "*",
+        "@types/d3-shape": "*",
+        "@types/d3-time": "*",
+        "@types/d3-time-format": "*",
+        "@types/d3-timer": "*",
+        "@types/d3-transition": "*",
+        "@types/d3-zoom": "*"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/express": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
-      "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
+    "node_modules/@types/d3-axis": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
+      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^5.0.0",
-        "@types/serve-static": "^2"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/@types/express-serve-static-core": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.1.1.tgz",
-      "integrity": "sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==",
+    "node_modules/@types/d3-brush": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
+      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/node": "*",
-        "@types/qs": "*",
-        "@types/range-parser": "*",
-        "@types/send": "*"
+        "@types/d3-selection": "*"
       }
     },
-    "node_modules/@types/http-errors": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
-      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+    "node_modules/@types/d3-chord": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
+      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/lodash": {
-      "version": "4.17.24",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
-      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
-      "license": "MIT"
-    },
-    "node_modules/@types/ms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
-      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/node": {
+    "node_modules/@types/d3-contour": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
+      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-array": "*",
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.7.tgz",
+      "integrity": "sha512-5o9OIAdKkhN1QItV2oqaE5KMIiXAvDWBDPrD85e58Qlz1c1kI/J0NcqbEG88CoTwJrYe7ntUCVfeUl2UJKbWgA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-polygon": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
+      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-time-format": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
+      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/debug": {
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.13.tgz",
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz",
+      "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/express": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
+      "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "^2"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.1.1.tgz",
+      "integrity": "sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.24",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz",
+      "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
       "version": "25.9.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.1.tgz",
       "integrity": "sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": ">=7.24.0 <7.24.7"
       }
@@ -4133,6 +5259,7 @@
       "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -4144,6 +5271,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -4192,6 +5320,28 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/yauzl": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
+      "integrity": "sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@upsetjs/venn.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@upsetjs/venn.js/-/venn.js-2.0.0.tgz",
+      "integrity": "sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==",
+      "dev": true,
+      "license": "MIT",
+      "optionalDependencies": {
+        "d3-selection": "^3.0.0",
+        "d3-transition": "^3.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -4946,6 +6096,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/agent-base": {
+      "version": "7.1.4",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
+      "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
@@ -5001,6 +6161,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/antlr4": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/antlr4/-/antlr4-4.11.0.tgz",
+      "integrity": "sha512-GUGlpE2JUjAN+G8G5vY+nOoeyNhHsXoIJwP1XF1oRw89vifA1K46T6SEkwLwr7drihN7I/lf0DIjKc4OZvBX8w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5068,6 +6238,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ast-types": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.13.4.tgz",
+      "integrity": "sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ast-types/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/atomic-sleep": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz",
@@ -5077,57 +6267,164 @@
         "node": ">=8.0.0"
       }
     },
-    "node_modules/baseline-browser-mapping": {
-      "version": "2.10.34",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.34.tgz",
-      "integrity": "sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==",
+    "node_modules/bare-events": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.9.1.tgz",
+      "integrity": "sha512-Z0oHEHAFDZkffN8Qc39zNZjQlMDkPJRyyyZieU1VH7u8c5S+qHZ2S8ixdKIAxEjfHO7FJxXmJWgteOghVanIsg==",
       "dev": true,
       "license": "Apache-2.0",
-      "bin": {
-        "baseline-browser-mapping": "dist/cli.cjs"
+      "peerDependencies": {
+        "bare-abort-controller": "*"
       },
-      "engines": {
-        "node": ">=6.0.0"
+      "peerDependenciesMeta": {
+        "bare-abort-controller": {
+          "optional": true
+        }
       }
     },
-    "node_modules/bignumber.js": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-10.0.2.tgz",
-      "integrity": "sha512-E8Wp9O06QA6lneJ4aRUXKYf/1GIomqUEmUMwtIOMtDxf1U52ffJY+y7JBk/8wRafA8qOIqLnXQGqonYXZdBnFQ==",
-      "license": "MIT"
-    },
-    "node_modules/blakejs": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/blakejs/-/blakejs-1.2.1.tgz",
-      "integrity": "sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ==",
-      "license": "MIT"
-    },
-    "node_modules/body-parser": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
-      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
-      "license": "MIT",
+    "node_modules/bare-fs": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.7.2.tgz",
+      "integrity": "sha512-aTvMFUWkBmjzKtEQMDGGDNF8bkfpD5N1b/FCwt7A3wrU4t1o/e/85Wzkluh6JlODCjqVESYCkQCdTXqZ9G7VFg==",
+      "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "bytes": "^3.1.2",
-        "content-type": "^1.0.5",
-        "debug": "^4.4.3",
-        "http-errors": "^2.0.0",
-        "iconv-lite": "^0.7.0",
-        "on-finished": "^2.4.1",
-        "qs": "^6.14.1",
-        "raw-body": "^3.0.1",
-        "type-is": "^2.0.1"
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4",
+        "bare-url": "^2.2.2",
+        "fast-fifo": "^1.3.2"
       },
       "engines": {
-        "node": ">=18"
+        "bare": ">=1.16.0"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
-    "node_modules/bootstrap": {
-      "version": "5.3.8",
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.9.1.tgz",
+      "integrity": "sha512-6M5XjcnsygQNPMCMPXSK379xrJFiZ/AEMNBmFEmQW8d/789VQATvriyi5r0HYTL9TkQ26rn3kgdTG3aisbrXkQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "bare": ">=1.14.0"
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.1.tgz",
+      "integrity": "sha512-ghj2DSK/2e99a1anTVPCV4m4YIYtrbXhfM7V3D7XZLOTsybnYyaJloymGqssQc8l/or0UoDyRtNQkmkEF/ysgQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-os": "^3.0.1"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.13.2",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.13.2.tgz",
+      "integrity": "sha512-2V5j0dOfxv3iIngIWMnW1O6UPXpeoU70HJzUJGVth/+RURhDyq7SEWTD70Y2SkUB0MQonYYWpIX3f85P/I22+Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "streamx": "^2.25.0",
+        "teex": "^1.0.1"
+      },
+      "peerDependencies": {
+        "bare-abort-controller": "*",
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-abort-controller": {
+          "optional": true
+        },
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-url": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/bare-url/-/bare-url-2.4.5.tgz",
+      "integrity": "sha512-K+y9xF1tN+CdPu4qWwr0QiK1Al07eFPGYK5M2pDXcmHdMdgC/tT/bpmMe1hrmRHaidKLkXrC+cRNYf3XVDUhSQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.34",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.34.tgz",
+      "integrity": "sha512-IMDedajPifLnHNY0X9n8hKxRTQ6/eTHwr5bDo04WnuqxyKw6LYtQywCuuqPZwhl3aBXMvQpJov42GLCwRRdQzw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/basic-ftp": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.3.1.tgz",
+      "integrity": "sha512-bopVNp6ugyA150DDuZfPFdt1KZ5a94ZDiwX4hMgZDzF+GttD80lEy8kj98kbyhLXnPvhtIo93mdnLIjpCAeeOw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/bignumber.js": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-10.0.2.tgz",
+      "integrity": "sha512-E8Wp9O06QA6lneJ4aRUXKYf/1GIomqUEmUMwtIOMtDxf1U52ffJY+y7JBk/8wRafA8qOIqLnXQGqonYXZdBnFQ==",
+      "license": "MIT"
+    },
+    "node_modules/blakejs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/blakejs/-/blakejs-1.2.1.tgz",
+      "integrity": "sha512-QXUSXI3QVc/gJME0dBpXrag1kbzOqCjCX8/b54ntNyW6sjtoqxqRk3LTmXzaJoh71zMsDCjM+47jS7XiwN/+fQ==",
+      "license": "MIT"
+    },
+    "node_modules/body-parser": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.2.2.tgz",
+      "integrity": "sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^1.0.5",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.0",
+        "iconv-lite": "^0.7.0",
+        "on-finished": "^2.4.1",
+        "qs": "^6.14.1",
+        "raw-body": "^3.0.1",
+        "type-is": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.8",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
       "integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
       "funding": [
@@ -5165,6 +6462,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5179,6 +6477,16 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-crc32": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/buffer-image-size": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/buffer-image-size/-/buffer-image-size-0.6.4.tgz",
@@ -5299,6 +6607,19 @@
       "resolved": "carpincho-wallet",
       "link": true
     },
+    "node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -5314,6 +6635,43 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-14.0.0.tgz",
+      "integrity": "sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -5445,12 +6803,45 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/color-string": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-2.1.4.tgz",
+      "integrity": "sha512-Bb6Cq8oq0IjDOe8wJmi4JeNn763Xs9cfrBcaylK1tPypWzyoy2G3l90v9k64kjphl/ZJjPIShFztenRomi8WTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/color-string/node_modules/color-name": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.1.0.tgz",
+      "integrity": "sha512-1bPaDNFm0axzE4MEAzKPuqKWeRaT43U/hyxKPBdqTfmPF+d6n7FSoTFxLVULUJOmiLp01KjhIPPH+HrXZJN4Rg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "license": "MIT"
     },
+    "node_modules/commander": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/compare-func": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/compare-func/-/compare-func-2.0.0.tgz",
@@ -5575,12 +6966,23 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/cose-base": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^1.0.0"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz",
       "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -5639,24 +7041,600 @@
         "crc32": "bin/crc32.njs"
       },
       "engines": {
-        "node": ">=0.8"
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crossws": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.3.5.tgz",
+      "integrity": "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==",
+      "license": "MIT",
+      "dependencies": {
+        "uncrypto": "^0.1.3"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/cytoscape": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.34.0.tgz",
+      "integrity": "sha512-62rNSrioXw93uliKFBwjukeQyeWwH2PqDrTac31r2P6464u3AUvTk0xS4LVvT251g7IgkFunrI48ZEZGjywSOg==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/cytoscape-cose-bilkent": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^1.0.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cose-base": "^2.2.0"
+      },
+      "peerDependencies": {
+        "cytoscape": "^3.2.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/cose-base": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "layout-base": "^2.0.0"
+      }
+    },
+    "node_modules/cytoscape-fcose/node_modules/layout-base": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/d3": {
+      "version": "7.9.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "4",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-contour": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-delaunay": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "5"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-sankey": {
+      "version": "0.12.3",
+      "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "1 - 2",
+        "d3-shape": "^1.2.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-sankey/node_modules/d3-shape": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1"
+      }
+    },
+    "node_modules/d3-sankey/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "dev": true,
+      "license": "ISC",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/crossws": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/crossws/-/crossws-0.3.5.tgz",
-      "integrity": "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==",
+    "node_modules/dagre-d3-es": {
+      "version": "7.0.14",
+      "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.14.tgz",
+      "integrity": "sha512-P4rFMVq9ESWqmOgK+dlXvOtLwYg0i7u0HBGJER0LZDJT2VHIPAMZ/riPxqJceWMStH5+E61QxFra9kIS3AqdMg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
-        "uncrypto": "^0.1.3"
+        "d3": "^7.9.0",
+        "lodash-es": "^4.17.21"
       }
     },
-    "node_modules/csstype": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
-      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "devOptional": true,
-      "license": "MIT"
+    "node_modules/data-uri-to-buffer": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-6.0.2.tgz",
+      "integrity": "sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14"
+      }
     },
     "node_modules/dateformat": {
       "version": "4.6.3",
@@ -5711,6 +7689,31 @@
       "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
       "license": "MIT"
     },
+    "node_modules/degenerator": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
+      "integrity": "sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ast-types": "^0.13.4",
+        "escodegen": "^2.1.0",
+        "esprima": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/delaunator": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
+      "integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "robust-predicates": "^3.0.2"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -5758,6 +7761,14 @@
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
       "license": "MIT"
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1608973",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1608973.tgz",
+      "integrity": "sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
     "node_modules/dijkstrajs": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
@@ -5771,6 +7782,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/dompurify": {
+      "version": "3.4.9",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.9.tgz",
+      "integrity": "sha512-4dPSRMRDqHvs0V4YDFCsaIZo4if5u0xM+llyxiM2fwuZFdKArUBAF3VtI2+n8NKg9P870WMdYk0UhqQNoWXbfQ==",
+      "dev": true,
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
     "node_modules/dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -5823,6 +7844,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/elkjs": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.3.tgz",
+      "integrity": "sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==",
+      "dev": true,
+      "license": "EPL-2.0"
+    },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -6005,6 +8033,62 @@
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
       "license": "MIT"
     },
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
+      "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -6066,6 +8150,16 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/events-universal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/events-universal/-/events-universal-1.0.1.tgz",
+      "integrity": "sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bare-events": "^2.7.0"
+      }
+    },
     "node_modules/express": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
@@ -6109,6 +8203,27 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/extract-zip": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
+      "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "debug": "^4.1.1",
+        "get-stream": "^5.1.0",
+        "yauzl": "^2.10.0"
+      },
+      "bin": {
+        "extract-zip": "cli.js"
+      },
+      "engines": {
+        "node": ">= 10.17.0"
+      },
+      "optionalDependencies": {
+        "@types/yauzl": "^2.9.1"
+      }
+    },
     "node_modules/fast-copy": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/fast-copy/-/fast-copy-4.0.3.tgz",
@@ -6122,6 +8237,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz",
+      "integrity": "sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-safe-stringify": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz",
@@ -6154,6 +8276,16 @@
         "node": ">= 4.9.1"
       }
     },
+    "node_modules/fd-slicer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pend": "~1.2.0"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -6340,6 +8472,37 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-stream": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-uri": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/get-uri/-/get-uri-6.0.5.tgz",
+      "integrity": "sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "basic-ftp": "^5.0.2",
+        "data-uri-to-buffer": "^6.0.2",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/git-raw-commits": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/git-raw-commits/-/git-raw-commits-5.0.1.tgz",
@@ -6408,6 +8571,13 @@
         "uncrypto": "^0.1.3"
       }
     },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/happy-dom": {
       "version": "20.10.1",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.10.1.tgz",
@@ -6479,6 +8649,23 @@
       "integrity": "sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==",
       "license": "MIT"
     },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/http-errors": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
@@ -6499,6 +8686,34 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/https-proxy-agent": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
+      "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/husky": {
       "version": "9.1.7",
       "resolved": "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz",
@@ -6535,7 +8750,8 @@
       "version": "6.2.5",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.5.tgz",
       "integrity": "sha512-eKQkTnS0relYsSOYomx8ozIbmdsQCKUdhyuIaQ2DZgKuaxtyQQMkyD/wlnQN32pO3yutN1b1L8uqwcDKaJd7/Q==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/import-fresh": {
       "version": "3.3.1",
@@ -6564,6 +8780,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/import-meta-resolve": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+      "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -6580,6 +8807,26 @@
         "node": "^20.17.0 || >=22.9.0"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ip-address": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.2.0.tgz",
+      "integrity": "sha512-/+S6j4E9AHvW9SWMSEY9Xfy66O5PWvVEJ08O0y5JGyEKQpojb0K0GKpz/v5HJ/G0vi3D2sjGK78119oXZeE0qA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -6669,6 +8916,36 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/jotai": {
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.20.1.tgz",
+      "integrity": "sha512-dnuKfU/GLi8B28RRMjQ3AfoN7kfzP8o41+AX2FmITZqEMY8PHnjABq+VkEooomLwYaGjda+pgy0yFSjaHX/ZPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0",
+        "@babel/template": ">=7.0.0",
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@babel/template": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/joycon": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz",
@@ -6759,12 +9036,52 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.47",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.47.tgz",
+      "integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
+      "dev": true,
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/keyvaluestorage-interface": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/keyvaluestorage-interface/-/keyvaluestorage-interface-1.0.0.tgz",
       "integrity": "sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==",
       "license": "MIT"
     },
+    "node_modules/khroma": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==",
+      "dev": true
+    },
+    "node_modules/layout-base": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -7124,6 +9441,13 @@
       "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
       "license": "MIT"
     },
+    "node_modules/lodash-es": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -7290,6 +9614,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/marked": {
+      "version": "16.4.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-16.4.2.tgz",
+      "integrity": "sha512-TI3V8YYWvkVf3KJe1dRkpnjs68JUPyEa5vjKrp1XEEJUAOaQc+Qj+L1qWbPd0SJuAdQkFU0h73sXXqwDYxsiDA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -7333,6 +9670,37 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mermaid": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.15.0.tgz",
+      "integrity": "sha512-pTMbcf3rWdtLiYGpmoTjHEpeY8seiy6sR+9nD7LOs8KfUbHE4lOUAprTRqRAcWSQ6MQpdX+YEsxShtGsINtPtw==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@braintree/sanitize-url": "^7.1.1",
+        "@iconify/utils": "^3.0.2",
+        "@mermaid-js/parser": "^1.1.1",
+        "@types/d3": "^7.4.3",
+        "@upsetjs/venn.js": "^2.0.0",
+        "cytoscape": "^3.33.1",
+        "cytoscape-cose-bilkent": "^4.1.0",
+        "cytoscape-fcose": "^2.2.0",
+        "d3": "^7.9.0",
+        "d3-sankey": "^0.12.3",
+        "dagre-d3-es": "7.0.14",
+        "dayjs": "^1.11.19",
+        "dompurify": "^3.3.1",
+        "es-toolkit": "^1.45.1",
+        "katex": "^0.16.25",
+        "khroma": "^2.1.0",
+        "marked": "^16.3.0",
+        "roughjs": "^4.6.6",
+        "stylis": "^4.3.6",
+        "ts-dedent": "^2.2.0",
+        "uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0"
+      }
+    },
     "node_modules/micro-ftch": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/micro-ftch/-/micro-ftch-0.3.1.tgz",
@@ -7386,6 +9754,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7426,6 +9801,16 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/netmask": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/netmask/-/netmask-2.1.1.tgz",
+      "integrity": "sha512-eonl3sLUha+S1GzTPxychyhnUzKyeQkZ7jLjKrBagJgPla13F+uQ71HgpFefyHgqrjEbCPkDArxYsjY8/+gLKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/node-fetch-native": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
@@ -7661,9 +10046,50 @@
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
       "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=6"
+      }
+    },
+    "node_modules/pac-proxy-agent": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz",
+      "integrity": "sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/quickjs-emscripten": "^0.23.0",
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "get-uri": "^6.0.1",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.6",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/pac-resolver": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/pac-resolver/-/pac-resolver-7.0.1.tgz",
+      "integrity": "sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "degenerator": "^5.0.0",
+        "netmask": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 14"
       }
     },
+    "node_modules/package-manager-detector": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
+      "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -7705,6 +10131,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-data-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+      "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -7724,6 +10157,13 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/pend": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -7737,6 +10177,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -7846,6 +10287,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
     "node_modules/pony-cause": {
       "version": "2.1.11",
       "resolved": "https://registry.npmjs.org/pony-cause/-/pony-cause-2.1.11.tgz",
@@ -7915,6 +10374,16 @@
       ],
       "license": "MIT"
     },
+    "node_modules/progress": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/protobufjs": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.2.tgz",
@@ -7952,6 +10421,43 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-agent": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
+      "integrity": "sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "http-proxy-agent": "^7.0.1",
+        "https-proxy-agent": "^7.0.6",
+        "lru-cache": "^7.14.1",
+        "pac-proxy-agent": "^7.1.0",
+        "proxy-from-env": "^1.1.0",
+        "socks-proxy-agent": "^8.0.5"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/proxy-agent/node_modules/lru-cache": {
+      "version": "7.18.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.3.tgz",
+      "integrity": "sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pump": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.4.tgz",
@@ -7962,6 +10468,70 @@
         "once": "^1.3.1"
       }
     },
+    "node_modules/puppeteer": {
+      "version": "24.43.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-24.43.1.tgz",
+      "integrity": "sha512-/FSOViCrqRdb1HDocpsM9Z1giA71gTQPUt3SpHGVRALKAy/rJr1fLFYZW9F23qPxqVxTHQnbh/5B5opJST3kAw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "@puppeteer/browsers": "2.13.2",
+        "chromium-bidi": "14.0.0",
+        "cosmiconfig": "^9.0.0",
+        "devtools-protocol": "0.0.1608973",
+        "puppeteer-core": "24.43.1",
+        "typed-query-selector": "^2.12.2"
+      },
+      "bin": {
+        "puppeteer": "lib/cjs/puppeteer/node/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "24.43.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-24.43.1.tgz",
+      "integrity": "sha512-T5ScUMAsmhdNbgDR41AGESYeS6V9MSgetkSnVhhW+gXvzC42VesKCn5ld87gAZDJ6vLHL9GkRvY9WtQWSnwFbw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "2.13.2",
+        "chromium-bidi": "14.0.0",
+        "debug": "^4.4.3",
+        "devtools-protocol": "0.0.1608973",
+        "typed-query-selector": "^2.12.2",
+        "webdriver-bidi-protocol": "0.4.1",
+        "ws": "^8.20.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/ws": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/qrcode": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
@@ -8172,6 +10742,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -8179,11 +10750,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-aria": {
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.49.0.tgz",
+      "integrity": "sha512-4+oK9FwJQWYhyA5zLfj/feOGY0zZbkE1muoF4gyxMroHVypjcYaRSTlJwvxph2zIlxt757KX6xIK2wJ5Aw1Kog==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.47.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -8268,6 +10862,24 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/react-stately": {
+      "version": "3.47.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.47.0.tgz",
+      "integrity": "sha512-H3ar+SOWP920EbVg7qWfP3fZjZiwhlEJAEJQqjt+w8oKijCwFgr0+R4941PIHscOXRNRvEOjvWilitImC0DdBg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.35.0",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -8377,6 +10989,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/robust-predicates": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
+      "integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
+      "dev": true,
+      "license": "Unlicense"
+    },
     "node_modules/rollup": {
       "version": "4.61.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.61.1.tgz",
@@ -8422,6 +11041,19 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
     "node_modules/router": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
@@ -8438,6 +11070,13 @@
         "node": ">= 18"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-stable-stringify": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz",
@@ -8668,6 +11307,47 @@
       "integrity": "sha512-MseHyi2+E/hBRqdOi5COy6wZ7j7DxXRz9NkseavNYSvvWC06D8a5cidVZX3tcG5eCW3NIyVU4zT63hw0Q486jw==",
       "license": "MIT"
     },
+    "node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.9.tgz",
+      "integrity": "sha512-LJhUYUvItdQ0LkJTmPeaEObWXAqFyfmP85x0tch/ez9cahmhlBBLbIqDFnvBnUJGagb0JbIQrkBs1wJ+yRYpEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ip-address": "^10.1.1",
+        "smart-buffer": "^4.2.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/socks-proxy-agent": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.5.tgz",
+      "integrity": "sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.2",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/sonic-boom": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.1.tgz",
@@ -8677,6 +11357,17 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -8705,6 +11396,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/streamx": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.27.0.tgz",
+      "integrity": "sha512-WZ189TKnHoAokYHvwzaAQMpd55cgUmFIcJFzBSgGcb886jau5DL+XdDhTWV4ps3FLvk+OORp0dLRTPsLZ21CSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "events-universal": "^1.0.0",
+        "fast-fifo": "^1.3.2",
+        "text-decoder": "^1.1.0"
+      }
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -8773,6 +11476,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.4.0.tgz",
+      "integrity": "sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tabbable": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+      "integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tagged-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
@@ -8800,7 +11517,8 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.0.tgz",
       "integrity": "sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.3.3",
@@ -8816,6 +11534,84 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.2.tgz",
+      "integrity": "sha512-QGxxTxxyleAdyM3kpFs14ymbYmNFrfY+pHj7Z8FgtbZ7w2//VAgLMac7sT6nRpIHjppXO2AwwEOg0bPFVRcmXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^4.0.1",
+        "bare-path": "^3.0.0"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.2.0.tgz",
+      "integrity": "sha512-ojzvCvVaNp6aOTFmG7jaRD0meowIAuPc3cMMhSgKiVWws1GyHbGd/xvnyuRKcKlMpt3qvxx6r0hreCNITP9hIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "b4a": "^1.6.4",
+        "bare-fs": "^4.5.5",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/tar-stream/node_modules/b4a": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.1.tgz",
+      "integrity": "sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/teex": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/teex/-/teex-1.0.1.tgz",
+      "integrity": "sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "streamx": "^2.12.5"
+      }
+    },
+    "node_modules/text-decoder": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.7.tgz",
+      "integrity": "sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
+    "node_modules/text-decoder/node_modules/b4a": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.8.1.tgz",
+      "integrity": "sha512-aiqre1Nr0B/6DgE2N5vwTc+2/oQZ4Wh1t4NznYY4E00y8LCt6NqdRv81so00oo27D8MVKTpUa/MwUUtBLXCoDw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react-native-b4a": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-native-b4a": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/thread-stream": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/thread-stream/-/thread-stream-4.2.0.tgz",
@@ -8870,6 +11666,16 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/ts-dedent": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.3.0.tgz",
+      "integrity": "sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.10"
+      }
+    },
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -8968,6 +11774,13 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
+      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/typescript": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
@@ -9121,6 +11934,16 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/uuid": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-14.0.0.tgz",
@@ -9149,6 +11972,7 @@
       "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -9717,6 +12541,13 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.1.tgz",
+      "integrity": "sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/whatwg-mimetype": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz",
@@ -9807,23 +12638,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz",
-      "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/eemeli"
-      }
-    },
     "node_modules/yargs": {
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
@@ -9877,6 +12691,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yauzl": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+      "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "buffer-crc32": "~0.2.3",
+        "fd-slicer": "~1.1.0"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz",
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
diff --git a/package.json b/package.json
index 85271070..dc9fb99f 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@biomejs/biome": "2.4.15",
     "@commitlint/cli": "^21.0.1",
     "@commitlint/config-conventional": "^21.0.1",
+    "@mermaid-js/mermaid-cli": "^11.15.0",
     "husky": "^9.1.7",
     "lint-staged": "^17.0.4"
   }

From 752c1a44617dacc6037f75abbdf7db9197dc1a70 Mon Sep 17 00:00:00 2001
From: nicosampler <nf.dominguez.87@gmail.com>
Date: Thu, 11 Jun 2026 09:58:56 -0300
Subject: [PATCH 42/98] docs: fix readme mermaid chart

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 3e9f354f..d6a5ca43 100644
--- a/README.md
+++ b/README.md
@@ -14,8 +14,10 @@ flowchart TD
 
   fe <-->|"Injected CIP-0103 provider<br/>optional WalletConnect"| wallet
   wallet -->|"external-party onboarding"| ws
+  wallet -->|"Scan API / token metadata"| scan
   ws -->|"Bearer CANTON_BACKEND_TOKEN"| au
   au <--> sv
+  sv -->|"indexed Splice read model"| scan
   dar -->|"deploy package"| au
 ```
 

From 354d08b354ac616bb0208f27ddd0155a68cbe914 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 17:20:46 -0300
Subject: [PATCH 43/98] docs: add react-query to carpincho-wallet stack row

---
 architecture.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/architecture.md b/architecture.md
index af9949f7..f32e738d 100644
--- a/architecture.md
+++ b/architecture.md
@@ -5,7 +5,7 @@
 | --- | --- | --- |
 | `canton-barebones/` | Bash + Docker Compose + official Splice LocalNet bundle | Starts `sv + app-user`, health checks, token helper, DAR upload |
 | `canton-barebones/wallet-service/` | Node 24 + Express 5 + TypeScript + `@canton-network/wallet-sdk` | Bridge Carpincho uses for external-party onboarding and participant JSON API calls |
-| `carpincho-wallet/` | Vite 6 + React 18 + Tailwind v4 + Radix UI + WalletConnect + `@noble/ed25519` | CIP-0103 browser wallet, encrypted vault, signer, injected provider |
+| `carpincho-wallet/` | Vite 6 + React 18 + Tailwind v4 + Radix UI + WalletConnect + `@tanstack/react-query` + `@noble/ed25519` | CIP-0103 browser wallet, encrypted vault, signer, injected provider |
 | `dapp/frontend/` | Vite + React + `@canton-network/dapp-sdk` | Example dApp that talks to Carpincho |
 | `dapp/daml/` | DAML | `quickstart-tally` DAR |
 | `dapp/e2e/` | Playwright + TypeScript | Black-box integration tests |

From 2bfdfc51ed7a6b50d40b1364a2aaaf634ca7f3a6 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 17:33:12 -0300
Subject: [PATCH 44/98] docs: sync subproject docs with cip56 token features

---
 canton-barebones/wallet-service/AGENTS.md |  6 +--
 canton-barebones/wallet-service/README.md | 18 ++++++++
 carpincho-wallet/AGENTS.md                |  3 +-
 carpincho-wallet/architecture.md          | 50 +++++++++++++++--------
 4 files changed, 57 insertions(+), 20 deletions(-)

diff --git a/canton-barebones/wallet-service/AGENTS.md b/canton-barebones/wallet-service/AGENTS.md
index e2925c51..a847c895 100644
--- a/canton-barebones/wallet-service/AGENTS.md
+++ b/canton-barebones/wallet-service/AGENTS.md
@@ -4,11 +4,11 @@ This file applies only to `canton-barebones/wallet-service/`. For monorepo-wide
 
 ## Scope
 
-The wallet-service is an app-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, 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 handles wallet-internal party onboarding.
 
 ## Working Rules
 
-- Keep this service app-agnostic. Do not add dApp-specific routes, template IDs, or Tally-specific command logic.
+- Keep this service agnostic to the *consumer dApp*. Canton-standard logic is in scope: CIP-56 token-standard reads/transfers and Amulet (Canton Coin) preapproval — including the Splice/Amulet template ids those require. What stays out is consumer-dApp-specific routes, template ids, or command logic (e.g. Tally).
 - Keep the public dApp-facing API in Carpincho. This service exposes only the HTTP bridge Carpincho needs.
 - Keep wallet-internal party onboarding under `/admin/party/*`, not on the `/rpc` dApp surface.
 - Keep `ledgerApi` as a participant-native pass-through. Do not silently translate request bodies or wrap participant responses.
@@ -19,7 +19,7 @@ The wallet-service is an app-agnostic Express JSON-RPC bridge between Carpincho
 
 - Run tests with `npm test` from this package, or `npm --prefix canton-barebones/wallet-service test` from the repo root.
 - Use `node:test` with `--experimental-strip-types`, matching `package.json`.
-- Cover RPC method shape, mock mode, pending approvals, token minting, party onboarding, and HTTP status behavior.
+- Cover RPC method shape, mock mode, pending approvals, CIP-56 token reads/transfers, Amulet preapproval, party onboarding, and HTTP status behavior.
 
 ## Validation Checklist
 
diff --git a/canton-barebones/wallet-service/README.md b/canton-barebones/wallet-service/README.md
index a9764e59..0956f22b 100644
--- a/canton-barebones/wallet-service/README.md
+++ b/canton-barebones/wallet-service/README.md
@@ -61,6 +61,24 @@ Service-specific methods:
 | `executePrepared`    | Carpincho                       | Submits Carpincho's signature over a prepared transaction to Canton.                                             |
 | `ledgerApi`          | Carpincho on behalf of the dApp | Proxies app-user JSON API reads/writes and injects `CANTON_BACKEND_TOKEN`.                                       |
 
+### CIP-56 token methods
+
+These add Canton token-standard reads and transfers plus Amulet (Canton Coin) preapproval. They are token-standard / Amulet logic, not consumer-dApp logic.
+
+| Method | Purpose |
+| --- | --- |
+| `cip56.listHoldingSummary` | Per-instrument token balance summaries for a party (Amulet summaries via scan proxy; other tokens via holding UTXOs). |
+| `cip56.listHoldings` | Raw token holding UTXOs for a party. |
+| `cip56.listPendingTransfers` | Pending incoming CIP-56 transfer instructions for a party. |
+| `cip56.createTransfer` | Prepares a token transfer for the caller to sign and execute. |
+| `cip56.acceptTransfer` | Prepares acceptance of a pending incoming transfer. |
+| `amulet.preapproval.status` | Reads the Amulet transfer-preapproval (auto-accept) status for a receiver. |
+| `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. |
+
+The write methods (`create*`, `acceptTransfer`, `amulet.preapproval.create/cancel/acceptProposal`) 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/AGENTS.md b/carpincho-wallet/AGENTS.md
index 6da487e6..91d768f5 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -13,9 +13,10 @@ 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-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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 `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`) and `AssetsPanel` (a mocked empty placeholder). 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`. 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-dialog`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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: `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), `TokensPanel` (token balances/holdings plus the embedded `IncomingTransfersSection` and the Amulet preapproval auto-accept toggle), and `SendTokensPanel` (the token transfer form). The Tokens tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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 3 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`). 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, incoming 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/*` |
 | Linting | Biome (root config) | Single root `biome.json` + root `@biomejs/biome`; this project's rules (`@/` alias enforcement, Tailwind CSS parsing) live in a path `override`. Enforced via the root pre-commit hook; run `npm run lint` manually |
 | Node | 24 | inherited from `../.nvmrc` |
 | Naming | camelCase vars/functions, PascalCase components/types, kebab-case files | |
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 467708a9..eeeb2279 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -13,6 +13,7 @@
 | Language | TypeScript 5.9 (strict) | |
 | 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, incoming 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) |
 | 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) |
@@ -24,11 +25,13 @@
 
 ```
 src/
-  api/              JSON-RPC client for the external wallet-service backend
+  api/              JSON-RPC client for the external wallet-service backend, plus
+                    interactiveSubmission.ts (prepare -> local sign -> execute orchestration)
   assets/           SVG brand assets (carpincho-logo.svg)
   components/       Shared UI components (Logo, Header, WelcomeHero, AccountCard,
                     AccountRow, AccountListRow, AccountsDialog, CopyPartyIdButton,
-                    ActivityList, HomeTabs, AssetsPanel, ConnectionFooter,
+                    ActivityList, HomeTabs, TokensPanel, SendTokensPanel,
+                    IncomingTransfersSection, ConnectionFooter,
                     NewPasswordFields, CreateAccountForm, PasswordStrengthIndicator,
                     SecurityPanel, menu/* drawer, ui/* primitives).
                     ui/* wraps Radix headless primitives (Tabs on top of
@@ -38,7 +41,11 @@ src/
                     PendingActionCard).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
-  config/           Runtime config persisted to localStorage (RPC URL, network)
+  cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers,
+                    and Amulet preapproval; calls wallet-service cip56.* / amulet.* RPC
+  hooks/            React Query wrappers over cip56/ (token holdings, incoming transfers,
+                    Amulet preapproval) with polling and imperative refetch
+  config/           Runtime config persisted to localStorage (wallet-service RPC URL)
   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
@@ -107,6 +114,16 @@ Connects the extension popup UI to web pages and the extension background.
 - **`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.
 
+### CIP-56 Token Operations (`src/cip56/` + `src/hooks/` + `src/api/interactiveSubmission.ts`)
+
+Token balances, transfers, and Amulet auto-accept are layered on top of the wallet-service JSON-RPC bridge and React Query.
+
+- **`cip56/holdings.ts`** — Groups raw token UTXOs into per-instrument summaries (`summarizeTokenHoldings`) and exposes `listTokenHoldingSummaries` / `listTokenHoldings`, which call the wallet-service `cip56.listHoldingSummary` / `cip56.listHoldings` methods.
+- **`cip56/transfers.ts`** — `listPendingIncomingTransfers` reads pending CIP-56 transfers; `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 row expands; `useAmuletPreapproval` polls status and exposes `enable()` / `disable()`. `TokensPanel`, `SendTokensPanel`, and `IncomingTransfersSection` consume these hooks.
+
 ### Data Access Layer
 
 The app communicates with two external systems:
@@ -149,7 +166,7 @@ State mutations (unlock, add account, sign) go through `VaultContext`. Network c
 |----------|---------|
 | `VITE_WC_PROJECT_ID` | Optional WalletConnect / Reown project ID (from cloud.reown.com), only needed for the WalletConnect fallback |
 
-Runtime-only configuration (RPC URL, Canton network name) is stored in `localStorage` via `src/config/runtimeConfig.ts` and is not an environment variable.
+Runtime-only configuration (the wallet-service RPC URL) is stored in `localStorage` via `src/config/runtimeConfig.ts` and is not an environment variable. The Canton network identity is no longer stored locally — it comes from wallet-service status.
 
 ## Scripts
 
@@ -170,20 +187,21 @@ Runtime-only configuration (RPC URL, Canton network name) is stored in `localSto
 
 ### Provider / Context Hierarchy
 
-Two React contexts wrap the app. `ThemeProvider` is mounted outermost (in `src/main.tsx`) because theme state is independent of vault state and must apply even on Setup / Unlock screens. `VaultProvider` is mounted by `src/App.tsx`.
+Three providers wrap the app. `ThemeProvider` is mounted outermost (in `src/main.tsx`) because theme state is independent of vault state and must apply even on Setup / Unlock screens. `QueryClientProvider` (a singleton `@tanstack/react-query` client, `refetchOnWindowFocus: false`, `retry: false`) and `VaultProvider` are mounted by `src/App.tsx`.
 
 ```
-<ThemeProvider>           src/theme/ThemeProvider.tsx (mounted in src/main.tsx)
-  <VaultProvider>         src/vault/VaultContext.tsx (mounted in src/App.tsx)
-    <TooltipProvider>     src/components/ui/Tooltip.tsx (mounted in src/App.tsx)
-      <ToastProvider>     src/components/ui/ToastProvider.tsx (mounted in src/App.tsx)
-        <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)
-        </Shell>
-      </ToastProvider>
-    </TooltipProvider>
+<ThemeProvider>             src/theme/ThemeProvider.tsx (mounted in src/main.tsx)
+  <QueryClientProvider>     @tanstack/react-query (mounted in src/App.tsx)
+    <VaultProvider>         src/vault/VaultContext.tsx (mounted in src/App.tsx)
+      <TooltipProvider>     src/components/ui/Tooltip.tsx (mounted in src/App.tsx)
+        <ToastProvider>     src/components/ui/ToastProvider.tsx (mounted in src/App.tsx)
+          <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)
+          </Shell>
+        </ToastProvider>
+      </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.

From c9856011f34bd95c34e0f5d1f027da29d0e91878 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 17:50:58 -0300
Subject: [PATCH 45/98] fix(carpincho): keep connect resilient when
 wallet-service is unreachable

---
 carpincho-wallet/src/provider/status.ts | 42 ++++++++++++++++++-------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/carpincho-wallet/src/provider/status.ts b/carpincho-wallet/src/provider/status.ts
index 489d75c5..911af1e0 100644
--- a/carpincho-wallet/src/provider/status.ts
+++ b/carpincho-wallet/src/provider/status.ts
@@ -8,19 +8,37 @@ export interface ProviderStatus {
 }
 
 // Builds the browser provider status from wallet-service without inventing a local network.
+// Local connection state must not depend on network discovery, so an unreachable
+// wallet-service degrades to "not network connected" rather than failing connect.
 export const buildStatus = async (): Promise<ProviderStatus> => {
-  const remote = await walletServiceStatus()
-  const networkId = remote.network?.networkId?.trim()
-  return {
-    provider: { id: SIGNING_PROVIDER_ID, version: __APP_VERSION__, providerType: 'browser' },
-    connection: {
-      isConnected: true,
-      isNetworkConnected: remote.connection?.isNetworkConnected ?? false,
-      ...(remote.connection?.networkReason === undefined
-        ? {}
-        : { networkReason: remote.connection.networkReason }),
-    },
-    ...(networkId === undefined || networkId === '' ? {} : { network: { networkId } }),
+  const provider = {
+    id: SIGNING_PROVIDER_ID,
+    version: __APP_VERSION__,
+    providerType: 'browser' as const,
+  }
+  try {
+    const remote = await walletServiceStatus()
+    const networkId = remote.network?.networkId?.trim()
+    return {
+      provider,
+      connection: {
+        isConnected: true,
+        isNetworkConnected: remote.connection?.isNetworkConnected ?? false,
+        ...(remote.connection?.networkReason === undefined
+          ? {}
+          : { networkReason: remote.connection.networkReason }),
+      },
+      ...(networkId === undefined || networkId === '' ? {} : { network: { networkId } }),
+    }
+  } catch (error) {
+    return {
+      provider,
+      connection: {
+        isConnected: true,
+        isNetworkConnected: false,
+        networkReason: `wallet-service unavailable: ${(error as Error).message}`,
+      },
+    }
   }
 }
 

From 211b9887452d45a8124ba8332675504ca72cc912 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 17:51:11 -0300
Subject: [PATCH 46/98] test(wallet-service): pin clock in amulet preapproval
 status test

---
 canton-barebones/wallet-service/test/rpc.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/canton-barebones/wallet-service/test/rpc.test.ts b/canton-barebones/wallet-service/test/rpc.test.ts
index d2c646eb..b514a4b2 100644
--- a/canton-barebones/wallet-service/test/rpc.test.ts
+++ b/canton-barebones/wallet-service/test/rpc.test.ts
@@ -354,6 +354,7 @@ describe('CIP-56 token helpers', () => {
     }
     const seen: { receiver?: string } = {}
     const rpc = createRpc(withToken(), {
+      now: () => new Date('2026-06-11T00:00:00.000Z'),
       sdkFactory: async () => ({
         amulet: {
           preapproval: {

From 9eaf8aeb7fe6e1f7f7833842b1ac1651cc27bc65 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 18:03:02 -0300
Subject: [PATCH 47/98] refactor(carpincho): dedupe command/status types and
 query-client setup

---
 carpincho-wallet/src/App.tsx                  | 12 +++-------
 .../src/api/interactiveSubmission.ts          |  8 ++++++-
 .../src/cip56/amuletPreapproval.ts            | 19 +++++++--------
 carpincho-wallet/src/cip56/holdings.ts        | 10 ++------
 carpincho-wallet/src/cip56/transfers.ts       | 24 +++++++------------
 .../src/components/SendTokensPanel.tsx        |  5 ++--
 carpincho-wallet/src/config/queryClient.ts    | 15 ++++++++++++
 .../src/hooks/useAmuletPreapproval.ts         |  5 ++--
 .../src/hooks/usePendingCip56Transfers.ts     |  3 ++-
 .../src/hooks/useWalletServiceStatus.ts       | 20 ++--------------
 .../src/test-utils/queryClient.tsx            | 14 +++--------
 11 files changed, 57 insertions(+), 78 deletions(-)
 create mode 100644 carpincho-wallet/src/config/queryClient.ts

diff --git a/carpincho-wallet/src/App.tsx b/carpincho-wallet/src/App.tsx
index 78bcd551..17c695f9 100644
--- a/carpincho-wallet/src/App.tsx
+++ b/carpincho-wallet/src/App.tsx
@@ -1,10 +1,11 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
 import { Header } from '@/components/Header'
 import { MenuSheet } from '@/components/menu/MenuSheet'
 import { SPINNER_ICON } from '@/components/ui/icons'
 import { ToastProvider } from '@/components/ui/ToastProvider'
 import { TooltipProvider } from '@/components/ui/Tooltip'
+import { createQueryClient } from '@/config/queryClient'
 import { cn } from '@/utils/cn'
 import { useVault } from '@/vault/useVault'
 import type { VaultContextValue } from '@/vault/VaultContext'
@@ -13,14 +14,7 @@ import { HomeView } from '@/views/HomeView'
 import { OnboardingFlow } from '@/views/onboarding/OnboardingFlow'
 import { UnlockView } from '@/views/UnlockView'
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-      retry: false,
-    },
-  },
-})
+const queryClient = createQueryClient()
 
 export type ShellView = 'loading' | 'unlock' | 'onboarding' | 'home'
 
diff --git a/carpincho-wallet/src/api/interactiveSubmission.ts b/carpincho-wallet/src/api/interactiveSubmission.ts
index 10c90492..15059357 100644
--- a/carpincho-wallet/src/api/interactiveSubmission.ts
+++ b/carpincho-wallet/src/api/interactiveSubmission.ts
@@ -13,11 +13,17 @@ interface PreparedTransactionResponse {
   costEstimation?: unknown
 }
 
-interface ExecutePreparedResponse {
+export interface ExecutePreparedResponse {
   updateId?: string
   completionOffset?: number
 }
 
+// Unsigned commands wallet-service returns for Carpincho to sign and execute.
+export interface WalletServiceCommands {
+  commands: unknown
+  disclosedContracts?: unknown[]
+}
+
 export interface ExecutePreparedCommandsParams {
   account: AccountPublic
   commands: unknown
diff --git a/carpincho-wallet/src/cip56/amuletPreapproval.ts b/carpincho-wallet/src/cip56/amuletPreapproval.ts
index 2cae6a4c..9f91ddab 100644
--- a/carpincho-wallet/src/cip56/amuletPreapproval.ts
+++ b/carpincho-wallet/src/cip56/amuletPreapproval.ts
@@ -1,4 +1,8 @@
-import { executePreparedCommands } from '@/api/interactiveSubmission'
+import {
+  type ExecutePreparedResponse,
+  executePreparedCommands,
+  type WalletServiceCommands,
+} from '@/api/interactiveSubmission'
 import { walletServiceRequest } from '@/api/walletService'
 import type { AccountPublic } from '@/vault/types'
 import type { VaultContextValue } from '@/vault/VaultContext'
@@ -11,11 +15,6 @@ export interface AmuletPreapprovalStatus {
   expiresAt?: string
 }
 
-interface AmuletPreapprovalCommands {
-  commands: unknown
-  disclosedContracts?: unknown[]
-}
-
 export interface AmuletPreapprovalActionParams {
   account: AccountPublic
   signMessage: VaultContextValue['signMessage']
@@ -43,8 +42,8 @@ export const createAmuletPreapproval = async ({
   account,
   signMessage,
   recordTransaction,
-}: AmuletPreapprovalActionParams): Promise<{ updateId?: string; completionOffset?: number }> => {
-  const { commands, disclosedContracts } = await walletServiceRequest<AmuletPreapprovalCommands>(
+}: AmuletPreapprovalActionParams): Promise<ExecutePreparedResponse> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<WalletServiceCommands>(
     'amulet.preapproval.create',
     { receiver: account.partyId },
   )
@@ -64,8 +63,8 @@ export const cancelAmuletPreapproval = async ({
   account,
   signMessage,
   recordTransaction,
-}: AmuletPreapprovalActionParams): Promise<{ updateId?: string; completionOffset?: number }> => {
-  const { commands, disclosedContracts } = await walletServiceRequest<AmuletPreapprovalCommands>(
+}: AmuletPreapprovalActionParams): Promise<ExecutePreparedResponse> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<WalletServiceCommands>(
     'amulet.preapproval.cancel',
     { receiver: account.partyId },
   )
diff --git a/carpincho-wallet/src/cip56/holdings.ts b/carpincho-wallet/src/cip56/holdings.ts
index b2ddebcd..a412dc87 100644
--- a/carpincho-wallet/src/cip56/holdings.ts
+++ b/carpincho-wallet/src/cip56/holdings.ts
@@ -1,5 +1,5 @@
 import { walletServiceRequest } from '@/api/walletService'
-import type { TokenInstrumentId } from '@/cip56/transfers'
+import { type TokenInstrumentId, tokenDisplayLabel } from '@/cip56/transfers'
 
 export interface TokenHoldingLock {
   holders?: string[]
@@ -38,12 +38,6 @@ interface ParsedDecimal {
   scale: number
 }
 
-// Keeps token labels readable while preserving admin/id identity in summary keys.
-export const holdingTokenLabel = (instrumentId?: TokenInstrumentId): string =>
-  instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
-    ? 'unknown token'
-    : instrumentId.id.trim()
-
 // Creates a stable grouping key for one token instrument.
 const holdingInstrumentKey = (instrumentId?: TokenInstrumentId): string =>
   `${instrumentId?.admin ?? 'unknown-admin'}:${instrumentId?.id ?? 'unknown-token'}`
@@ -104,7 +98,7 @@ export const summarizeTokenHoldings = (holdings: TokenHolding[]): TokenHoldingSu
       ).length
       return {
         key,
-        tokenLabel: holdingTokenLabel(firstView?.instrumentId),
+        tokenLabel: tokenDisplayLabel(firstView?.instrumentId),
         instrumentId: firstView?.instrumentId,
         totalAmount: sumDecimalAmounts(
           tokenHoldings
diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index dec09b7d..59ee5a7c 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -1,4 +1,8 @@
-import { executePreparedCommands } from '@/api/interactiveSubmission'
+import {
+  type ExecutePreparedResponse,
+  executePreparedCommands,
+  type WalletServiceCommands,
+} from '@/api/interactiveSubmission'
 import { walletServiceRequest } from '@/api/walletService'
 import type { AccountPublic } from '@/vault/types'
 import type { VaultContextValue } from '@/vault/VaultContext'
@@ -33,16 +37,6 @@ export interface PendingTokenTransfer {
   }
 }
 
-interface AcceptTransferCommands {
-  commands: unknown
-  disclosedContracts?: unknown[]
-}
-
-interface CreateTransferCommands {
-  commands: unknown
-  disclosedContracts?: unknown[]
-}
-
 interface AcceptTransferParams {
   account: AccountPublic
   transferInstructionCid: string
@@ -110,8 +104,8 @@ export const acceptPendingTransfer = async ({
   transferInstructionCid,
   signMessage,
   recordTransaction,
-}: AcceptTransferParams): Promise<{ updateId?: string; completionOffset?: number }> => {
-  const { commands, disclosedContracts } = await walletServiceRequest<AcceptTransferCommands>(
+}: AcceptTransferParams): Promise<ExecutePreparedResponse> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<WalletServiceCommands>(
     'cip56.acceptTransfer',
     { transferInstructionCid },
   )
@@ -136,8 +130,8 @@ export const createTokenTransfer = async ({
   expirationDate,
   signMessage,
   recordTransaction,
-}: CreateTokenTransferParams): Promise<{ updateId?: string; completionOffset?: number }> => {
-  const { commands, disclosedContracts } = await walletServiceRequest<CreateTransferCommands>(
+}: CreateTokenTransferParams): Promise<ExecutePreparedResponse> => {
+  const { commands, disclosedContracts } = await walletServiceRequest<WalletServiceCommands>(
     'cip56.createTransfer',
     {
       sender: account.partyId,
diff --git a/carpincho-wallet/src/components/SendTokensPanel.tsx b/carpincho-wallet/src/components/SendTokensPanel.tsx
index 8c5353d5..319eaf18 100644
--- a/carpincho-wallet/src/components/SendTokensPanel.tsx
+++ b/carpincho-wallet/src/components/SendTokensPanel.tsx
@@ -1,4 +1,5 @@
 import { type FormEvent, useEffect, useMemo, useState } from 'react'
+import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
 import { type CreateTokenTransferParams, createTokenTransfer } from '@/cip56/transfers'
 import { PrimaryButton } from '@/components/ui/Button'
 import { TextInput } from '@/components/ui/TextInput'
@@ -11,9 +12,7 @@ import { useVault } from '@/vault/useVault'
 export type TransferDeadline = '1h' | '1d' | '1w' | '1m' | '1y'
 
 export interface Cip56SendApi {
-  createTokenTransfer: (
-    params: CreateTokenTransferParams,
-  ) => Promise<{ updateId?: string; completionOffset?: number }>
+  createTokenTransfer: (params: CreateTokenTransferParams) => Promise<ExecutePreparedResponse>
 }
 
 export interface SendTokensPanelProps {
diff --git a/carpincho-wallet/src/config/queryClient.ts b/carpincho-wallet/src/config/queryClient.ts
new file mode 100644
index 00000000..33a59ba2
--- /dev/null
+++ b/carpincho-wallet/src/config/queryClient.ts
@@ -0,0 +1,15 @@
+import { QueryClient, type QueryClientConfig } from '@tanstack/react-query'
+
+type QueryDefaults = NonNullable<QueryClientConfig['defaultOptions']>['queries']
+
+// Shared TanStack Query policy: server state is polled explicitly, never on focus or retry.
+export const createQueryClient = (queries: QueryDefaults = {}): QueryClient =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        refetchOnWindowFocus: false,
+        retry: false,
+        ...queries,
+      },
+    },
+  })
diff --git a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
index d8b904c7..7a230e37 100644
--- a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
+++ b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { useCallback, useMemo, useState } from 'react'
+import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
 import {
   type AmuletPreapprovalActionParams,
   type AmuletPreapprovalStatus,
@@ -14,10 +15,10 @@ export interface AmuletPreapprovalApi {
   getAmuletPreapprovalStatus: (receiver: string) => Promise<AmuletPreapprovalStatus>
   createAmuletPreapproval: (
     params: AmuletPreapprovalActionParams,
-  ) => Promise<{ updateId?: string; completionOffset?: number }>
+  ) => Promise<ExecutePreparedResponse>
   cancelAmuletPreapproval: (
     params: AmuletPreapprovalActionParams,
-  ) => Promise<{ updateId?: string; completionOffset?: number }>
+  ) => Promise<ExecutePreparedResponse>
 }
 
 export interface AmuletPreapprovalState {
diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
index 83144c31..945e04d0 100644
--- a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
+import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
 import {
   acceptPendingTransfer,
   listPendingIncomingTransfers,
@@ -15,7 +16,7 @@ export interface Cip56TransferApi {
     transferInstructionCid: string
     signMessage: VaultContextValue['signMessage']
     recordTransaction: VaultContextValue['recordTransaction']
-  }) => Promise<{ updateId?: string; completionOffset?: number }>
+  }) => Promise<ExecutePreparedResponse>
 }
 
 export interface PendingCip56TransfersState {
diff --git a/carpincho-wallet/src/hooks/useWalletServiceStatus.ts b/carpincho-wallet/src/hooks/useWalletServiceStatus.ts
index 763059a2..c79730bb 100644
--- a/carpincho-wallet/src/hooks/useWalletServiceStatus.ts
+++ b/carpincho-wallet/src/hooks/useWalletServiceStatus.ts
@@ -1,17 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
-import { walletServiceRequest } from '@/api/walletService'
+import { type WalletServiceStatusResponse, walletServiceStatus } from '@/api/walletService'
 import { useRuntimeConfig } from '@/config/useRuntimeConfig'
 
-interface WalletServiceStatusResponse {
-  connection?: {
-    isNetworkConnected?: boolean
-    networkReason?: string
-  }
-  network?: {
-    networkId?: string
-  }
-}
-
 export interface WalletServiceStatus {
   connected: boolean
   networkId?: string
@@ -44,13 +34,7 @@ export const useWalletServiceStatus = (
   // Probes the configured JSON-RPC endpoint and stores the current Canton connectivity result.
   const refresh = useCallback(async (): Promise<void> => {
     try {
-      const response = await walletServiceRequest<WalletServiceStatusResponse>(
-        'status',
-        undefined,
-        {
-          rpcUrl: config.walletServiceRpcUrl,
-        },
-      )
+      const response = await walletServiceStatus({ rpcUrl: config.walletServiceRpcUrl })
       setStatus(statusFromResponse(response))
     } catch (error) {
       setStatus({ connected: false, reason: (error as Error).message })
diff --git a/carpincho-wallet/src/test-utils/queryClient.tsx b/carpincho-wallet/src/test-utils/queryClient.tsx
index a1d5d771..4f71e44c 100644
--- a/carpincho-wallet/src/test-utils/queryClient.tsx
+++ b/carpincho-wallet/src/test-utils/queryClient.tsx
@@ -1,17 +1,9 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { type QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import type { ReactNode } from 'react'
+import { createQueryClient } from '@/config/queryClient'
 
 // Creates an isolated query cache so tests cannot share CIP-56 server state.
-export const createTestQueryClient = (): QueryClient =>
-  new QueryClient({
-    defaultOptions: {
-      queries: {
-        gcTime: 0,
-        refetchOnWindowFocus: false,
-        retry: false,
-      },
-    },
-  })
+export const createTestQueryClient = (): QueryClient => createQueryClient({ gcTime: 0 })
 
 // Wraps a test subtree in a fresh TanStack Query provider.
 export const TestQueryClientProvider = ({ children }: { children: ReactNode }): JSX.Element => (

From 1dfa3ce9869b6ab63ab8b9bcf7046bedc5899897 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Thu, 11 Jun 2026 18:23:02 -0300
Subject: [PATCH 48/98] feat(dev-stack): restore helper script, adapt for
 Splice LocalNet

Mint CANTON_BACKEND_TOKEN into canton-barebones/.env on up (idempotent,
skipped in mock mode), correct service URLs/ports to the LocalNet bundle,
defer backend status to docker ps / canton:health instead of scanning a
fixed port range, and build the extension in-tree without copying to the
Desktop.
---
 scripts/dev-stack.sh | 439 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 439 insertions(+)
 create mode 100755 scripts/dev-stack.sh

diff --git a/scripts/dev-stack.sh b/scripts/dev-stack.sh
new file mode 100755
index 00000000..b90ebdf5
--- /dev/null
+++ b/scripts/dev-stack.sh
@@ -0,0 +1,439 @@
+#!/usr/bin/env bash
+#
+# dev-stack.sh — start or stop the full local Canton dApp stack.
+#
+# Docker lifecycle is managed separately from the stack: start/quit Docker with
+# `docker-up` / `docker-down` (macOS only), the Docker app, or your CLI. `up`
+# and `down` assume Docker is already running and never start or quit it.
+#
+# Usage:
+#   ./scripts/dev-stack.sh             # interactive arrow-key menu (default)
+#   ./scripts/dev-stack.sh menu        # same as above
+#   ./scripts/dev-stack.sh install     # install + link every workspace from the repo root (npm install)
+#   ./scripts/dev-stack.sh docker-up   # macOS only: launch Docker Desktop, wait for the daemon
+#   ./scripts/dev-stack.sh up          # start the stack (containers, DAR, dev servers, extension)
+#   ./scripts/dev-stack.sh down        # stop dev servers and tear down containers
+#   ./scripts/dev-stack.sh docker-down # macOS only: quit Docker Desktop
+#   ./scripts/dev-stack.sh status      # show what is currently running
+#   ./scripts/dev-stack.sh extension   # build the Chrome extension into carpincho-wallet/dist-extension
+#   ./scripts/dev-stack.sh mock-up     # mock-only: mocked wallet-service + carpincho web app (no Docker)
+#   ./scripts/dev-stack.sh mock-down   # stop the mocked wallet-service + carpincho web app only
+#
+# What `up` starts (in order; Docker must already be running):
+#   1. Splice LocalNet bundle + wallet-service containers (npm run canton:up)
+#   2. Health checks (canton + wallet-service)
+#   3. Builds and deploys the Daml DAR (name derived from daml.yaml)
+#   4. Carpincho wallet dev server  -> http://localhost:3011  (background)
+#   5. dApp frontend dev server     -> http://localhost:3012  (background)
+#   6. Builds the Chrome extension into carpincho-wallet/dist-extension
+#
+# `down` reverses 4/5 (kills the dev servers) and tears down the containers.
+
+set -euo pipefail
+
+# Resolve repo root from this script's location so it works from any cwd.
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+ROOT_DIR="$(cd "$SCRIPT_DIR/.." && pwd)"
+cd "$ROOT_DIR"
+
+RUN_DIR="${TMPDIR:-/tmp}/cn-dev-stack"
+WALLET_LOG="$RUN_DIR/wallet-dev.log"
+DAPP_LOG="$RUN_DIR/dapp-dev.log"
+WALLET_PID="$RUN_DIR/wallet-dev.pid"
+DAPP_PID="$RUN_DIR/dapp-dev.pid"
+MOCK_WS_LOG="$RUN_DIR/mock-wallet-service.log"
+MOCK_WS_PID="$RUN_DIR/mock-wallet-service.pid"
+
+# Derive the DAR name from daml.yaml so renames/bumps need no edits here.
+DAML_DIR="dapp/daml"
+DAR_NAME="$(awk '/^name:/{n=$2} /^version:/{v=$2} END{print n"-"v".dar"}' "$DAML_DIR/daml.yaml")"
+DAR_PATH="$DAML_DIR/.daml/dist/$DAR_NAME"
+EXT_SRC="carpincho-wallet/dist-extension"
+
+log()  { printf '\033[1;36m==>\033[0m %s\n' "$*"; }
+warn() { printf '\033[1;33m[!]\033[0m %s\n' "$*"; }
+die()  { printf '\033[1;31m[x]\033[0m %s\n' "$*" >&2; exit 1; }
+
+case "$DAR_NAME" in
+  -.dar | -*.dar | *-.dar) die "Could not derive DAR name from $DAML_DIR/daml.yaml (got '$DAR_NAME')" ;;
+esac
+
+wait_for() { # wait_for <seconds> <logfile> <grep-pattern> <label>
+  local timeout="$1" file="$2" pattern="$3" label="$4" i
+  for ((i = 0; i < timeout; i++)); do
+    if [ -f "$file" ] && grep -qiE "$pattern" "$file" 2>/dev/null; then
+      return 0
+    fi
+    sleep 1
+  done
+  warn "$label did not report ready within ${timeout}s (check $file)"
+  return 1
+}
+
+build_extension() {
+  # A fresh clone may have no deps yet; one root install links every workspace.
+  if [ ! -d node_modules ]; then
+    install_deps
+  fi
+
+  log "Building the Carpincho Chrome extension..."
+  npm run carpincho:build:extension
+  log "Extension ready at $EXT_SRC"
+  echo "   Load it via chrome://extensions -> Developer mode -> Load unpacked"
+}
+
+install_deps() { # one root npm install links every workspace
+  log "Installing workspace dependencies (root npm install)..."
+  npm install
+  log "Workspaces installed and linked."
+}
+
+docker_up() { # macOS only — launch Docker Desktop and wait for the daemon
+  if [ "$(uname -s)" != "Darwin" ]; then
+    warn "docker-up is macOS only. Start Docker with your platform's tools, then run 'up'."
+    return 0
+  fi
+  if docker info >/dev/null 2>&1; then
+    log "Docker daemon already running."
+    return 0
+  fi
+  log "Starting Docker Desktop and waiting for the daemon..."
+  open -a Docker
+  local i
+  for ((i = 0; i < 120; i++)); do
+    if docker info >/dev/null 2>&1; then break; fi
+    sleep 1
+  done
+  docker info >/dev/null 2>&1 || die "Docker daemon did not come up within 120s"
+  log "Docker daemon is ready."
+}
+
+docker_down() { # macOS only — quit Docker Desktop
+  if [ "$(uname -s)" != "Darwin" ]; then
+    warn "docker-down is macOS only. Stop Docker with your platform's tools."
+    return 0
+  fi
+  log "Quitting Docker Desktop..."
+  osascript -e 'quit app "Docker Desktop"' 2>/dev/null \
+    || osascript -e 'quit app "Docker"' 2>/dev/null \
+    || warn "Could not quit Docker Desktop (already closed?)"
+}
+
+up() {
+  mkdir -p "$RUN_DIR"
+
+  # A fresh clone may have no deps yet; one root install links every workspace.
+  if [ ! -d node_modules ]; then
+    install_deps
+  fi
+
+  # Docker must already be running (start it via 'docker-up', the app, or your CLI).
+  docker info >/dev/null 2>&1 \
+    || die "Docker daemon not reachable. Start Docker first (menu: docker-up, the Docker app, or your CLI), then run 'up'."
+
+  # canton .env (README step) — create from example if missing.
+  if [ ! -f canton-barebones/.env ]; then
+    log "Creating canton-barebones/.env from .env.example"
+    cp canton-barebones/.env.example canton-barebones/.env
+  fi
+
+  # Splice LocalNet requires CANTON_BACKEND_TOKEN unless wallet-service runs in
+  # mock mode; splice-common.sh's require_backend_token hard-fails without it.
+  if [ "${WALLET_SERVICE_MOCK:-}" = "1" ] \
+    || grep -qE '^[[:space:]]*WALLET_SERVICE_MOCK=1' canton-barebones/.env; then
+    log "WALLET_SERVICE_MOCK=1 — skipping CANTON_BACKEND_TOKEN."
+  elif grep -qE '^[[:space:]]*CANTON_BACKEND_TOKEN=.+' canton-barebones/.env; then
+    log "CANTON_BACKEND_TOKEN already set in canton-barebones/.env."
+  else
+    log "Minting CANTON_BACKEND_TOKEN for the LocalNet wallet-service..."
+    local token_line tmp_env
+    # mint-token.mjs prints a full 'CANTON_BACKEND_TOKEN=<jwt>' line; capture it
+    # without echoing the secret to the terminal.
+    token_line="$(npm run --silent canton:token -- ledger-api-user 2>/dev/null \
+      | grep -m1 -E '^[[:space:]]*CANTON_BACKEND_TOKEN=' \
+      | sed -E 's/^[[:space:]]*//')" || true
+    [ -n "$token_line" ] \
+      || die "Failed to mint CANTON_BACKEND_TOKEN (npm run canton:token -- ledger-api-user). Check CANTON_AUTH_SECRET / CANTON_AUTH_AUDIENCE in canton-barebones/.env."
+    # Replace any existing (empty) entry, else append — never print the token.
+    tmp_env="$(mktemp)"
+    grep -vE '^[[:space:]]*CANTON_BACKEND_TOKEN=' canton-barebones/.env >"$tmp_env" || true
+    printf '%s\n' "$token_line" >>"$tmp_env"
+    mv "$tmp_env" canton-barebones/.env
+    log "Wrote CANTON_BACKEND_TOKEN to canton-barebones/.env."
+  fi
+
+  # 1. Containers
+  log "Bringing up the Splice LocalNet bundle + wallet-service containers..."
+  npm run canton:up
+
+  # 2. Health
+  log "Checking Canton health..."
+  npm run canton:health
+  log "Checking wallet-service health..."
+  npm run wallet-service:health && echo
+
+  # 3. Build + deploy DAR
+  log "Building the $DAR_NAME DAR..."
+  npm run build-dar -- "$DAML_DIR"
+  log "Deploying the DAR to Canton..."
+  npm run deploy-dar -- "$DAR_PATH"
+
+  # 4. Carpincho wallet dev server (3011)
+  if lsof -nP -iTCP:3011 -sTCP:LISTEN >/dev/null 2>&1; then
+    warn "Port 3011 already in use; skipping wallet dev server."
+  else
+    log "Starting Carpincho wallet dev server -> http://localhost:3011"
+    nohup npm run wallet:dev >"$WALLET_LOG" 2>&1 &
+    echo $! >"$WALLET_PID"
+    wait_for 60 "$WALLET_LOG" "ready in|localhost:3011" "wallet dev server" || true
+  fi
+
+  # 5. dApp frontend dev server (3012)
+  if lsof -nP -iTCP:3012 -sTCP:LISTEN >/dev/null 2>&1; then
+    warn "Port 3012 already in use; skipping dApp dev server."
+  else
+    log "Starting dApp frontend dev server -> http://localhost:3012"
+    nohup npm run app:dev >"$DAPP_LOG" 2>&1 &
+    echo $! >"$DAPP_PID"
+    wait_for 60 "$DAPP_LOG" "ready in|localhost:3012" "dApp dev server" || true
+  fi
+
+  # 6. Build extension (into carpincho-wallet/dist-extension)
+  build_extension
+
+  echo
+  log "Stack is up:"
+  cat <<EOF
+   wallet-service          http://localhost:3010
+   carpincho wallet        http://localhost:3011   (log: $WALLET_LOG)
+   dApp frontend           http://localhost:3012   (log: $DAPP_LOG)
+   app-user wallet UI      http://wallet.localhost:2000
+   app-user JSON API       http://localhost:2975
+   app-user Ledger API     grpc://localhost:2901
+   app-user Validator API  http://localhost:2903
+   Scan UI                 http://scan.localhost:4000
+   SV UI                   http://sv.localhost:4000
+   PostgreSQL              localhost:5432
+   extension folder        $EXT_SRC
+EOF
+  echo "   Load the extension via chrome://extensions -> Developer mode -> Load unpacked"
+}
+
+stop_pidfile() { # stop_pidfile <pidfile> <label>
+  local pidfile="$1" label="$2" pid
+  if [ -f "$pidfile" ]; then
+    pid="$(cat "$pidfile" 2>/dev/null || true)"
+    if [ -n "${pid:-}" ] && kill -0 "$pid" 2>/dev/null; then
+      log "Stopping $label (pid $pid)"
+      # kill the npm process group so child vite dies too
+      kill "$pid" 2>/dev/null || true
+      pkill -P "$pid" 2>/dev/null || true
+    fi
+    rm -f "$pidfile"
+  fi
+}
+
+down() {
+  # 1. Dev servers
+  stop_pidfile "$WALLET_PID" "wallet dev server"
+  stop_pidfile "$DAPP_PID" "dApp dev server"
+  # Belt-and-suspenders: kill any stray vite on our ports.
+  pkill -f "carpincho-wallet run dev" 2>/dev/null || true
+  pkill -f "vite --host localhost --port 3012" 2>/dev/null || true
+
+  # 2. Containers (only if the daemon is reachable). Docker itself is left
+  # running — quit it separately with 'docker-down', the app, or your CLI.
+  if docker info >/dev/null 2>&1; then
+    log "Tearing down Canton containers..."
+    npm run canton:down || warn "canton:down reported an error"
+  else
+    warn "Docker daemon not reachable; skipping canton:down"
+  fi
+
+  echo
+  log "Dev-server ports 3010-3012:"
+  if lsof -nP -iTCP:3010-3012 -sTCP:LISTEN >/dev/null 2>&1; then
+    lsof -nP -iTCP:3010-3012 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
+  else
+    echo "   (all free)"
+  fi
+  log "LocalNet containers:"
+  docker ps --filter "name=canton-barebones" --format '   {{.Names}}  {{.Status}}' 2>/dev/null \
+    || echo "   (docker daemon not running)"
+}
+
+wait_http() { # wait_http <seconds> <url> <label>
+  local timeout="$1" url="$2" label="$3" i
+  for ((i = 0; i < timeout; i++)); do
+    if curl -fsS "$url" >/dev/null 2>&1; then return 0; fi
+    sleep 1
+  done
+  warn "$label did not answer at $url within ${timeout}s"
+  return 1
+}
+
+mock_up() {
+  mkdir -p "$RUN_DIR"
+
+  # Mock mode needs no Docker — it short-circuits the Canton SDK. A fresh clone
+  # may have no deps yet; one root install links every workspace, including the
+  # wallet-service started below.
+  if [ ! -d node_modules ]; then
+    install_deps
+  fi
+
+  # Mocked data server (wallet-service in MOCK MODE) -> http://localhost:3010
+  if lsof -nP -iTCP:3010 -sTCP:LISTEN >/dev/null 2>&1; then
+    warn "Port 3010 already in use; skipping mocked wallet-service."
+  else
+    log "Starting mocked wallet-service (MOCK MODE) -> http://localhost:3010"
+    WALLET_SERVICE_MOCK=1 nohup npm run wallet-service:dev >"$MOCK_WS_LOG" 2>&1 &
+    echo $! >"$MOCK_WS_PID"
+    wait_http 60 "http://localhost:3010/health" "mocked wallet-service" || true
+  fi
+
+  # Carpincho web app -> http://localhost:3011
+  if lsof -nP -iTCP:3011 -sTCP:LISTEN >/dev/null 2>&1; then
+    warn "Port 3011 already in use; skipping carpincho web app."
+  else
+    log "Starting Carpincho web app -> http://localhost:3011"
+    nohup npm run wallet:dev >"$WALLET_LOG" 2>&1 &
+    echo $! >"$WALLET_PID"
+    wait_for 60 "$WALLET_LOG" "ready in|localhost:3011" "carpincho web app" || true
+  fi
+
+  echo
+  log "Mock stack is up:"
+  cat <<EOF
+   mocked wallet-service  http://localhost:3010   (log: $MOCK_WS_LOG)
+   carpincho web app      http://localhost:3011   (log: $WALLET_LOG)
+EOF
+  echo "   No Docker / Canton / dApp frontend in this mode. Stop with: $0 mock-down"
+}
+
+mock_down() {
+  stop_pidfile "$MOCK_WS_PID" "mocked wallet-service"
+  stop_pidfile "$WALLET_PID" "carpincho web app"
+  # Belt-and-suspenders for stray processes on our ports.
+  pkill -f "WALLET_SERVICE_MOCK" 2>/dev/null || true
+  pkill -f "tsx watch src/server.ts" 2>/dev/null || true
+  pkill -f "carpincho-wallet run dev" 2>/dev/null || true
+
+  echo
+  log "Mock stack is down. Ports 3010/3011:"
+  if lsof -nP -iTCP:3010,3011 -sTCP:LISTEN >/dev/null 2>&1; then
+    lsof -nP -iTCP:3010,3011 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
+  else
+    echo "   (both free)"
+  fi
+}
+
+menu() {
+  if [ ! -t 0 ] || [ ! -t 1 ]; then
+    die "The menu needs an interactive terminal. Run a subcommand directly instead."
+  fi
+
+  # Display label per item; `keys` is the matching action dispatched on select.
+  local keys=(install docker-up docker-down up down mock-up mock-down extension quit)
+  local labels=("Install" "Docker up" "Docker down" "Stack up" "Stack down" "Wallet up" "Wallet down" "Build extension" "Quit")
+  local descs=(
+    "install + link every workspace (root npm install)"
+    "start Docker Desktop, wait for daemon (macOS)"
+    "quit Docker Desktop (macOS)"
+    "containers, DAR, dev servers, extension"
+    "stop dev servers + tear down containers"
+    "mock wallet-service + carpincho web app (no Docker)"
+    "stop the mock server + web app only"
+    "build the extension into carpincho-wallet/dist-extension"
+    "exit this menu"
+  )
+  local n=${#keys[@]} sel=0 key rest i num choice
+
+  tput civis 2>/dev/null || true                       # hide cursor
+  trap 'tput cnorm 2>/dev/null || true' EXIT INT TERM  # restore on exit
+
+  while true; do
+    clear
+    printf '\n  \033[1mCanton dApp dev stack\033[0m\n\n'
+    for i in "${!keys[@]}"; do
+      num=$((i + 1))
+      if [ "$i" -eq "$sel" ]; then
+        printf '  \033[7m  %d- %-16s %s  \033[0m\n' "$num" "${labels[$i]}" "${descs[$i]}"
+      else
+        printf '     %d- %-16s %s\n' "$num" "${labels[$i]}" "${descs[$i]}"
+      fi
+    done
+    printf '\n  \033[2m[1-%d] jump    [up/down or j/k] move    [enter] select    [q] quit\033[0m\n' "$n"
+
+    IFS= read -rsn1 key
+    case "$key" in
+      $'\033')                       # escape sequence (arrow keys)
+        IFS= read -rsn2 rest
+        case "$rest" in
+          '[A') sel=$(((sel - 1 + n) % n)) ;;
+          '[B') sel=$(((sel + 1) % n)) ;;
+        esac
+        continue ;;
+      k) sel=$(((sel - 1 + n) % n)); continue ;;
+      j) sel=$(((sel + 1) % n)); continue ;;
+      [1-9])                          # number key jumps the highlight
+        [ "$key" -le "$n" ] && sel=$((key - 1))
+        continue ;;
+      q | Q) break ;;
+      '') ;;                          # Enter -> dispatch below
+      *) continue ;;
+    esac
+
+    choice="${keys[$sel]}"
+    [ "$choice" = "quit" ] && break
+
+    tput cnorm 2>/dev/null || true
+    clear
+    printf '\n'
+    # Run in a subshell so a failing action returns to the menu instead of
+    # killing the whole script under `set -e`.
+    case "$choice" in
+      install)     ( install_deps ) || warn "install did not finish cleanly" ;;
+      docker-up)   ( docker_up ) || warn "docker-up did not finish cleanly" ;;
+      docker-down) ( docker_down ) || warn "docker-down did not finish cleanly" ;;
+      up)          ( up ) || warn "up did not finish cleanly (see output above)" ;;
+      down)        ( down ) || warn "down did not finish cleanly" ;;
+      mock-up)     ( mock_up ) || warn "mock-up did not finish cleanly" ;;
+      mock-down)   ( mock_down ) || warn "mock-down did not finish cleanly" ;;
+      extension)   ( build_extension ) || warn "extension build failed" ;;
+    esac
+    printf '\n  \033[2mPress Enter to return to the menu...\033[0m'
+    read -r _ || true
+    tput civis 2>/dev/null || true
+  done
+
+  tput cnorm 2>/dev/null || true
+  clear
+}
+
+status() {
+  log "LocalNet containers (canton-barebones compose project):"
+  docker ps --filter "name=canton-barebones" --format '   {{.Names}}  {{.Status}}' 2>/dev/null \
+    || echo "   (docker daemon not running)"
+  log "Dev-server ports 3010-3012:"
+  if lsof -nP -iTCP:3010-3012 -sTCP:LISTEN >/dev/null 2>&1; then
+    lsof -nP -iTCP:3010-3012 -sTCP:LISTEN | awk 'NR>1{print "   "$1, $9}'
+  else
+    echo "   (none)"
+  fi
+  echo "   Backend health: run 'npm run canton:health'"
+}
+
+case "${1:-menu}" in
+  menu)        menu ;;
+  install)     install_deps ;;
+  docker-up)   docker_up ;;
+  up)          up ;;
+  down)        down ;;
+  docker-down) docker_down ;;
+  status)      status ;;
+  extension)   build_extension ;;
+  mock-up)     mock_up ;;
+  mock-down)   mock_down ;;
+  *)           die "Usage: $0 {menu|install|docker-up|up|down|docker-down|status|extension|mock-up|mock-down}" ;;
+esac

From eee1ca613ca85479c10c77acdf60ac2b95b2522f Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 10:16:23 -0300
Subject: [PATCH 49/98] chore: update dev-stack labels

---
 scripts/dev-stack.sh | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/scripts/dev-stack.sh b/scripts/dev-stack.sh
index b90ebdf5..6f4ab74f 100755
--- a/scripts/dev-stack.sh
+++ b/scripts/dev-stack.sh
@@ -337,15 +337,15 @@ menu() {
   local keys=(install docker-up docker-down up down mock-up mock-down extension quit)
   local labels=("Install" "Docker up" "Docker down" "Stack up" "Stack down" "Wallet up" "Wallet down" "Build extension" "Quit")
   local descs=(
-    "install + link every workspace (root npm install)"
-    "start Docker Desktop, wait for daemon (macOS)"
+    "install + link every workspace"
+    "start Docker Desktop (macOS)"
     "quit Docker Desktop (macOS)"
-    "containers, DAR, dev servers, extension"
+    "start containers, dev servers, build DAR and extension"
     "stop dev servers + tear down containers"
-    "mock wallet-service + carpincho web app (no Docker)"
-    "stop the mock server + web app only"
-    "build the extension into carpincho-wallet/dist-extension"
-    "exit this menu"
+    "start mock wallet-service + carpincho web app (no Docker)"
+    "stop the mock wallet-service + carpincho web app"
+    "build the extension (carpincho-wallet/dist-extension)"
+    "exit"
   )
   local n=${#keys[@]} sel=0 key rest i num choice
 

From 8f86940830c3fcbbbb078510362665829d25a21f Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 11:24:29 -0300
Subject: [PATCH 50/98] feat(carpincho): cap toast message height with vertical
 scroll

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

diff --git a/carpincho-wallet/src/components/ui/ToastProvider.tsx b/carpincho-wallet/src/components/ui/ToastProvider.tsx
index 6d5b6727..ba4970ef 100644
--- a/carpincho-wallet/src/components/ui/ToastProvider.tsx
+++ b/carpincho-wallet/src/components/ui/ToastProvider.tsx
@@ -78,7 +78,7 @@ const ToastItem = ({ entry }: ToastItemProps): JSX.Element => {
       >
         {accent.icon}
       </span>
-      <RadixToast.Description className="min-w-0 grow break-words pt-1 text-[0.9rem] font-medium leading-snug">
+      <RadixToast.Description className="min-w-0 grow max-h-40 overflow-y-auto break-words pt-1 text-[0.9rem] font-medium leading-snug">
         {entry.message}
       </RadixToast.Description>
       <RadixToast.Close

From f7e927457bf476fd845d98f1ed1c8ef8a252b65c Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 11:24:53 -0300
Subject: [PATCH 51/98] feat(carpincho): add copy button to error toasts

---
 .../src/components/ui/ToastProvider.tsx       | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/ToastProvider.tsx b/carpincho-wallet/src/components/ui/ToastProvider.tsx
index ba4970ef..7faf4a84 100644
--- a/carpincho-wallet/src/components/ui/ToastProvider.tsx
+++ b/carpincho-wallet/src/components/ui/ToastProvider.tsx
@@ -1,5 +1,5 @@
 import * as RadixToast from '@radix-ui/react-toast'
-import { type ReactNode, useEffect, useState } from 'react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import type { FeedbackVariant } from '@/components/ui/Alert'
 import { ICON_BUTTON_CLASS } from '@/components/ui/Button'
@@ -7,10 +7,12 @@ import {
   ALERT_CIRCLE_ICON,
   ALERT_TRIANGLE_ICON,
   CHECK_ICON,
+  COPY_ICON,
   INFO_ICON,
   X_ICON,
 } from '@/components/ui/icons'
 import { resolveDurationMs, subscribeToasts, type ToastEntry, toast } from '@/components/ui/toast'
+import { copyText } from '@/utils/clipboard'
 import { cn } from '@/utils/cn'
 
 const CLOSE_ANIMATION_MS = 200
@@ -61,6 +63,12 @@ interface ToastItemProps {
 
 const ToastItem = ({ entry }: ToastItemProps): JSX.Element => {
   const accent = VARIANT_ACCENT[entry.variant]
+  // Copy the rendered text so both string and ReactNode messages copy cleanly.
+  const descriptionRef = useRef<HTMLDivElement>(null)
+  const copyMessage = (): void => {
+    const text = descriptionRef.current?.textContent?.trim() ?? ''
+    if (text) copyText(text, 'Message copied')
+  }
   return (
     <RadixToast.Root
       duration={resolveDurationMs(entry.durationMs)}
@@ -78,15 +86,30 @@ const ToastItem = ({ entry }: ToastItemProps): JSX.Element => {
       >
         {accent.icon}
       </span>
-      <RadixToast.Description className="min-w-0 grow max-h-40 overflow-y-auto break-words pt-1 text-[0.9rem] font-medium leading-snug">
+      <RadixToast.Description
+        ref={descriptionRef}
+        className="min-w-0 grow max-h-40 overflow-y-auto break-words pt-1 text-[0.9rem] font-medium leading-snug"
+      >
         {entry.message}
       </RadixToast.Description>
-      <RadixToast.Close
-        aria-label="Dismiss"
-        className={cn(ICON_BUTTON_CLASS, 'size-7 shrink-0 rounded-md bg-transparent')}
-      >
-        {X_ICON}
-      </RadixToast.Close>
+      <div className="flex shrink-0 items-start gap-0.5">
+        {entry.variant === 'error' && (
+          <button
+            type="button"
+            aria-label="Copy message"
+            onClick={copyMessage}
+            className={cn(ICON_BUTTON_CLASS, 'size-7 shrink-0 rounded-md bg-transparent')}
+          >
+            {COPY_ICON}
+          </button>
+        )}
+        <RadixToast.Close
+          aria-label="Dismiss"
+          className={cn(ICON_BUTTON_CLASS, 'size-7 shrink-0 rounded-md bg-transparent')}
+        >
+          {X_ICON}
+        </RadixToast.Close>
+      </div>
     </RadixToast.Root>
   )
 }

From e1e82f4f1c6add33a1000c27a94782d4d089acc0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 11:25:14 -0300
Subject: [PATCH 52/98] feat(carpincho): auto-dismiss non-error toasts after 5s

---
 carpincho-wallet/AGENTS.md                  | 2 +-
 carpincho-wallet/src/components/ui/toast.ts | 8 ++++----
 carpincho-wallet/test/ui/Toast.test.tsx     | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index 91d768f5..247e10fd 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -14,7 +14,7 @@ This file applies only to `carpincho-wallet/`. For monorepo-wide rules (commit s
 | 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-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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: `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), `TokensPanel` (token balances/holdings plus the embedded `IncomingTransfersSection` and the Amulet preapproval auto-accept toggle), and `SendTokensPanel` (the token transfer form). The Tokens tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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 3 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`). Max 3 visible, top-center, newest on top |
+| 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, incoming 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/*` |
 | Linting | Biome (root config) | Single root `biome.json` + root `@biomejs/biome`; this project's rules (`@/` alias enforcement, Tailwind CSS parsing) live in a path `override`. Enforced via the root pre-commit hook; run `npm run lint` manually |
diff --git a/carpincho-wallet/src/components/ui/toast.ts b/carpincho-wallet/src/components/ui/toast.ts
index 191b38c6..6285de5f 100644
--- a/carpincho-wallet/src/components/ui/toast.ts
+++ b/carpincho-wallet/src/components/ui/toast.ts
@@ -18,11 +18,11 @@ type Listener = (entries: ReadonlyArray<ToastEntry>) => void
 
 const MAX_VISIBLE = 3
 
-// Only errors persist until dismissed; everything else clears after 3 s.
+// Only errors persist until dismissed; everything else clears after 5 s.
 const DEFAULT_DURATION_MS: Record<ToastVariant, number> = {
-  info: 3000,
-  success: 3000,
-  warning: 3000,
+  info: 5000,
+  success: 5000,
+  warning: 5000,
   error: Number.POSITIVE_INFINITY,
 }
 
diff --git a/carpincho-wallet/test/ui/Toast.test.tsx b/carpincho-wallet/test/ui/Toast.test.tsx
index c2a929b2..dee82ffb 100644
--- a/carpincho-wallet/test/ui/Toast.test.tsx
+++ b/carpincho-wallet/test/ui/Toast.test.tsx
@@ -34,8 +34,8 @@ describe('toast emitter', () => {
     toast.warning('careful')
     toast.error('boom')
     const [info, warning, error] = getToastEntries()
-    assert.equal(info?.durationMs, 3000)
-    assert.equal(warning?.durationMs, 3000)
+    assert.equal(info?.durationMs, 5000)
+    assert.equal(warning?.durationMs, 5000)
     assert.equal(error?.durationMs, Number.POSITIVE_INFINITY)
   })
 

From a9944d8145046df8d988f35d2b305ffb3cf0214b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 12:33:48 -0300
Subject: [PATCH 53/98] feat(carpincho): reorganize home tabs into Assets,
 Transfers, Activity, Send

Rename TokensPanel to AssetsPanel (token holdings plus the Amulet auto-accept
toggle) and extract the embedded incoming-transfers section into a standalone
TransfersPanel that owns the pending-count badge. Reorder HomeTabs to Assets,
Transfers, Activity, Send and force-mount the Transfers tab so its polling and
badge stay live while hidden. Update the affected component tests.
---
 .../{TokensPanel.tsx => AssetsPanel.tsx}      | 21 +----
 carpincho-wallet/src/components/HomeTabs.tsx  | 34 ++++---
 ...ransfersSection.tsx => TransfersPanel.tsx} |  6 +-
 ...ensPanel.test.tsx => AssetsPanel.test.tsx} | 92 +++----------------
 .../test/components/HomeTabs.test.tsx         | 30 +++---
 ...ction.test.tsx => TransfersPanel.test.tsx} | 12 +--
 6 files changed, 59 insertions(+), 136 deletions(-)
 rename carpincho-wallet/src/components/{TokensPanel.tsx => AssetsPanel.tsx} (95%)
 rename carpincho-wallet/src/components/{IncomingTransfersSection.tsx => TransfersPanel.tsx} (98%)
 rename carpincho-wallet/test/components/{TokensPanel.test.tsx => AssetsPanel.test.tsx} (81%)
 rename carpincho-wallet/test/components/{IncomingTransfersSection.test.tsx => TransfersPanel.test.tsx} (94%)

diff --git a/carpincho-wallet/src/components/TokensPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
similarity index 95%
rename from carpincho-wallet/src/components/TokensPanel.tsx
rename to carpincho-wallet/src/components/AssetsPanel.tsx
index caf836fc..f3aabf50 100644
--- a/carpincho-wallet/src/components/TokensPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,13 +1,11 @@
 import { useEffect, useState } from 'react'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
-import { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
 import { PLAIN_ICON_BUTTON_CLASS, PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { COPY_ICON } from '@/components/ui/icons'
 import { toast } from '@/components/ui/toast'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
@@ -15,12 +13,10 @@ import { copyText } from '@/utils/clipboard'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
-export interface TokensPanelProps {
+export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
-  transfersApi?: Cip56TransferApi
   preapprovalApi?: AmuletPreapprovalApi
-  onPendingTransferCountChange?: (count: number) => void
 }
 
 interface HoldingDetailRowProps {
@@ -215,13 +211,7 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
 }
 
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
-export const TokensPanel = ({
-  account,
-  api,
-  transfersApi,
-  preapprovalApi,
-  onPendingTransferCountChange,
-}: TokensPanelProps): JSX.Element => {
+export const AssetsPanel = ({ account, api, preapprovalApi }: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
@@ -242,13 +232,6 @@ export const TokensPanel = ({
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
-      <IncomingTransfersSection
-        account={activeAccount}
-        api={transfersApi}
-        hideWhenEmpty
-        onPendingCountChange={onPendingTransferCountChange}
-      />
-
       <AmuletPreapprovalSection
         account={activeAccount}
         api={preapprovalApi}
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index ed147227..f7f33aa8 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,7 +1,8 @@
 import { useCallback, useMemo, useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
+import { AssetsPanel } from '@/components/AssetsPanel'
 import { type Cip56SendApi, SendTokensPanel } from '@/components/SendTokensPanel'
-import { TokensPanel } from '@/components/TokensPanel'
+import { TransfersPanel } from '@/components/TransfersPanel'
 import { TabContent, Tabs, TabsList, TabTrigger } from '@/components/ui/Tabs'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
@@ -18,7 +19,7 @@ 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; token-related balances and actions share the Tokens view.
+// Tabbed home body; assets, transfers, activity, and sending each own a tab.
 export const HomeTabs = ({
   account,
   transactions,
@@ -55,35 +56,44 @@ export const HomeTabs = ({
       className="flex min-h-0 flex-1 flex-col"
     >
       <TabsList>
-        <TabTrigger value="activity">Activity</TabTrigger>
-        <TabTrigger value="tokens">
-          <span>Tokens</span>
+        <TabTrigger value="assets">Assets</TabTrigger>
+        <TabTrigger value="transfers">
+          <span>Transfers</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">
               {pendingTransferCount}
             </span>
           ) : null}
         </TabTrigger>
+        <TabTrigger value="activity">Activity</TabTrigger>
         <TabTrigger value="send">Send</TabTrigger>
       </TabsList>
       <TabContent
-        value="activity"
+        value="assets"
         className={TAB_CONTENT_CLASS}
       >
-        <ActivityList transactions={activeTransactions} />
+        <AssetsPanel
+          account={account}
+          api={tokensApi}
+        />
       </TabContent>
       <TabContent
         forceMount
-        value="tokens"
+        value="transfers"
         className={TAB_CONTENT_CLASS}
       >
-        <TokensPanel
+        <TransfersPanel
           account={account}
-          api={tokensApi}
-          transfersApi={transfersApi}
-          onPendingTransferCountChange={onPendingTransferCountChange}
+          api={transfersApi}
+          onPendingCountChange={onPendingTransferCountChange}
         />
       </TabContent>
+      <TabContent
+        value="activity"
+        className={TAB_CONTENT_CLASS}
+      >
+        <ActivityList transactions={activeTransactions} />
+      </TabContent>
       <TabContent
         value="send"
         className={TAB_CONTENT_CLASS}
diff --git a/carpincho-wallet/src/components/IncomingTransfersSection.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
similarity index 98%
rename from carpincho-wallet/src/components/IncomingTransfersSection.tsx
rename to carpincho-wallet/src/components/TransfersPanel.tsx
index f0d26276..6c9b4e08 100644
--- a/carpincho-wallet/src/components/IncomingTransfersSection.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -13,7 +13,7 @@ import { shortMiddle } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
-export interface IncomingTransfersSectionProps {
+export interface TransfersPanelProps {
   account?: AccountPublic
   api?: Cip56TransferApi
   hideWhenEmpty?: boolean
@@ -34,12 +34,12 @@ const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Elemen
 )
 
 // Renders incoming CIP-56 transfer instructions that require receiver acceptance.
-export const IncomingTransfersSection = ({
+export const TransfersPanel = ({
   account,
   api,
   hideWhenEmpty = false,
   onPendingCountChange,
-}: IncomingTransfersSectionProps): JSX.Element | null => {
+}: TransfersPanelProps): JSX.Element | null => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
diff --git a/carpincho-wallet/test/components/TokensPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
similarity index 81%
rename from carpincho-wallet/test/components/TokensPanel.test.tsx
rename to carpincho-wallet/test/components/AssetsPanel.test.tsx
index c2e3d2e1..f283d4bf 100644
--- a/carpincho-wallet/test/components/TokensPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -2,10 +2,9 @@ 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 { TokensPanel } from '@/components/TokensPanel'
+import { AssetsPanel } from '@/components/AssetsPanel'
 import { getToastEntries, toast } from '@/components/ui/toast'
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
-import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
@@ -47,17 +46,12 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts the panel under vault context so it can resolve the active account.
-const renderTokens = (
-  api: Cip56HoldingsApi,
-  transfersApi?: Cip56TransferApi,
-  preapprovalApi?: AmuletPreapprovalApi,
-): void => {
+const renderAssets = (api: Cip56HoldingsApi, preapprovalApi?: AmuletPreapprovalApi): void => {
   render(
     <TestQueryClientProvider>
       <VaultContext.Provider value={baseVault()}>
-        <TokensPanel
+        <AssetsPanel
           api={api}
-          transfersApi={transfersApi}
           preapprovalApi={preapprovalApi}
         />
       </VaultContext.Provider>
@@ -65,7 +59,7 @@ const renderTokens = (
   )
 }
 
-describe('TokensPanel', () => {
+describe('AssetsPanel', () => {
   const originalClipboard = globalThis.navigator?.clipboard
 
   afterEach(() => {
@@ -121,7 +115,7 @@ describe('TokensPanel', () => {
       },
     }
 
-    renderTokens(api)
+    renderAssets(api)
 
     await screen.findByText('Token holdings')
     await screen.findByText('15.75 Amulet')
@@ -185,7 +179,7 @@ describe('TokensPanel', () => {
       },
     }
 
-    renderTokens(api)
+    renderAssets(api)
 
     await screen.findByText('15.75 Amulet')
     await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
@@ -194,70 +188,6 @@ describe('TokensPanel', () => {
     assert.equal(detailsCalls, 0)
   })
 
-  it('shows incoming transfers only when the active party has pending receipts', async () => {
-    // Scenario: Tokens combines balances with token actions. Incoming transfers
-    // should appear above holdings when pending, and disappear when the API has none.
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: async () => [
-        {
-          key: 'dso::party:Amulet',
-          tokenLabel: 'Amulet',
-          instrumentId: { admin: 'dso::party', id: 'Amulet' },
-          totalAmount: '7',
-          source: 'scan',
-        },
-      ],
-    }
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [
-        {
-          contractId: 'transfer-cid-1',
-          interfaceViewValue: {
-            transfer: {
-              sender: 'sender-party-1234567890abcdef',
-              receiver: 'alice::party',
-              amount: '42',
-              instrumentId: { id: 'Amulet' },
-            },
-          },
-        },
-      ],
-      acceptTransfer: async () => ({ updateId: 'update-1' }),
-    }
-
-    renderTokens(holdingsApi, transfersApi)
-
-    await screen.findByText('Incoming transfers')
-    await screen.findByText('42 Amulet')
-    await screen.findByText('7 Amulet')
-  })
-
-  it('hides the incoming transfer section when there are no pending receipts', async () => {
-    // Scenario: an empty incoming-transfer list should not take vertical space
-    // in Tokens; holdings remain the only visible token section.
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: async () => [
-        {
-          key: 'dso::party:Amulet',
-          tokenLabel: 'Amulet',
-          instrumentId: { admin: 'dso::party', id: 'Amulet' },
-          totalAmount: '7',
-          source: 'scan',
-        },
-      ],
-    }
-    const transfersApi: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-      acceptTransfer: async () => ({ updateId: 'update-1' }),
-    }
-
-    renderTokens(holdingsApi, transfersApi)
-
-    await screen.findByText('7 Amulet')
-    assert.equal(screen.queryByText('Incoming transfers'), null)
-    assert.equal(screen.queryByText('No pending transfers'), null)
-  })
-
   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.
@@ -285,7 +215,7 @@ describe('TokensPanel', () => {
       },
     }
 
-    renderTokens(holdingsApi, undefined, preapprovalApi)
+    renderAssets(holdingsApi, preapprovalApi)
 
     await screen.findByText('Amulet auto-accept')
     await screen.findByText('Disabled')
@@ -314,7 +244,7 @@ describe('TokensPanel', () => {
       },
     }
 
-    renderTokens(holdingsApi, undefined, preapprovalApi)
+    renderAssets(holdingsApi, preapprovalApi)
 
     await screen.findByText('Disabled')
     await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
@@ -355,7 +285,7 @@ describe('TokensPanel', () => {
       },
     }
 
-    renderTokens(holdingsApi, undefined, preapprovalApi)
+    renderAssets(holdingsApi, preapprovalApi)
 
     await screen.findByText('Enabled')
     await screen.findByText('Expires 2026-06-11 12:00 UTC')
@@ -390,7 +320,7 @@ describe('TokensPanel', () => {
       cancelAmuletPreapproval: async () => ({ updateId: 'cancel-update-1' }),
     }
 
-    renderTokens(holdingsApi, undefined, preapprovalApi)
+    renderAssets(holdingsApi, preapprovalApi)
 
     await screen.findByText('contractId:')
     await screen.findByText('0003..449c')
@@ -423,7 +353,7 @@ describe('TokensPanel', () => {
       cancelAmuletPreapproval: async () => ({ updateId: 'cancel-expired-1' }),
     }
 
-    renderTokens(holdingsApi, undefined, preapprovalApi)
+    renderAssets(holdingsApi, preapprovalApi)
 
     await screen.findByText('Expired')
     await screen.findByText('Expires 2026-06-01 12:00 UTC')
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 3b227ba1..1d986677 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -69,15 +69,15 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-describe('HomeTabs token navigation', () => {
+describe('HomeTabs navigation', () => {
   afterEach(() => {
     // HomeTabs child panels can own polling hooks, so unmount them between scenarios.
     cleanup()
   })
 
-  it('renders Activity, Tokens, and Send tabs without the former Assets tab', () => {
-    // Scenario: token balances and incoming token actions now live under Tokens.
-    // The top-level wallet navigation should expose token viewing and token sending separately.
+  it('renders Assets, Transfers, Activity, and Send tabs', () => {
+    // Scenario: token balances, incoming transfers, history, and sending each own a
+    // top-level tab. Activity stays the default landing view.
     render(
       <TestQueryClientProvider>
         <VaultContext.Provider value={baseVault()}>
@@ -87,14 +87,14 @@ describe('HomeTabs token navigation', () => {
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
-    assert.ok(screen.getByRole('tab', { name: 'Tokens' }))
+    assert.ok(screen.getByRole('tab', { name: 'Assets' }))
+    assert.ok(screen.getByRole('tab', { name: 'Transfers' }))
     assert.ok(screen.getByRole('tab', { name: 'Send' }))
-    assert.equal(screen.queryByRole('tab', { name: /Assets/ }), null)
   })
 
-  it('opens the Tokens tab with the current party holdings', async () => {
-    // Scenario: token balances live in their own tab, separate from incoming
-    // transfer requests. Opening Tokens should mount the holdings panel for the
+  it('opens the Assets tab with the current party holdings', async () => {
+    // Scenario: token balances live in the Assets tab, separate from incoming
+    // transfer requests. Opening Assets should mount the holdings panel for the
     // active account and show the grouped balance.
     const holdingsApi: Cip56HoldingsApi = {
       listTokenHoldingSummaries: async () => [
@@ -119,16 +119,16 @@ describe('HomeTabs token navigation', () => {
       </TestQueryClientProvider>,
     )
 
-    await userEvent.click(screen.getByRole('tab', { name: 'Tokens' }))
+    await userEvent.click(screen.getByRole('tab', { name: 'Assets' }))
 
     await screen.findByText('Token holdings')
     await screen.findByText('7 Amulet')
   })
 
-  it('badges the Tokens tab when hidden incoming transfers require action', async () => {
-    // Scenario: incoming transfer polling moved from the deleted Assets tab to
-    // Tokens. The Tokens panel must stay mounted while Activity is selected so
-    // pending receiver-acceptance work can still badge the tab.
+  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.
     const transfersApi: Cip56TransferApi = {
       listPendingIncomingTransfers: async () => [
         {
@@ -162,7 +162,7 @@ describe('HomeTabs token navigation', () => {
     )
 
     assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
-    await screen.findByRole('tab', { name: 'Tokens 1' })
+    await screen.findByRole('tab', { name: 'Transfers 1' })
   })
 
   it('shows Activity only for the selected account', () => {
diff --git a/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
similarity index 94%
rename from carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
rename to carpincho-wallet/test/components/TransfersPanel.test.tsx
index ebe4534b..162112dc 100644
--- a/carpincho-wallet/test/components/IncomingTransfersSection.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -2,7 +2,7 @@ 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 { IncomingTransfersSection } from '@/components/IncomingTransfersSection'
+import { TransfersPanel } from '@/components/TransfersPanel'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
@@ -43,17 +43,17 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts incoming transfers under vault context so accept can use wallet signing hooks.
-const renderIncomingTransfers = (api: Cip56TransferApi): void => {
+const renderTransfers = (api: Cip56TransferApi): void => {
   render(
     <TestQueryClientProvider>
       <VaultContext.Provider value={baseVault()}>
-        <IncomingTransfersSection api={api} />
+        <TransfersPanel api={api} />
       </VaultContext.Provider>
     </TestQueryClientProvider>,
   )
 }
 
-describe('IncomingTransfersSection', () => {
+describe('TransfersPanel', () => {
   afterEach(() => {
     // Each render owns a hook polling loop; cleanup unmounts it before the next scenario.
     cleanup()
@@ -89,7 +89,7 @@ describe('IncomingTransfersSection', () => {
       },
     }
 
-    renderIncomingTransfers(api)
+    renderTransfers(api)
 
     await screen.findByText('Incoming transfers')
     await screen.findByText('42 Amulet')
@@ -130,7 +130,7 @@ describe('IncomingTransfersSection', () => {
       acceptTransfer: async () => ({ updateId: 'update-1' }),
     }
 
-    renderIncomingTransfers(api)
+    renderTransfers(api)
 
     await screen.findByText('666.0000000000 Amulet')
     assert.equal(screen.getByText('invoice 42').textContent, 'invoice 42')

From 3937c53514bc4752d8048d685b37ee943b61b8f1 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 12:34:13 -0300
Subject: [PATCH 54/98] docs(carpincho): describe the new home tab layout in
 AGENTS.md

---
 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 247e10fd..a3da42f2 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-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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: `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), `TokensPanel` (token balances/holdings plus the embedded `IncomingTransfersSection` and the Amulet preapproval auto-accept toggle), and `SendTokensPanel` (the token transfer form). The Tokens tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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-dialog`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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 four tabs, in order: `AssetsPanel` (token balances/holdings plus the Amulet preapproval auto-accept toggle), `TransfersPanel` (incoming CIP-56 transfers awaiting receiver acceptance), `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `SendTokensPanel` (the token transfer form); Activity is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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, incoming 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 b3949d8153c732218d90858819960d444bd6bccb Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:13:10 -0300
Subject: [PATCH 55/98] chore(wallet-service): document standalone env config
 for Splice LocalNet

---
 canton-barebones/wallet-service/.env.example | 29 +++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/canton-barebones/wallet-service/.env.example b/canton-barebones/wallet-service/.env.example
index 925dcdf4..76f95f1f 100644
--- a/canton-barebones/wallet-service/.env.example
+++ b/canton-barebones/wallet-service/.env.example
@@ -1,19 +1,28 @@
+# Standalone wallet-service config (read by src/config.ts). When run via
+# `npm run canton:up`, docker-compose.yaml supplies these instead and points the
+# Canton URLs at host.docker.internal. Use this file only to run the service
+# directly with `node`/`tsx` against a Splice LocalNet already up on the host.
+
 WALLET_SERVICE_PORT=3010
 WALLET_SERVICE_CORS_ORIGINS=http://localhost:3011
 
-NETWORK=canton:local
+NETWORK=canton:localnet
 WALLET_PROVIDER_ID=wallet-service
 WALLET_PROVIDER_VERSION=0.1.0
 WALLET_PROVIDER_URL=http://localhost:3010
 WALLET_PROVIDER_USER_URL=http://localhost:3010
 
-CANTON_JSON_API_URL=http://localhost:3013
-CANTON_LEDGER_API_URL=grpc://localhost:3014
-CANTON_ADMIN_API_URL=grpc://localhost:3015
+# Splice LocalNet app-user participant, as reachable from the host.
+CANTON_JSON_API_URL=http://localhost:2975
+CANTON_LEDGER_API_URL=grpc://localhost:2901
+CANTON_ADMIN_API_URL=grpc://localhost:2902
+
+# Splice validator / scan endpoints used by the CIP-56 token SDK.
+SPLICE_VALIDATOR_URL=http://localhost:2000/api/validator
+SPLICE_SCAN_API_URL=http://scan.localhost:4000/api/scan
+SPLICE_REGISTRY_API_URL=http://localhost:2000/api/validator/v0/scan-proxy
+
+# Required in real mode. Mint with: npm run canton:token -- ledger-api-user
+CANTON_BACKEND_TOKEN=
 
-CANTON_ADMIN_USER_ID=wallet-service
-# CANTON_BACKEND_TOKEN is optional. When omitted, the service self-mints an
-# HS256 JWT from CANTON_AUTH_AUDIENCE / CANTON_AUTH_SECRET / CANTON_ADMIN_USER_ID.
-# Set it explicitly to override the self-mint path (e.g. paste output of
-# `npm run --silent canton:token` for ad-hoc debugging).
-# CANTON_BACKEND_TOKEN=
+# WALLET_SERVICE_MOCK=1  # uncomment to short-circuit Canton calls (token then optional)

From bf125c5833620beb49f5404e6070cfb3923ec092 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:31:08 -0300
Subject: [PATCH 56/98] feat(carpincho): make Amulet auto-accept a toggle in
 the Transfers tab

Replace the auto-accept enable/disable button with a Radix Switch and a
tooltip, and move the section from the Assets tab to the Transfers tab.
Drop the redundant Token holdings heading, move the holdings refreshing
indicator to the end of the panel, and land on the Assets tab by default.
---
 carpincho-wallet/package.json                 |   1 +
 .../src/components/AssetsPanel.tsx            | 138 +------------
 carpincho-wallet/src/components/HomeTabs.tsx  |   6 +-
 .../src/components/TransfersPanel.tsx         |  61 ++++++
 carpincho-wallet/src/components/ui/Switch.tsx |  17 ++
 .../test/components/AssetsPanel.test.tsx      | 184 +----------------
 .../test/components/HomeTabs.test.tsx         | 104 ++++++----
 .../test/components/TransfersPanel.test.tsx   | 124 ++++++++++-
 package-lock.json                             | 192 ++++++++++++++++++
 9 files changed, 465 insertions(+), 362 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/Switch.tsx

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index 2c173e7c..fe096546 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-dialog": "^1.1.15",
+    "@radix-ui/react-switch": "^1.3.0",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.8",
diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index f3aabf50..f52f7b22 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,22 +1,16 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
-import { PLAIN_ICON_BUTTON_CLASS, PrimaryButton, SecondaryButton } from '@/components/ui/Button'
-import { COPY_ICON } from '@/components/ui/icons'
-import { toast } from '@/components/ui/toast'
-import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
-import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
+import { SecondaryButton } from '@/components/ui/Button'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
-import { copyText } from '@/utils/clipboard'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
 export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
-  preapprovalApi?: AmuletPreapprovalApi
 }
 
 interface HoldingDetailRowProps {
@@ -30,23 +24,6 @@ interface TokenHoldingDetailsProps {
   summary: TokenHoldingSummary
 }
 
-interface AmuletPreapprovalSectionProps {
-  account: AccountPublic
-  api?: AmuletPreapprovalApi
-}
-
-interface ContractIdRowProps {
-  contractId: string
-}
-
-// Keeps the auto-accept contract id scannable while preserving copy access to the full value.
-const compactContractId = (contractId: string): string => {
-  if (contractId.length <= 10) {
-    return contractId
-  }
-  return `${contractId.slice(0, 4)}..${contractId.slice(-4)}`
-}
-
 // Keeps raw holding values readable in the expanded UTXO details area.
 const HoldingDetailRow = ({ label, value }: HoldingDetailRowProps): JSX.Element => (
   <div className="grid gap-1">
@@ -115,103 +92,8 @@ const TokenHoldingDetails = ({ account, api, summary }: TokenHoldingDetailsProps
   )
 }
 
-// Shows the ledger contract id as debug metadata instead of a full-width raw value.
-const ContractIdRow = ({ contractId }: ContractIdRowProps): JSX.Element => (
-  <div className="mt-3 flex min-w-0 items-center gap-1.5 rounded-md border border-border bg-muted px-2 py-1.5 text-[0.74rem] text-muted-foreground">
-    <span className="shrink-0 font-medium">contractId:</span>
-    <span className="min-w-0 font-mono text-foreground">{compactContractId(contractId)}</span>
-    <button
-      type="button"
-      aria-label="Copy contract ID"
-      className={`${PLAIN_ICON_BUTTON_CLASS} ml-auto size-6 shrink-0`}
-      onClick={() => copyText(contractId, 'Contract ID copied')}
-    >
-      {COPY_ICON}
-    </button>
-  </div>
-)
-
-// 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 [pendingAction, setPendingAction] = useState<'enable' | 'disable' | undefined>(undefined)
-  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 canDisable = isActive || isExpired
-  const statusLabel = isExpired ? 'Expired' : isActive ? 'Enabled' : 'Disabled'
-  const ActionButton = canDisable ? SecondaryButton : PrimaryButton
-
-  useEffect(() => {
-    if (pendingAction === 'enable' && isActive) {
-      setPendingAction(undefined)
-    }
-    if (pendingAction === 'disable' && status !== undefined && !isActive && !isExpired) {
-      setPendingAction(undefined)
-    }
-  }, [pendingAction, isActive, isExpired, status])
-
-  const handleToggle = async (): Promise<void> => {
-    const action = canDisable ? 'disable' : 'enable'
-    setPendingAction(action)
-    try {
-      if (canDisable) {
-        await preapproval.disable()
-        toast.success('Amulet auto-accept disabled')
-      } else {
-        await preapproval.enable()
-        toast.success('Amulet auto-accept enabled')
-      }
-    } catch (error) {
-      setPendingAction(undefined)
-      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
-    }
-  }
-
-  return (
-    <section 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">
-          <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Amulet auto-accept</h2>
-          <p className="m-0 mt-1 text-[0.82rem] text-muted-foreground">
-            {preapproval.loading && status === undefined ? 'Checking' : statusLabel}
-          </p>
-        </div>
-        <ActionButton
-          className="shrink-0 px-3 py-1.5 text-[0.78rem]"
-          disabled={preapproval.busy || (preapproval.loading && status === undefined)}
-          onClick={handleToggle}
-        >
-          {canDisable ? 'Disable auto-accept' : 'Enable auto-accept'}
-        </ActionButton>
-      </div>
-      {status?.expiresAt === undefined ? null : (
-        <p className="m-0 mt-3 text-[0.78rem] text-muted-foreground">
-          Expires {transferTimeLabel(status.expiresAt)}
-        </p>
-      )}
-      {pendingAction === undefined ? null : (
-        <div className="mt-3 rounded-md border border-border bg-muted px-3 py-2 text-[0.78rem] text-muted-foreground">
-          This can take a few moments.
-        </div>
-      )}
-      {status?.contractId === undefined ? null : <ContractIdRow contractId={status.contractId} />}
-      {preapproval.error === undefined ? null : (
-        <div className="mt-3 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-          {preapproval.error}
-        </div>
-      )}
-    </section>
-  )
-}
-
 // Renders active CIP-56 token holding UTXOs grouped as token balances.
-export const AssetsPanel = ({ account, api, preapprovalApi }: AssetsPanelProps): JSX.Element => {
+export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
@@ -232,16 +114,6 @@ export const AssetsPanel = ({ account, api, preapprovalApi }: AssetsPanelProps):
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
-      <AmuletPreapprovalSection
-        account={activeAccount}
-        api={preapprovalApi}
-      />
-
-      <div className="flex items-center justify-between gap-3 px-1">
-        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Token holdings</h2>
-        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
-      </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}
@@ -309,6 +181,10 @@ export const AssetsPanel = ({ account, api, preapprovalApi }: AssetsPanelProps):
           })}
         </div>
       )}
+
+      {loading ? (
+        <span className="px-1 text-[0.78rem] text-muted-foreground">Refreshing</span>
+      ) : null}
     </div>
   )
 }
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index f7f33aa8..2d6c7df3 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -4,6 +4,7 @@ import { AssetsPanel } from '@/components/AssetsPanel'
 import { type Cip56SendApi, SendTokensPanel } from '@/components/SendTokensPanel'
 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'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import type { AccountPublic, TransactionRecord } from '@/vault/types'
@@ -13,6 +14,7 @@ interface HomeTabsProps {
   transactions: TransactionRecord[]
   tokensApi?: Cip56HoldingsApi
   transfersApi?: Cip56TransferApi
+  preapprovalApi?: AmuletPreapprovalApi
   sendApi?: Cip56SendApi
 }
 
@@ -25,6 +27,7 @@ export const HomeTabs = ({
   transactions,
   tokensApi,
   transfersApi,
+  preapprovalApi,
   sendApi,
 }: HomeTabsProps): JSX.Element => {
   const activeAccountId = account?.id
@@ -52,7 +55,7 @@ export const HomeTabs = ({
 
   return (
     <Tabs
-      defaultValue="activity"
+      defaultValue="assets"
       className="flex min-h-0 flex-1 flex-col"
     >
       <TabsList>
@@ -85,6 +88,7 @@ export const HomeTabs = ({
         <TransfersPanel
           account={account}
           api={transfersApi}
+          preapprovalApi={preapprovalApi}
           onPendingCountChange={onPendingTransferCountChange}
         />
       </TabContent>
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 6c9b4e08..fd37960c 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -6,7 +6,11 @@ import {
   transferTimeLabel,
 } from '@/cip56/transfers'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+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'
@@ -16,6 +20,7 @@ import { useVault } from '@/vault/useVault'
 export interface TransfersPanelProps {
   account?: AccountPublic
   api?: Cip56TransferApi
+  preapprovalApi?: AmuletPreapprovalApi
   hideWhenEmpty?: boolean
   onPendingCountChange?: (count: number) => void
 }
@@ -25,6 +30,56 @@ interface TransferDetailRowProps {
   value: string
 }
 
+interface AmuletPreapprovalSectionProps {
+  account: AccountPublic
+  api?: AmuletPreapprovalApi
+}
+
+// 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 canDisable = isActive || isExpired
+
+  const handleToggle = async (): Promise<void> => {
+    try {
+      if (canDisable) {
+        await preapproval.disable()
+        toast.success('Amulet auto-accept disabled')
+      } else {
+        await preapproval.enable()
+        toast.success('Amulet auto-accept enabled')
+      }
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-between gap-3 px-1">
+      <div className="flex items-center gap-1.5">
+        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Auto-accept</h2>
+        <Tooltip content="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." />
+      </div>
+      <Switch
+        aria-label="Auto-accept"
+        checked={canDisable}
+        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">
@@ -37,6 +92,7 @@ const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Elemen
 export const TransfersPanel = ({
   account,
   api,
+  preapprovalApi,
   hideWhenEmpty = false,
   onPendingCountChange,
 }: TransfersPanelProps): JSX.Element | null => {
@@ -96,6 +152,11 @@ export const TransfersPanel = ({
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
+      <AmuletPreapprovalSection
+        account={activeAccount}
+        api={preapprovalApi}
+      />
+
       <div className="flex items-center justify-between gap-3 px-1">
         <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Incoming transfers</h2>
         {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
diff --git a/carpincho-wallet/src/components/ui/Switch.tsx b/carpincho-wallet/src/components/ui/Switch.tsx
new file mode 100644
index 00000000..a063b6f2
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/Switch.tsx
@@ -0,0 +1,17 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch'
+import { cn } from '@/utils/cn'
+
+// Pill toggle for binary on/off settings; thumb slides on checked.
+export const Switch = ({ className, ...props }: SwitchPrimitive.SwitchProps): JSX.Element => (
+  <SwitchPrimitive.Root
+    className={cn(
+      'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-border-strong transition-colors',
+      'bg-muted data-[state=checked]:border-primary data-[state=checked]:bg-primary',
+      'focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-60',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitive.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-primary-foreground shadow transition-transform data-[state=checked]:translate-x-[1.125rem]" />
+  </SwitchPrimitive.Root>
+)
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index f283d4bf..5569dc40 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -3,8 +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 { AssetsPanel } from '@/components/AssetsPanel'
-import { getToastEntries, toast } from '@/components/ui/toast'
-import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
+import { toast } from '@/components/ui/toast'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
@@ -46,14 +45,11 @@ const baseVault = (): VaultContextValue =>
   }) as VaultContextValue
 
 // Mounts the panel under vault context so it can resolve the active account.
-const renderAssets = (api: Cip56HoldingsApi, preapprovalApi?: AmuletPreapprovalApi): void => {
+const renderAssets = (api: Cip56HoldingsApi): void => {
   render(
     <TestQueryClientProvider>
       <VaultContext.Provider value={baseVault()}>
-        <AssetsPanel
-          api={api}
-          preapprovalApi={preapprovalApi}
-        />
+        <AssetsPanel api={api} />
       </VaultContext.Provider>
     </TestQueryClientProvider>,
   )
@@ -117,7 +113,6 @@ describe('AssetsPanel', () => {
 
     renderAssets(api)
 
-    await screen.findByText('Token holdings')
     await screen.findByText('15.75 Amulet')
     assert.equal(screen.getByText('UTXOs load on demand').textContent, 'UTXOs load on demand')
     assert.equal(screen.queryByText('holding-cid-1'), null)
@@ -187,177 +182,4 @@ describe('AssetsPanel', () => {
     assert.equal(screen.getByText('cached-holding-cid').textContent, 'cached-holding-cid')
     assert.equal(detailsCalls, 0)
   })
-
-  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 holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: 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')
-      },
-    }
-
-    renderAssets(holdingsApi, preapprovalApi)
-
-    await screen.findByText('Amulet auto-accept')
-    await screen.findByText('Disabled')
-    await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
-
-    assert.equal(createCalls, 1)
-  })
-
-  it('keeps the polling context visible while Amulet auto-accept is being confirmed', async () => {
-    // Scenario: enabling auto-accept can be committed before Scan reflects the
-    // new TransferPreapproval. The panel should tell the user to wait.
-    let resolveCreate: (() => void) | undefined
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: 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')
-      },
-    }
-
-    renderAssets(holdingsApi, preapprovalApi)
-
-    await screen.findByText('Disabled')
-    await userEvent.click(screen.getByRole('button', { name: 'Enable auto-accept' }))
-
-    const pendingMessage = await screen.findByText('This can take a few moments.')
-    assert.match(
-      pendingMessage.getAttribute('class') ?? '',
-      /bg-muted/,
-      'pending confirmation should look like an informational state, not a field value',
-    )
-    resolveCreate?.()
-  })
-
-  it('shows active Amulet auto-accept details and disables it for the selected party', async () => {
-    // Scenario: the selected party already has an active receiver preapproval.
-    // The panel should show its expiry and cancel the same receiver preapproval.
-    let cancelCalls = 0
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: 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' }
-      },
-    }
-
-    renderAssets(holdingsApi, preapprovalApi)
-
-    await screen.findByText('Enabled')
-    await screen.findByText('Expires 2026-06-11 12:00 UTC')
-    await screen.findByText('prea..id-1')
-    await userEvent.click(screen.getByRole('button', { name: 'Disable auto-accept' }))
-
-    assert.equal(cancelCalls, 1)
-  })
-
-  it('shows a compact copyable Amulet auto-accept contract id', async () => {
-    // Scenario: the active preapproval contract id is useful for debugging, but
-    // it is too long to render as a raw value in the wallet card.
-    const copied: string[] = []
-    const contractId =
-      '000399a68ea61b6f7864584d0c783db8bb6d6ea2ff9f1a3ec923949c787fd0ac27ca1212209fcebb9611ddbf454ed02c9c29d6a4f0f2081be58e636ee00819e750bc9d449c'
-    Object.defineProperty(globalThis.navigator, 'clipboard', {
-      value: { writeText: async (value: string) => void copied.push(value) },
-      configurable: true,
-    })
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: async () => [],
-    }
-    const preapprovalApi: AmuletPreapprovalApi = {
-      getAmuletPreapprovalStatus: async () => ({
-        active: true,
-        expired: false,
-        contractId,
-      }),
-      createAmuletPreapproval: async () => {
-        throw new Error('create should not run for an active preapproval')
-      },
-      cancelAmuletPreapproval: async () => ({ updateId: 'cancel-update-1' }),
-    }
-
-    renderAssets(holdingsApi, preapprovalApi)
-
-    await screen.findByText('contractId:')
-    await screen.findByText('0003..449c')
-    assert.equal(screen.queryByText(contractId), null)
-    await userEvent.click(screen.getByRole('button', { name: 'Copy contract ID' }))
-
-    assert.deepEqual(copied, [contractId])
-    assert.deepEqual(
-      getToastEntries().map((entry) => entry.message),
-      ['Contract ID copied'],
-    )
-  })
-
-  it('marks expired Amulet auto-accept as not active', async () => {
-    // Scenario: a preapproval contract can still exist after its expiry.
-    // The UI should label it expired so the user can clear it before creating a fresh one.
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: 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' }),
-    }
-
-    renderAssets(holdingsApi, preapprovalApi)
-
-    await screen.findByText('Expired')
-    await screen.findByText('Expires 2026-06-01 12:00 UTC')
-    await screen.findByText('expi..-cid')
-    assert.ok(screen.getByRole('button', { name: 'Disable auto-accept' }))
-  })
 })
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 1d986677..38bb890e 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -2,7 +2,10 @@ 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 { ReactNode } from 'react'
 import { HomeTabs } from '@/components/HomeTabs'
+import { TooltipProvider } from '@/components/ui/Tooltip'
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
@@ -69,6 +72,24 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
+// Keeps the Transfers tab auto-accept toggle inert for navigation-focused scenarios.
+const inactivePreapprovalApi: AmuletPreapprovalApi = {
+  getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
+  createAmuletPreapproval: async () => ({ updateId: 'noop' }),
+  cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
+}
+
+// Wraps HomeTabs in the providers its child panels depend on (query, tooltip, vault).
+const renderHome = (vault: VaultContextValue, children: ReactNode): void => {
+  render(
+    <TestQueryClientProvider>
+      <TooltipProvider>
+        <VaultContext.Provider value={vault}>{children}</VaultContext.Provider>
+      </TooltipProvider>
+    </TestQueryClientProvider>,
+  )
+}
+
 describe('HomeTabs navigation', () => {
   afterEach(() => {
     // HomeTabs child panels can own polling hooks, so unmount them between scenarios.
@@ -77,18 +98,18 @@ describe('HomeTabs navigation', () => {
 
   it('renders Assets, Transfers, Activity, and Send tabs', () => {
     // Scenario: token balances, incoming transfers, history, and sending each own a
-    // top-level tab. Activity stays the default landing view.
-    render(
-      <TestQueryClientProvider>
-        <VaultContext.Provider value={baseVault()}>
-          <HomeTabs transactions={[]} />
-        </VaultContext.Provider>
-      </TestQueryClientProvider>,
+    // top-level tab. Assets is the default landing view.
+    renderHome(
+      baseVault(),
+      <HomeTabs
+        transactions={[]}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
     )
 
-    assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
-    assert.ok(screen.getByRole('tab', { name: 'Assets' }))
+    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: 'Send' }))
   })
 
@@ -108,20 +129,17 @@ describe('HomeTabs navigation', () => {
       ],
     }
 
-    render(
-      <TestQueryClientProvider>
-        <VaultContext.Provider value={baseVault()}>
-          <HomeTabs
-            transactions={[]}
-            tokensApi={holdingsApi}
-          />
-        </VaultContext.Provider>
-      </TestQueryClientProvider>,
+    renderHome(
+      baseVault(),
+      <HomeTabs
+        transactions={[]}
+        tokensApi={holdingsApi}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
     )
 
     await userEvent.click(screen.getByRole('tab', { name: 'Assets' }))
 
-    await screen.findByText('Token holdings')
     await screen.findByText('7 Amulet')
   })
 
@@ -149,41 +167,37 @@ describe('HomeTabs navigation', () => {
       listTokenHoldingSummaries: async () => [],
     }
 
-    render(
-      <TestQueryClientProvider>
-        <VaultContext.Provider value={baseVault()}>
-          <HomeTabs
-            transactions={[]}
-            tokensApi={holdingsApi}
-            transfersApi={transfersApi}
-          />
-        </VaultContext.Provider>
-      </TestQueryClientProvider>,
+    renderHome(
+      baseVault(),
+      <HomeTabs
+        transactions={[]}
+        tokensApi={holdingsApi}
+        transfersApi={transfersApi}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
     )
 
-    assert.equal(screen.getByRole('tab', { name: 'Activity' }).getAttribute('data-state'), 'active')
+    assert.equal(screen.getByRole('tab', { name: 'Assets' }).getAttribute('data-state'), 'active')
     await screen.findByRole('tab', { name: 'Transfers 1' })
   })
 
-  it('shows Activity only for the selected account', () => {
+  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.
-    render(
-      <TestQueryClientProvider>
-        <VaultContext.Provider
-          value={{ ...baseVault(), accounts: [ACCOUNT, SECOND_ACCOUNT], primary: SECOND_ACCOUNT }}
-        >
-          <HomeTabs
-            account={SECOND_ACCOUNT}
-            transactions={[
-              txFor(ACCOUNT, 'tx-alice', 'Alice transfer'),
-              txFor(SECOND_ACCOUNT, 'tx-bob', 'Bob transfer'),
-            ]}
-          />
-        </VaultContext.Provider>
-      </TestQueryClientProvider>,
+    renderHome(
+      { ...baseVault(), accounts: [ACCOUNT, SECOND_ACCOUNT], primary: SECOND_ACCOUNT },
+      <HomeTabs
+        account={SECOND_ACCOUNT}
+        transactions={[
+          txFor(ACCOUNT, 'tx-alice', 'Alice transfer'),
+          txFor(SECOND_ACCOUNT, 'tx-bob', 'Bob transfer'),
+        ]}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
     )
 
+    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }))
+
     assert.equal(screen.queryByText('Alice transfer'), null)
     assert.equal(screen.getByText('Bob transfer').textContent, 'Bob transfer')
   })
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 162112dc..3aa753be 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -3,6 +3,8 @@ 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 { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
@@ -42,13 +44,28 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
+// Keeps the auto-accept toggle inert for transfer-list scenarios that do not exercise it.
+const inactivePreapprovalApi: AmuletPreapprovalApi = {
+  getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
+  createAmuletPreapproval: async () => ({ updateId: 'noop' }),
+  cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
+}
+
 // Mounts incoming transfers under vault context so accept can use wallet signing hooks.
-const renderTransfers = (api: Cip56TransferApi): void => {
+const renderTransfers = (
+  api: Cip56TransferApi,
+  preapprovalApi: AmuletPreapprovalApi = inactivePreapprovalApi,
+): void => {
   render(
     <TestQueryClientProvider>
-      <VaultContext.Provider value={baseVault()}>
-        <TransfersPanel api={api} />
-      </VaultContext.Provider>
+      <TooltipProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <TransfersPanel
+            api={api}
+            preapprovalApi={preapprovalApi}
+          />
+        </VaultContext.Provider>
+      </TooltipProvider>
     </TestQueryClientProvider>,
   )
 }
@@ -151,4 +168,103 @@ describe('TransfersPanel', () => {
     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('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')
+  })
 })
diff --git a/package-lock.json b/package-lock.json
index be94118e..a2f89089 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-dialog": "^1.1.15",
+        "@radix-ui/react-switch": "^1.3.0",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toast": "^1.2.15",
         "@radix-ui/react-tooltip": "^1.2.8",
@@ -3608,6 +3609,182 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.3.0.tgz",
+      "integrity": "sha512-GP1EZwhoZO/GGnhM1P5/2Vpm8iN8EnngyU0oezn2l78kN8tj25pyrvjIaT7azBhK615KSt+P2w39y57YV5jVkA==",
+      "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-primitive": "2.1.5",
+        "@radix-ui/react-use-controllable-state": "1.2.3",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-use-size": "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-switch/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-switch/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-switch/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-switch/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.5.tgz",
+      "integrity": "sha512-zifXeB8Y88qCYx8PLZ5oQb32KwZub+s925mMoZsBBq9KUQqWKkREubTfs6ASjRPPBe7Jt9O8OHH89+95VG+grA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.5"
+      },
+      "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-switch/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.5.tgz",
+      "integrity": "sha512-rCMO3QsIVKv5JTY5CVbo2MvO77SpEqqYc8AvRE7OWqRDOIqAKjsp+DrmnY9uc8NPdxB5E2z47HTYGeE2+NTptg==",
+      "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-switch/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-switch/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-switch/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-switch/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.2.tgz",
+      "integrity": "sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==",
+      "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-tabs": {
       "version": "1.1.13",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
@@ -3791,6 +3968,21 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.2.tgz",
+      "integrity": "sha512-IGBQPtRFdhN6MQ8dbegVmBq1LVZluya3F1jWY+puIcQC3MHctRwTDSBWCkL/3ZcnMJLTMJ++Z+ktmvg0F89iCw==",
+      "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-rect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",

From dbe2f02d12fb9aba7a5615c668af07be074f1054 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:31:31 -0300
Subject: [PATCH 57/98] docs(carpincho): reflect auto-accept toggle move and
 default Assets tab

---
 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 a3da42f2..9aa5691e 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-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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 four tabs, in order: `AssetsPanel` (token balances/holdings plus the Amulet preapproval auto-accept toggle), `TransfersPanel` (incoming CIP-56 transfers awaiting receiver acceptance), `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `SendTokensPanel` (the token transfer form); Activity is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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-dialog`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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 four tabs, in order: `AssetsPanel` (token balances/holdings), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus incoming CIP-56 transfers awaiting receiver acceptance), `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `SendTokensPanel` (the token transfer form); Assets is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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, incoming 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 ccbb810f5088c3f246cda79b25cb21bddd4147b0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:33:52 -0300
Subject: [PATCH 58/98] refactor(carpincho): drop orphaned hideWhenEmpty branch
 from TransfersPanel

---
 carpincho-wallet/src/components/TransfersPanel.tsx | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index fd37960c..e958028c 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -21,7 +21,6 @@ export interface TransfersPanelProps {
   account?: AccountPublic
   api?: Cip56TransferApi
   preapprovalApi?: AmuletPreapprovalApi
-  hideWhenEmpty?: boolean
   onPendingCountChange?: (count: number) => void
 }
 
@@ -93,9 +92,8 @@ export const TransfersPanel = ({
   account,
   api,
   preapprovalApi,
-  hideWhenEmpty = false,
   onPendingCountChange,
-}: TransfersPanelProps): JSX.Element | null => {
+}: TransfersPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
   const [acceptingCid, setAcceptingCid] = useState<string | undefined>(undefined)
@@ -136,9 +134,6 @@ export const TransfersPanel = ({
   }
 
   if (activeAccount === undefined) {
-    if (hideWhenEmpty) {
-      return null
-    }
     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>
@@ -146,10 +141,6 @@ export const TransfersPanel = ({
     )
   }
 
-  if (hideWhenEmpty && transfers.length === 0) {
-    return null
-  }
-
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 py-2">
       <AmuletPreapprovalSection

From 26d725228545acbd5778700658e591ef8c2eb94e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:39:03 -0300
Subject: [PATCH 59/98] fix(carpincho): keep auto-accept toggle enabled during
 background polling

Gate the switch on an in-flight toggle action plus initial load instead of
the hook's busy flag, which also flips during 5s status refetches and made
the toggle dim and become unclickable on every poll.
---
 carpincho-wallet/src/components/TransfersPanel.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index e958028c..bc7b6f94 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -46,8 +46,14 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
   const isExpired = status?.expired === true
   const isActive = status?.active === true && !isExpired
   const canDisable = isActive || isExpired
+  const [toggling, setToggling] = useState(false)
+
+  // Block input only while a toggle is in flight or the first status load is pending;
+  // background polling refetches must not flip the switch to a disabled state.
+  const disabled = toggling || (preapproval.loading && status === undefined)
 
   const handleToggle = async (): Promise<void> => {
+    setToggling(true)
     try {
       if (canDisable) {
         await preapproval.disable()
@@ -58,6 +64,8 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
       }
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
+    } finally {
+      setToggling(false)
     }
   }
 
@@ -70,7 +78,7 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
       <Switch
         aria-label="Auto-accept"
         checked={canDisable}
-        disabled={preapproval.busy || (preapproval.loading && status === undefined)}
+        disabled={disabled}
         onCheckedChange={() => {
           void handleToggle()
         }}
@@ -113,7 +121,7 @@ export const TransfersPanel = ({
     return () => onPendingCountChange?.(0)
   }, [onPendingCountChange])
 
-  // Tracks one open transfer details section at a time to keep the assets list compact.
+  // 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,

From e5922e36c08345f2b7a323f3e11def82f784bf33 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:45:05 -0300
Subject: [PATCH 60/98] refactor(carpincho): scope preapproval busy to
 in-flight actions

Make useAmuletPreapproval.busy mean an enable/disable action is running rather
than also covering background refetches, so the auto-accept toggle no longer
needs a local guard against poll-driven disabling. Hoist the tooltip copy to a
constant and share the inactive preapproval test stub.
---
 .../src/components/TransfersPanel.tsx             | 15 +++++----------
 .../src/hooks/useAmuletPreapproval.ts             |  6 ++++--
 carpincho-wallet/src/test-utils/preapproval.ts    |  8 ++++++++
 .../test/components/HomeTabs.test.tsx             |  9 +--------
 .../test/components/TransfersPanel.test.tsx       |  8 +-------
 5 files changed, 19 insertions(+), 27 deletions(-)
 create mode 100644 carpincho-wallet/src/test-utils/preapproval.ts

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index bc7b6f94..15a25090 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -34,6 +34,9 @@ interface AmuletPreapprovalSectionProps {
   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()
@@ -46,14 +49,8 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
   const isExpired = status?.expired === true
   const isActive = status?.active === true && !isExpired
   const canDisable = isActive || isExpired
-  const [toggling, setToggling] = useState(false)
-
-  // Block input only while a toggle is in flight or the first status load is pending;
-  // background polling refetches must not flip the switch to a disabled state.
-  const disabled = toggling || (preapproval.loading && status === undefined)
 
   const handleToggle = async (): Promise<void> => {
-    setToggling(true)
     try {
       if (canDisable) {
         await preapproval.disable()
@@ -64,8 +61,6 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
       }
     } catch (error) {
       toast.error(error instanceof Error ? error.message : 'Amulet auto-accept failed')
-    } finally {
-      setToggling(false)
     }
   }
 
@@ -73,12 +68,12 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
     <div className="flex items-center justify-between gap-3 px-1">
       <div className="flex items-center gap-1.5">
         <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Auto-accept</h2>
-        <Tooltip content="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." />
+        <Tooltip content={AUTO_ACCEPT_TOOLTIP} />
       </div>
       <Switch
         aria-label="Auto-accept"
         checked={canDisable}
-        disabled={disabled}
+        disabled={preapproval.busy || (preapproval.loading && status === undefined)}
         onCheckedChange={() => {
           void handleToggle()
         }}
diff --git a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
index 7a230e37..31cd51f7 100644
--- a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
+++ b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
@@ -109,12 +109,14 @@ export const useAmuletPreapproval = (
     () => ({
       status: query.data,
       loading: query.isFetching,
-      busy: query.isRefetching || actionBusy,
+      // Action-in-flight only; background refetches must not read as busy or callers
+      // would gate input on every poll.
+      busy: actionBusy,
       ...(error === undefined ? {} : { error }),
       refresh,
       enable,
       disable,
     }),
-    [query.data, query.isFetching, query.isRefetching, actionBusy, error, refresh, enable, disable],
+    [query.data, query.isFetching, actionBusy, error, refresh, enable, disable],
   )
 }
diff --git a/carpincho-wallet/src/test-utils/preapproval.ts b/carpincho-wallet/src/test-utils/preapproval.ts
new file mode 100644
index 00000000..d73b38dd
--- /dev/null
+++ b/carpincho-wallet/src/test-utils/preapproval.ts
@@ -0,0 +1,8 @@
+import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
+
+// Keeps the auto-accept toggle inert for scenarios that do not exercise it.
+export const inactivePreapprovalApi: AmuletPreapprovalApi = {
+  getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
+  createAmuletPreapproval: async () => ({ updateId: 'noop' }),
+  cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
+}
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 38bb890e..6ce3fd92 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -5,9 +5,9 @@ import userEvent from '@testing-library/user-event'
 import type { ReactNode } from 'react'
 import { HomeTabs } from '@/components/HomeTabs'
 import { TooltipProvider } from '@/components/ui/Tooltip'
-import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { inactivePreapprovalApi } from '@/test-utils/preapproval'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic, TransactionRecord } from '@/vault/types'
 import { VaultContext, type VaultContextValue } from '@/vault/VaultContext'
@@ -72,13 +72,6 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-// Keeps the Transfers tab auto-accept toggle inert for navigation-focused scenarios.
-const inactivePreapprovalApi: AmuletPreapprovalApi = {
-  getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
-  createAmuletPreapproval: async () => ({ updateId: 'noop' }),
-  cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
-}
-
 // Wraps HomeTabs in the providers its child panels depend on (query, tooltip, vault).
 const renderHome = (vault: VaultContextValue, children: ReactNode): void => {
   render(
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 3aa753be..a17da157 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -6,6 +6,7 @@ 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'
@@ -44,13 +45,6 @@ const baseVault = (): VaultContextValue =>
     setAutoLockOption: () => undefined,
   }) as VaultContextValue
 
-// Keeps the auto-accept toggle inert for transfer-list scenarios that do not exercise it.
-const inactivePreapprovalApi: AmuletPreapprovalApi = {
-  getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
-  createAmuletPreapproval: async () => ({ updateId: 'noop' }),
-  cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
-}
-
 // Mounts incoming transfers under vault context so accept can use wallet signing hooks.
 const renderTransfers = (
   api: Cip56TransferApi,

From 0aa343b8889cd64bbdd5aff51652dabe69360930 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 13:47:56 -0300
Subject: [PATCH 61/98] test(carpincho): cover useAmuletPreapproval busy
 semantics

Guard that busy reflects only an in-flight enable/disable action and stays idle
through background refetches, so the auto-accept toggle does not disable on
every poll.
---
 .../test/hooks/useAmuletPreapproval.test.tsx  | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 carpincho-wallet/test/hooks/useAmuletPreapproval.test.tsx

diff --git a/carpincho-wallet/test/hooks/useAmuletPreapproval.test.tsx b/carpincho-wallet/test/hooks/useAmuletPreapproval.test.tsx
new file mode 100644
index 00000000..ff29db35
--- /dev/null
+++ b/carpincho-wallet/test/hooks/useAmuletPreapproval.test.tsx
@@ -0,0 +1,129 @@
+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 {
+  AMULET_PREAPPROVAL_POLL_MS,
+  type AmuletPreapprovalApi,
+  useAmuletPreapproval,
+} from '@/hooks/useAmuletPreapproval'
+import { TestQueryClientProvider } from '@/test-utils/queryClient'
+import type { AccountPublic } from '@/vault/types'
+
+const ACCOUNT: AccountPublic = {
+  // Account fixture represents the receiver whose Amulet preapproval status is polled.
+  id: 'account-1',
+  name: 'Alice',
+  partyId: 'alice::party',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+// Renders hook state into the DOM so tests can observe busy/loading across actions.
+const Probe = ({ api }: { api: AmuletPreapprovalApi }): JSX.Element => {
+  const state = useAmuletPreapproval(ACCOUNT, {
+    api,
+    pollMs: null,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+  })
+  return (
+    <div>
+      <span data-testid="busy">{state.busy ? 'busy' : 'idle'}</span>
+      <span data-testid="loading">{state.loading ? 'loading' : 'idle'}</span>
+      <span data-testid="status">{state.status === undefined ? 'none' : 'loaded'}</span>
+      <button
+        type="button"
+        onClick={() => {
+          void state.enable()
+        }}
+      >
+        Enable
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          void state.refresh()
+        }}
+      >
+        Refresh
+      </button>
+    </div>
+  )
+}
+
+describe('useAmuletPreapproval', () => {
+  afterEach(() => {
+    // Each test mounts a probe with its own fake API state.
+    cleanup()
+  })
+
+  it('uses a five-second polling interval by default', () => {
+    // Scenario: the preapproval contract has no browser stream, so the toggle relies
+    // on polling to reflect changes made elsewhere.
+    assert.equal(AMULET_PREAPPROVAL_POLL_MS, 5_000)
+  })
+
+  it('stays idle through a background refetch', async () => {
+    // Scenario: a poll-driven refetch must not read as busy, or the toggle would
+    // disable itself on every 5s tick.
+    let resolveRefetch: (() => void) | undefined
+    let calls = 0
+    const api: AmuletPreapprovalApi = {
+      getAmuletPreapprovalStatus: async () => {
+        calls += 1
+        if (calls >= 2) {
+          await new Promise<void>((resolve) => {
+            resolveRefetch = resolve
+          })
+        }
+        return { active: false, expired: false }
+      },
+      createAmuletPreapproval: async () => ({ updateId: 'noop' }),
+      cancelAmuletPreapproval: async () => ({ updateId: 'noop' }),
+    }
+
+    render(<Probe api={api} />, { wrapper: TestQueryClientProvider })
+
+    await waitFor(() => assert.equal(screen.getByTestId('status').textContent, 'loaded'))
+    assert.equal(screen.getByTestId('busy').textContent, 'idle')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Refresh' }))
+
+    await waitFor(() => assert.equal(screen.getByTestId('loading').textContent, 'loading'))
+    assert.equal(screen.getByTestId('busy').textContent, 'idle')
+
+    resolveRefetch?.()
+    await waitFor(() => assert.equal(screen.getByTestId('loading').textContent, 'idle'))
+  })
+
+  it('reads as busy only while an enable action is in flight', async () => {
+    // Scenario: flipping the toggle on should mark the hook busy until the create
+    // command and its follow-up refetch settle.
+    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' }),
+    }
+
+    render(<Probe api={api} />, { wrapper: TestQueryClientProvider })
+
+    await waitFor(() => assert.equal(screen.getByTestId('status').textContent, 'loaded'))
+    assert.equal(screen.getByTestId('busy').textContent, 'idle')
+
+    await userEvent.click(screen.getByRole('button', { name: 'Enable' }))
+
+    await waitFor(() => assert.equal(screen.getByTestId('busy').textContent, 'busy'))
+
+    resolveCreate?.()
+    await waitFor(() => assert.equal(screen.getByTestId('busy').textContent, 'idle'))
+  })
+})

From b3d0a19fdb66bc34ed419fd2625c480a79fd670d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:09:36 -0300
Subject: [PATCH 62/98] fix(carpincho): stop background polling from blinking
 panel content

Drop the 'Refreshing' indicators from the Assets, Transfers, and Send panels and
scope the holdings/transfers loading flag to the initial load, so 5s poll
refetches no longer flip the empty state or shift the header. Only data that
actually changed re-renders.
---
 carpincho-wallet/src/components/AssetsPanel.tsx        | 4 ----
 carpincho-wallet/src/components/SendTokensPanel.tsx    | 5 +----
 carpincho-wallet/src/components/TransfersPanel.tsx     | 5 +----
 carpincho-wallet/src/hooks/usePendingCip56Transfers.ts | 5 +++--
 carpincho-wallet/src/hooks/useTokenHoldings.ts         | 5 +++--
 5 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index f52f7b22..2f02948c 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -181,10 +181,6 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
           })}
         </div>
       )}
-
-      {loading ? (
-        <span className="px-1 text-[0.78rem] text-muted-foreground">Refreshing</span>
-      ) : null}
     </div>
   )
 }
diff --git a/carpincho-wallet/src/components/SendTokensPanel.tsx b/carpincho-wallet/src/components/SendTokensPanel.tsx
index 319eaf18..220731b8 100644
--- a/carpincho-wallet/src/components/SendTokensPanel.tsx
+++ b/carpincho-wallet/src/components/SendTokensPanel.tsx
@@ -146,10 +146,7 @@ export const SendTokensPanel = ({
         void onSubmit(event)
       }}
     >
-      <div className="flex items-center justify-between gap-3 px-1">
-        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Send tokens</h2>
-        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
-      </div>
+      <h2 className="m-0 px-1 text-[0.95rem] font-semibold text-foreground">Send tokens</h2>
 
       {error === undefined ? null : (
         <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 15a25090..d39c4a57 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -151,10 +151,7 @@ export const TransfersPanel = ({
         api={preapprovalApi}
       />
 
-      <div className="flex items-center justify-between gap-3 px-1">
-        <h2 className="m-0 text-[0.95rem] font-semibold text-foreground">Incoming transfers</h2>
-        {loading ? <span className="text-[0.78rem] text-muted-foreground">Refreshing</span> : null}
-      </div>
+      <h2 className="m-0 px-1 text-[0.95rem] font-semibold text-foreground">Incoming transfers</h2>
 
       {error === undefined ? null : (
         <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
index 945e04d0..12941ed8 100644
--- a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -86,11 +86,12 @@ export const usePendingCip56Transfers = (
   return useMemo(
     () => ({
       transfers,
-      loading: query.isFetching,
+      // Initial load only; background poll refetches must not toggle the empty state.
+      loading: query.isLoading,
       ...(error === undefined ? {} : { error }),
       refresh,
       accept,
     }),
-    [transfers, query.isFetching, error, refresh, accept],
+    [transfers, query.isLoading, error, refresh, accept],
   )
 }
diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
index d072ef5b..a7ca55cc 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldings.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -57,10 +57,11 @@ export const useTokenHoldings = (
   return useMemo(
     () => ({
       summaries,
-      loading: query.isFetching,
+      // Initial load only; background poll refetches must not toggle the empty state.
+      loading: query.isLoading,
       ...(error === undefined ? {} : { error }),
       refresh,
     }),
-    [summaries, query.isFetching, error, refresh],
+    [summaries, query.isLoading, error, refresh],
   )
 }

From 5fa0a9778992f0a299f973a8b7d5e61554a3b0a2 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:11:52 -0300
Subject: [PATCH 63/98] fix(carpincho): flip auto-accept toggle optimistically

The create/cancel preapproval command can take seconds to land on the ledger, so
the switch stayed in its old position until the next poll even after the success
toast. Reflect the requested state immediately and hold it until the polled
status agrees, reverting on failure.
---
 .../src/components/TransfersPanel.tsx         | 27 +++++++++++----
 .../test/components/TransfersPanel.test.tsx   | 33 +++++++++++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index d39c4a57..45a433ea 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -48,18 +48,33 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
   const status = preapproval.status
   const isExpired = status?.expired === true
   const isActive = status?.active === true && !isExpired
-  const canDisable = isActive || isExpired
+  const confirmed = isActive || isExpired
+
+  // Reflect the requested state immediately: creating or cancelling the preapproval
+  // can take a few seconds to land on the ledger, so hold the optimistic value until
+  // the polled status agrees rather than leaving the switch stuck in its old position.
+  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 (canDisable) {
-        await preapproval.disable()
-        toast.success('Amulet auto-accept disabled')
-      } else {
+      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')
     }
   }
@@ -72,7 +87,7 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
       </div>
       <Switch
         aria-label="Auto-accept"
-        checked={canDisable}
+        checked={checked}
         disabled={preapproval.busy || (preapproval.loading && status === undefined)}
         onCheckedChange={() => {
           void handleToggle()
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index a17da157..75b7a602 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -202,6 +202,39 @@ describe('TransfersPanel', () => {
     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.

From 09b794552ffc2604dfb66fdc7fbd011a7022a424 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:13:46 -0300
Subject: [PATCH 64/98] style(carpincho): shorten verbose comments added this
 session

---
 carpincho-wallet/src/components/TransfersPanel.tsx     | 4 +---
 carpincho-wallet/src/components/ui/Switch.tsx          | 2 +-
 carpincho-wallet/src/hooks/useAmuletPreapproval.ts     | 3 +--
 carpincho-wallet/src/hooks/usePendingCip56Transfers.ts | 2 +-
 carpincho-wallet/src/hooks/useTokenHoldings.ts         | 2 +-
 carpincho-wallet/src/test-utils/preapproval.ts         | 2 +-
 6 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 45a433ea..36063360 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -50,9 +50,7 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
   const isActive = status?.active === true && !isExpired
   const confirmed = isActive || isExpired
 
-  // Reflect the requested state immediately: creating or cancelling the preapproval
-  // can take a few seconds to land on the ledger, so hold the optimistic value until
-  // the polled status agrees rather than leaving the switch stuck in its old position.
+  // Optimistic: hold the requested state until polling confirms it; the ledger can lag.
   const [optimistic, setOptimistic] = useState<boolean | undefined>(undefined)
   const checked = optimistic ?? confirmed
 
diff --git a/carpincho-wallet/src/components/ui/Switch.tsx b/carpincho-wallet/src/components/ui/Switch.tsx
index a063b6f2..5fcb507a 100644
--- a/carpincho-wallet/src/components/ui/Switch.tsx
+++ b/carpincho-wallet/src/components/ui/Switch.tsx
@@ -1,7 +1,7 @@
 import * as SwitchPrimitive from '@radix-ui/react-switch'
 import { cn } from '@/utils/cn'
 
-// Pill toggle for binary on/off settings; thumb slides on checked.
+// On/off pill toggle.
 export const Switch = ({ className, ...props }: SwitchPrimitive.SwitchProps): JSX.Element => (
   <SwitchPrimitive.Root
     className={cn(
diff --git a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
index 31cd51f7..f2ad653c 100644
--- a/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
+++ b/carpincho-wallet/src/hooks/useAmuletPreapproval.ts
@@ -109,8 +109,7 @@ export const useAmuletPreapproval = (
     () => ({
       status: query.data,
       loading: query.isFetching,
-      // Action-in-flight only; background refetches must not read as busy or callers
-      // would gate input on every poll.
+      // Action-in-flight only, so poll refetches don't gate callers' input.
       busy: actionBusy,
       ...(error === undefined ? {} : { error }),
       refresh,
diff --git a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
index 12941ed8..1d5f9a9b 100644
--- a/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
+++ b/carpincho-wallet/src/hooks/usePendingCip56Transfers.ts
@@ -86,7 +86,7 @@ export const usePendingCip56Transfers = (
   return useMemo(
     () => ({
       transfers,
-      // Initial load only; background poll refetches must not toggle the empty state.
+      // Initial load only, so poll refetches don't flip the empty state.
       loading: query.isLoading,
       ...(error === undefined ? {} : { error }),
       refresh,
diff --git a/carpincho-wallet/src/hooks/useTokenHoldings.ts b/carpincho-wallet/src/hooks/useTokenHoldings.ts
index a7ca55cc..585be58f 100644
--- a/carpincho-wallet/src/hooks/useTokenHoldings.ts
+++ b/carpincho-wallet/src/hooks/useTokenHoldings.ts
@@ -57,7 +57,7 @@ export const useTokenHoldings = (
   return useMemo(
     () => ({
       summaries,
-      // Initial load only; background poll refetches must not toggle the empty state.
+      // Initial load only, so poll refetches don't flip the empty state.
       loading: query.isLoading,
       ...(error === undefined ? {} : { error }),
       refresh,
diff --git a/carpincho-wallet/src/test-utils/preapproval.ts b/carpincho-wallet/src/test-utils/preapproval.ts
index d73b38dd..e2529d4d 100644
--- a/carpincho-wallet/src/test-utils/preapproval.ts
+++ b/carpincho-wallet/src/test-utils/preapproval.ts
@@ -1,6 +1,6 @@
 import type { AmuletPreapprovalApi } from '@/hooks/useAmuletPreapproval'
 
-// Keeps the auto-accept toggle inert for scenarios that do not exercise it.
+// Inert stub for tests that don't exercise the toggle.
 export const inactivePreapprovalApi: AmuletPreapprovalApi = {
   getAmuletPreapprovalStatus: async () => ({ active: false, expired: false }),
   createAmuletPreapproval: async () => ({ updateId: 'noop' }),

From 4dd8227c882f2ffafa566f8268ac689a0dda6437 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 14:22:15 -0300
Subject: [PATCH 65/98] style(carpincho): refine auto-accept toggle and its
 spacing

Widen the switch track, shrink the thumb with a real shadow, and add a brand
glow on the on-state via a theme-aware --shadow-toggle-on token. Give the
auto-accept row room below the tab bar and a hairline divider above the
incoming transfers list so it no longer reads as cramped.
---
 carpincho-wallet/src/components/TransfersPanel.tsx | 4 ++--
 carpincho-wallet/src/components/ui/Switch.tsx      | 6 +++---
 carpincho-wallet/src/index.css                     | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 36063360..4357d3e0 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -78,7 +78,7 @@ const AmuletPreapprovalSection = ({ account, api }: AmuletPreapprovalSectionProp
   }
 
   return (
-    <div className="flex items-center justify-between gap-3 px-1">
+    <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} />
@@ -158,7 +158,7 @@ export const TransfersPanel = ({
   }
 
   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-4 pb-2">
       <AmuletPreapprovalSection
         account={activeAccount}
         api={preapprovalApi}
diff --git a/carpincho-wallet/src/components/ui/Switch.tsx b/carpincho-wallet/src/components/ui/Switch.tsx
index 5fcb507a..5eeaabd0 100644
--- a/carpincho-wallet/src/components/ui/Switch.tsx
+++ b/carpincho-wallet/src/components/ui/Switch.tsx
@@ -5,13 +5,13 @@ import { cn } from '@/utils/cn'
 export const Switch = ({ className, ...props }: SwitchPrimitive.SwitchProps): JSX.Element => (
   <SwitchPrimitive.Root
     className={cn(
-      'relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-border-strong transition-colors',
-      'bg-muted data-[state=checked]:border-primary data-[state=checked]:bg-primary',
+      'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-border bg-muted transition-[background-color,border-color,box-shadow] duration-200',
+      'data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=checked]:shadow-[var(--shadow-toggle-on)]',
       'focus-visible:outline-none focus-visible:shadow-focus disabled:cursor-not-allowed disabled:opacity-60',
       className,
     )}
     {...props}
   >
-    <SwitchPrimitive.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-primary-foreground shadow transition-transform data-[state=checked]:translate-x-[1.125rem]" />
+    <SwitchPrimitive.Thumb className="pointer-events-none block size-[18px] translate-x-[3px] rounded-full bg-primary-foreground shadow-[0_1px_3px_rgba(0,0,0,0.45)] transition-transform duration-200 data-[state=checked]:translate-x-[23px]" />
   </SwitchPrimitive.Root>
 )
diff --git a/carpincho-wallet/src/index.css b/carpincho-wallet/src/index.css
index f4721fe1..dcfd2113 100644
--- a/carpincho-wallet/src/index.css
+++ b/carpincho-wallet/src/index.css
@@ -49,6 +49,7 @@
   --shadow-focus: 0 0 0 3px rgba(105, 37, 129, 0.32);
   --shadow-focus-danger: 0 0 0 3px rgba(163, 38, 38, 0.32);
   --shadow-glow: 0 10px 26px rgba(198, 112, 229, 0.4);
+  --shadow-toggle-on: 0 0 10px rgba(105, 37, 129, 0.35);
 
   --bg-gradient-brand: linear-gradient(135deg, #c670e5, #e71d73);
 
@@ -102,6 +103,7 @@
   --shadow-focus: 0 0 0 3px rgba(198, 112, 229, 0.4);
   --shadow-focus-danger: 0 0 0 3px rgba(229, 115, 115, 0.4);
   --shadow-glow: 0 10px 26px rgba(198, 112, 229, 0.4);
+  --shadow-toggle-on: 0 0 10px rgba(157, 84, 184, 0.55);
 
   --bg-gradient-brand: linear-gradient(135deg, #c670e5, #e71d73);
 

From c19afef6b6afab2d6ad3f3c4b093e01c7cbdae4c Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:03:20 -0300
Subject: [PATCH 66/98] chore(carpincho): add react-qr-code and Canton coin
 asset

---
 carpincho-wallet/package.json          |   3 +-
 carpincho-wallet/src/assets/canton.png | Bin 0 -> 14822 bytes
 carpincho-wallet/test/tsconfig.json    |   1 +
 package-lock.json                      |  39 ++++++++++++++++++++++++-
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 carpincho-wallet/src/assets/canton.png

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index fe096546..37a64c48 100644
--- a/carpincho-wallet/package.json
+++ b/carpincho-wallet/package.json
@@ -33,7 +33,8 @@
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-qr-code": "^2.2.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.9.0",
diff --git a/carpincho-wallet/src/assets/canton.png b/carpincho-wallet/src/assets/canton.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d73c728222cb2d150a274f0c1fce1063f1a770d
GIT binary patch
literal 14822
zcmV<CIT^-@P)<h;3K|Lk000e1NJLTq008;`008<31^@s6i0oQD0000WV@Og>004R>
z004l5008;`004mK004C`008P>0026e000+ooVrmw0023GNkl<Zc-rioTc}iZ8^)Iv
zX2loy#rKi6>ms7ki<IbaRU}kI1)Ycr+H^n)D$I=RKw);i5ihFunTqNn!YB!LQ5Qj7
zh(!?{NGpY?P{_)ldY{>Cjkdoo9NP>XHkeyy&whXKWBv>?i?v{$dH<)inqqQdo}Xq~
z(-X}!8ZbJ}=%hqv8eNoVFp2Ao78~7RVp*bl6Fr>7Lq^Lw-f6TriR%+xX>@TCXBnN+
zIp#p3{~8^*g=eNUMN#Zo%oEcR9g=9a(FsQ98ZAt8uhCP9h7zqYTAyf>(RYb{G-@Z>
zo@mr)hY`EXj_!6x5~GQ>8x1G=$>{q;n>xo{o9LB9PbOMsVqxw)mw8FdHaaMIy#54=
zVmyALwV!FtG@6s>{6tH3hB@9$^m(GKMkCo3+Q7T~)BD;z|K_{Nm?lUxV&VrApPP6i
ziI&kViOw@I*J!5EeoawKWsIgL8ZcVW3CJ@>@0!?>U4ahV-R?cR&uhfQmYvt4XA>>z
zT;o8SnBEjcKa*&Gqr;6BBwCtib)pT4+J98co(=N9)<zpltTwv66Z~0O6~E{Q+GvJ}
zIYw9Qtl061k+bJ3^qw~UD){S+o;JGLXpU(e)D*>J!RX*b^Nnsc@rsGfMx(tMz<p%*
zyuzr_W}{a-D+KdR9NZK|uaU%bqq#<l61|?pcS&GG_H5XC$LtRNw??lUEiy5;jcQz9
z>|0D6k;LUmykKJU)ai=vwW`0_XqC|wMzfou*jpIQFmbBUBPP}*vAwGH#F!n8el_~o
z=s}~Cjb=1OF%g(J%*3T8UNo__k7vkxHuOfA*lM)e=n|vDnxfbfBym&{H<)<a#I~y5
zy%Knh7_BwB(dfvgD0T-EN1M3I#HUI8RsrwXZvCjyCq{Q09S5qdxW)Jw9c#4Q#D<z&
zn{<9*bYBI&7{7v}jkPQ`InD0CFE={6DT+?OXBpjU;xiNdybX2Am}BkrMoWxlHO17#
z=ui`bCf+j|tqR_^jvBpVG-z~aQ%ns^9AILB(U6I4H4g88b8MD=$Y_Cy1Dc|LF>#EE
zl_s`Uz^9fu*8ah0rO`1>(O;N2#ONBMbrtZbZtQBWGjXkn|1`zq$Ha*yUN9P|ad_En
zY%^MAG`}e(C!NW*n@oIVqL$0bKbd2%UnaWAL`~LBCXD8pc*(@C74UL=gGAd+tTLL{
z6unIw%`h4?+E`=payQ**G+1}Y^(aOICLS}<t}0&s%kF&J=uxAArsxge<!MHz8Lg?U
ztL2_BiCyhAMyHvlYTx|6#OOd13yn5a$jb>@ci&{RFp28Q?+Z-)-)M!2cCY?e%D!>f
zXob=Lnqu!^G{?k{iQ1!H?yau;sEMIO$2Y~qW8w@GA5_4{w@r&-TKvKjf9Wu-uFte-
zjd%Cnlzp;ob~Jk5==7$T7=A(f8(n7fb=^w(&*qNco1a&*{>ukg`{7-@_SO=fd+|CR
zeR7b8S6s?H_g%o!yU%CwZRfCP$=Tep^c?QF|3W_6xSU~H<nQdAT}V@57{~YFrdtcm
zX_lZ;P^5NMhz5$*O*hf999kA^MHfPhAfk&fwDqwhLd%^q4O~UiO;l7@5#4lAH+@i`
zhO9LDBAHe@Ef%?d?;g%@x{qpXG0x5lf8ML}a^Ca4zw>{d^T2!JJm0UgP6*(|7ljK#
zhR#3zHFs_zv=>8rQX#igy0|OP2hQdL@6ARxnIA%uQ%AxU4Q7zXwHqC%URw^Mu>g9#
z9$IZ4a@1NV6&ffMIZWy(H8fS?>1bC>*afDsx2Mt5+lqlpRy=rg1mhnZm=5$uL<Bs1
z(*Ctnq`XWvx!#_-eB8j`w)?<+&yo!k6Yelf(?9z$GI0{u?;b!e-ww~Go|s^M7W#0s
zYb$g*9h3}gl~S`nTBucXQYq;LfQH8Su+IdXaJelgDJevL{$f;Bm!Y|(2FD#caOeI(
zjK6o_%P(g*Es!|$G%r7soynk(Tk=f+Z}fq8eghZC%*Fl>a5GK$&*SlnPW17+VQ#C%
zs@0{?>+}R@Yx@SgnGZYl0_(j$E}+wH3OPDCIYAvyiD94XXE_XBwxX!0ARGzM*apKQ
ziXiq_>M_V1|JhhKxji|(M4=a>%K(#8kdK~DzI?{y&bI%SiI9>rK7Z9sdG!|4IxH_W
z5{v{_q(iGT1pDiRuy0E_>=&<CQCz%4ych90F(uIC<f5XY1m>M}7#iM((aBSxbV8CY
zA8``xkRX@ek~znX8)gb-TTU)8z4V;G{*H}Uv2q#Z)uL+>Oi^H_8TKa$Vc$!zv(zB!
zdZh?`t~L*qRb{Xp+KhV-4^wpFml*KkJc3MDeQ?R=)BR;mUe0tg1bL<|Y`Q`Bd_03@
za}B{31Mc{+?@B%F^^I$ifIVs)Qej~}OxxE}1>oJxIT}-t2=EcG-(o6P$Son{WlXm-
zbum*I>Omm67H$;k82|)(OIt00@^7%$C4~K0vapZ*0rsWwVHYKS@mE8q)1zrq6$acE
zOirDZki&Do+dB{VD5~v`&n6@RLPCNx0RcgZ(yP+D2#6q{C@OZO2vV$cBGNnLPOv?F
z7QhBipW;)W6?rO(_!I?E6e-dnGfR<@^FMRm-hU=+pUm#w*}eDk`F&;x+0E?C{qDW@
z+*A1Zo3eV0U&wPS>A=>A`2g)Vvi*K=J}k-|0t=SkOaQul!agrDu+Ovrdq*?us#Vy{
z?@818j<}`w+^TzF@9{-(1Uw1*a$Y4xHnVk|l}E^*kJstC8Sn${rSSJP!=PP<dWO-8
zfSW$+dN^|0KkPSHfc?e@!>;>+{e_TWH@`1!0bbLm39Nf}jA5yd1EU?|)A$#RzOBec
zTWDE^#WG%Vs}o!v5I*|iQ5ZD%N=Q#n=j(3*Ej>L%*ptME{b>*E3Wq%m;Ip$c;hy20
z;p?r_9KR(;*A2|D#y_J$Ubd3R4R1g?!aYw1HSUTSUNB83kgHZJ@5{he2>TO3V87XZ
z*ry@v=@EdvVtBBVxYu5tdR1ZB%3I-pzSPm9y9NxUp2PD6c%H5#Vsisa(LkMoI_<=V
z7>bUc&4u+JO@J=l8+hDL337j(oPe7a2=@IJVZS*b?DRLog}oiZ{`HU3Y=@n{f60=i
zXcqIucT*fbx*M=lx$P<VIZ~BGYHnDWq=R~&4or);k=!KOLh9SU1t?0A7nng{_iLcr
zNw8lPF6{K0oqt9E_N@V6fAMZJ?3RG9ec8phu)7@&)BVVEB<vc{Q9}(wB`Jy0bWr=D
z_KW&p?2@}cg^gP#L+dtmsMCfDduapqnSo)y(IV`>+6{XLg59q*{uvu!FM~FX;iJ15
zzVr^B%G328KwYOKLeoKQjoJ}UBRTJM-kp$sM$^wLEy3R3PS{B}^$!kvdbqIHBiMcK
zv#S<i_rCTn-5S8Bn;vuQRNiyF+fl8Qcy2nVHBq0&Qz~W-$>CGWV9U=lC}!JE*rx`A
zeTW6vZwd_ibemz<Iqa2+2Rpu&0(xG4eK=_6m?L2~C7rCP#ADNG8;!l_&<7I$@;unD
zErCZckwe{jRp9y6_fi0dPuTzKAlPS#1v|-=YP^;r=N9J<F^rZDbfIPZ`~?lvvPwL)
z6QGvRL7jp+Bj(KyTO2fU;k^64PKK8kxp!WC@kQ|b8if74_^=O(0PJmp!Typp*uA$S
z(_!MY>x{U2r^0@Qn1H+#C0?2i>LAq7cv+Woz<%8~7jC+>4e#j2kveeYxPv`CJlNaU
zGh5>$27Af0QgHv+9<cY=BBxs94JHOD@z6YV(0+2@LkI}@PruKitursM%&@Qa5Brx^
zVShX@?1L@CKG!GgM^9UaebWzqVW&8C%v56;cK)|Ypd0aB!#cqqhZi^wcF(o`gnTqs
zoZNI!%NZ$hMZM8hA>Y1xHuUb>%*z4B66|g3+7J6J7GNJ72=)~)WA*@HVNXs@g*)%<
z2z!n$a_ThxP2H&(YILA=`E=AdF>kQ7SaAf2pm2EwnS=~GswnJNS%7^?P}tiz1onGu
z8`($TUi$&viEDOZWV!~dgyOWOgW3yqB%Zd?u(Q%WZuJ@!L++Rad*yQQTtL{T+7A0~
z#en^nh`>G-P8H^p=Q-tRhvIK9+XH)AT1nddIDB%s<F?*3VnywvIH~EN)<At3PmptI
z=NP3@u2!u=_^_|?JB_yvdrm+9upgLj3HE`5Tf;B=2zK*qhCt27&p&hCAjr%tgTEU(
z>}}fBg*EF&!oNR%7&d-83AXIWp_#{ieTne}LSKYcs+JG*o+00pIg4(D{Ij`^gB^L<
z<e2O<MxJX_u9!E{ro8G#-t@H*fc^W3z>Yfu#e$vkylq3f#0MK6roHfoCicNdyb82@
z33asPR`Sfu4DynzQL_?U(XhG^2}iStu@Cj+!9T@@9aC1}eZB{ulbHR;zgPik37(4|
z{GtQ9K?gN1f>pRf49aHM@9_)!R|f3u!iRk_!hYC3*y(qBUE7qZx%BMa1nOewXjWDx
zCClJONDFSP9_V@UNUmf$BIM?+N~@yxs(EQ;cz?q~aKb^Bc#V$iIG*=cL~b-?2ew(%
z8)?PDj{Cth(w>Mi>}|q@y_5&`lYwDR4jpz5qgRS){(2i_=X-MxI+`7A{cWbBU^h+S
zYbfG1f;<Ja0Oj~}P&ATz;=jA~Xb8=kUkV$(ndlex)duXBgb(}QA_4o1z_8zZYg@EX
zhcs%M!E>BEGY1Od!O!h5*qOo5A`O{RL~A;*9w^7xM&q5~*k3DX+RDLf-l7(4__`2w
z%|Wp9_dN|yQmALAE>{?%wXl%dB!15b_Mi96aS-f`Tj6^sA~j>PAN9V|t?ZsoKwChV
zdz|Wv@%?fR`)7e*Ul%^?l?>QljvVZ~tka*`5=y>!+nw!=zv<YK+S165>e;Iae7ECq
z2f=QL8BCQ^L}(g3<<dbNjXL90&`niJY5QpX#}mjRYzCIY-Ygcd|6ssg&l2pv?41iQ
zy*3<r^=S&38D;1_TuNd<e!;UNt3H;7c2M#Pb{3CgG{|!)v2Hr3^-$ZzziGjfMr_^r
z1dM;A7ddYr47}o~1=vSM2KM%0!A_1XjT+bBS!WYw6b}|%_xa{Y4uYK$Rn%8v*th|1
zsh~F~M8IjEn35SbX;u@s5hvLMxmDON2@iJqf_c_9*y&mm9&lgxqjA%kMtyh3z^)-<
z`M_djm?O|Tpbm<DqXIxq6+>~|O1aW}Cvmh6`x<MoQ?Q30*vXX?T}mau#e}_Kqw4V9
zrw=*+b~4NzLUmAL(cGYx(m{1x2_@P(^H|l<;6^pQxwA&g)|ZiMXBd9mwDtDcrU0=2
z17WXjH|*0S>|U~#VfNLx?l+#3;INZkK}9_`JkR8+J7qiVf`SUP7DuZ(_s$~VH=%P(
z&YXd?rVSHz3U-Mi?BvMPzSHH7-s_H`xKj<;Qqbwi0kAV2kA0QsHG(`7^)E4RNI=Lb
zEVMVec5;IiLPBnx^OxRaY(sgns)Qe*)ifm7E7|}%eGW>Y^uU8XjhTo9y_oK@7)(R=
zIsdHa2`AZl4OphaTa;2mofPwC_=KFoA>Vj=G_B1{Q(nH-CPxxCs3g%~f5rnlhy1^|
zA3S7eJEQ!tgxm)4+U-l&EpS}ysJBxZs6*sv?sq+&3oD+wjS@GSAg5z$Y8otBF$7K&
z<ay;wn=#um?0(&4U$F#xHo=~MhQV9!kA)VkYJ*Fz&+Qc5&#bHrDr1fI8)1`IAm|^X
z%0+E77kzEcfyJ#eN~%akwxVzmz!z7!2>$ckWb%g7fJF!PH%EmFJAFyreP3r|O(~6V
zkr6%PjEpkWUk;vFCLru&fj^D9HNudyvQ8MyIjDc;FM$b<^``pU1gg&zM5&Y<k;h(p
z!G5|Juz%$>jkgSYl9G~;UTraeoeDfY_*id|Q%S#%%8cY_e!b|UxhL|BQUDJd)fG}x
z(g?l~5-r#dd$UX7lOV8H4;gl8bc>c;E=rOCV<z;3ea9Aym|fPb1M3^fee>7Fhg=1M
zd}J3&7-%W0iuHVH)?rV8Xfh{>@5T(hs{?Jv@;)KZ6n-tLbR?$jol(a{1)T$V0H<3c
z#&q+FxwZ@ToH^mc-oy)bRtP(IV6P!z7d6ZkWB94ag<CA6+%Z%qn<Lc7r+uZ!Be`)r
zbYdB00mW>fX2`>b{l;Lh540P0^w5&9i@Nnzp+YvS|7bjab|S(4qz<fvoon+3sNI^t
zkYm<Q%1-KKc#9zHWy*vLdrgG>QQxo^sPNi9?>AtV1~);(3p%oAZinM%as?dZh{*<a
zt<8;i^NG5cdy2pzdFt<XLUwkh84__}|I!O~`ZpF&;7KOz%)v(2XHLWzT=cu#b1)&@
zY>m%f^?x37B9~|`KrSa~$fzA_^NKpCn?#+q8-Tp?;dmY;7AgQC|K5Ngus=T60_+$j
z`LPLhG9Y3(p`jQ>mz*4~Z2`q$Hi693E0@j8F!tani)*vywI~<{^Wag2*M0+90#~2w
zn$yqQb*K-`Th@kp^{Y`w&nlZi+f8)srY{1Q5~p7PE}liUl3_b>fDgR-HG*Ez4$udp
zPHTc@Y2EU34zy@li$fl2cGK`+zo8XoYKaK!<fwy=IkexO65=ia2b)8el9C4HFUlhK
z-ac3p?*4IC!~A78!Aq|XhYzq|!q-1ehoAnK1-~DfPX!YW<96YZzm~(%Gb;*(-eCB1
zGG^{NvViiqZ{9WoKKkMj3i?3rLGrEd+rPPCZ=l@lSSp%-xx|I19)C8qYFCD}>&Jjw
z_z+f=JJ1X&?%F&RA%96!3p;M3QS$#VvaZnR*0o1N3I+)m_8qpvP6-gm#~O`$LHGMP
zRH-Q?DaCY`?hPq{CA!B_Ts)RiB7k|`I}$H{L<+UW9Es<f<L^cPhhGYmRdwT*$?*4A
zhLK}Qk82u3jT)6`27%XTN)0V0(1Gr6{mZMtKR+1f2*?Y?Ue+NuwYWyOy_$gQa_uam
za=s>qm|!AEuI<+xw(Xh)LvCw}KeGb+9J^qrQLt96%4F5`<GIJdq4#avq$b=myfdYo
z`sT;!H2S(dP@mu+M_lGFft3Wr!4peqX7%E0_ra*KJ#gw@i(E<Zx*g%JYYsR5$U&KB
z3dQztqnuUH$Dz&(xGtxRrW}xPvVkIuR6~q%oLhkXdi!7}xr(~An%CR3Hg4FchA|bV
z&-?5CxsZRJaj=DZCVbTY4IND0eD498ZJ=F%D#>uWfnd;c$SF{0gR^qUnFqfD)VMRS
z)MW+oGN|`80o_}-;d=ARHg)I$h4DaXlzAHscYHegJHkH1M%Z-@`@BIM_AomfL2r~=
zrX|VW*9@b-qZg>2(NlQC5Xp_=(C<7j4|Cp+gj?@uPXRfmJa!^M&J#uodrw154PC|x
z=xtC(1p=KHRv;f_UPmm9?GmyiZ{Ize2PzZ~_CbMRpBWnLytC0ct`Dhz;f8M}8UFQ-
zg4>^e1Bd?DnH7}Wa_Zy#X$gYv$sBkIxji-8j-uLx2{|+N&Zi32acCrdWBq7K5?}%-
z<n{S=*SFxtDpC>Hhej24dOgoohgNL*-5++&G+yh->0=1cbE6<x^w9uGTYc!o$bpYJ
z<f6KFhbCrdiW`==!WqrWqCVAtiDYG`;DSzFudw7$g0CS%R{nVtkY?BqMhA9ogu`>n
zQ#W_<U|ufBVV2(F70Nh?+I46Fu&0M&QqJ1O7aj**LT*{?6I9u7M)WJinzobo8x^=u
z;Z}AFp@$VKWy6!t-wE2eK(M#72KydAu>Xay&nMWq722o`PL)r${`Lg8698~8;EP)C
z>5Fdm!W+q{2fq+Wk%YWu971lIzF!s2i2e|&KqSYQ&D*9!ow`-%K@~4RAuA%V_aD?U
z5bQLvSFKhaZoj7^{AbG)&<o;kie8Knp7bp`=!|-x2V8Vf79ZX1hrD(CL0%|k=;70$
zSl=~Zr8H3A5#{1}z{=?HSA)ysav5pZZ@Jw9>;wJ6PF`nUU<TSlr<Nr=;DOfg$Ij%^
z)?DYV4QM)#qr0t;Z~Qi1Ay>K9YoL}2Wi-D+2ewxeXEdkU<W;Jax2x1Iy-#_BedTkJ
zf&FK1*yGa37O`r!o?7nHW?oM<>G<egJjgFY$S21+<aGb`8VrX5`cTw4kw)|3qq~_O
zb`)V>5H{>C7s2kZdfZ~VIBVw_1uS*wY${Y?9dbu+p@lAD_qJe=Cu@QvnBcH|#z%9z
z4Ky6~^7g}?Bw@F6bf@Leh|%3V$v#Si2l<r=1-VDWa8e-9%cH&#Wm<FG!f0+C_B(>X
z9xQ~E{~tf6@Xu|3%m%lZoxu^J(cM!)XT?)PLrQneA#as{kbC;>H>mQ#yy1?;8gz}<
z7yEG<B~CPbi^l|Zw`b4y);j{ijz9MbC8gvPCkhg$quDC&ocJ`AZ{DI7hdnUlTM`R$
z&W^z_>Z(AXk3<!SvTr^mr=NLkCLZkGqquqBo;>*8{&1WG-CoN)Mebd5ZBxDrBO&)P
z$PvRM{iTdb)<Jz%ke~=ktAweNqna#{!=CrIV6eC6u=@oaubWa)9X_>O&<^2DX~4LX
z4Lt{*tiufXe-ak*B6=44YqGD=yc}wi7(VSQ;kniK@)SmP?4$A!Nt<E!p1SkDhoPC2
znFT+KG{!{;_B}_bNC$aKDoV11yyz7ED^xjOpf^Pw65%2-@WhijCfN?i3A#&bRStO>
zpag;agb8*ZnQG|uSGBDRyACgqhPVhD>Hf@LOewB9bh;d;>+!x%9@g~zAgZx1&~HMW
z6(NDaSKm)XcTsz`)F{5YayiO=(y0pt#Mlb^ZAB6~(vd=FpO}Ax99g2Y-+u7qQc9zR
z=Mr+@pPyJBteD#_02lr+N03ldDqYK=u>o|dG5*a@(_zc@9BAL^@`%EYe~+@Ke);`W
z33~L5bP{sk%DK?LJq3UGh5#2vWsZCIZN{hVwt>EB>r^-mPZIDQLWiB!>=z;I>a(H2
zj@M1qSuv1B)Q2yXI5L<{F;CkoqQ28an702gm3zY3208|@;0Qa#cz@DnE3jW=z<zr$
z*eL}v&H$tlPD+HZ)$dRh&7e1;#XGQATidDp4L5Mv6`q)#l}Ujyd@3Cw*eMX^v8jD2
zBdS|Y+ofW^q&a|UXfC37E$TFa9&49Za!BFRcDq2&%*?<-1`pBt-wY<f-q}9b-Jnu#
zwEXkA!gc_u#E?cuWE$BvgFZ$8CmBj-+^BI40?$s+(@Uqrx_>=jnogTxpWzR7{%=0R
zFu`6H*fYLi*BzS7Q7T@=Mib=6;Tac#zBI-cM5FC{pFId!S(&zH7QtHSly6->ulkyD
zQ|Y0OMPLu;^=5`$<N|zBQihiN1uI;N2Dzyku(bks!_l^y-M;PI@4Q0AY*=Yzl{wFX
z!R`lel7wB#X+pO1QW12uJnD;>CzwE3Zoj)Dt<OzSV3A2Q5ghglL6@*gIZhhT@k>+%
z1N6&KJ7aB#+k1Qw<@q*279rUEMX0HPM)shv=RQ4D)MEKk2`Y__Y$vL=0eV~1;aKmV
zZ~1vfRASGS0I>6G`PP6vOn2GpH7Xik64Dz^N;DlpwJ|^+h&mBlL)=O#Rg1aLIara0
zy}UiJ^Y^>_ic5^pNg2c<C76iqfe1Pqt^+$CW6){p%h$v)jy*TS9!ek#*%f;AX^OGu
z%S3(HQVA&ro@&S=4A668ygnzW9+`Zt87N1=j-X>{;~t<Fi2A^#5?nJ7boI&DTikOg
z`J%}qP6*hw5MbxqfeV)1Y|KnVeb7>gtvmzt*JB;ba^S>L=-#st2VF4O84&E-eZ!9D
zlnH0`x{(reDN*%0g3dmUwd?EdqYI&#C$lHQ6Jyx@2d!)|VDD;zod?ZiXTm3&9)pw8
z;w~lTI{jk=UELg8(DNww`DJygaL{88yZUS(*mKOV(`#zfs03Sf<jAcxDN(gqLE?Xo
zu_2C<K~$?&fybab0`|@x*bOyoTmu7g=E<!!DM7`y8zcIj7=uo+;uR`nM;ml*Nb~LO
z782|Y5cDKygNY#b>q`WE$Wn<cPru!xkXIbAm`1Jrd*j1AYAu?O^K+}PQ-X;Oo$5pP
zs~cfiWSPHRN?6bj8=$*m3;IfU_mc^bQKn3+LAM0^*H|@VAx7ODk)TV7>+kMH(Anu2
zd&N;bt@P5R3Am_D*%g#&>TV@Mjc1iPidki}0vWX?B`WCZX#@0vScCrNdk;X#G^)xH
z4alkdE*jj-HUZ19lVqx4DPhG>YJo!ki1mp6(RhL{TA-ILn*rk==>>J_dTr^+*mJ2k
z6axW3r!{)iBG-5^zA@vkraW@BYF7q=-4zb(LnZ7|juHnwp{(u(*!AjHLr0xi@YZ`{
zt-=1Zgk8!R(ol*9>|D(E(Kk<miWQ@^k4~dHmD^qM)KIG4@((_;hdGVUm9R?*E)D2-
z-T?iS5T0?DMAb8npzeWzG=FMKjBD_~ez7Ik^Uq4yrNk70j*KgKqTxwQgIc!lnavGj
zksiq@M>{Wwn2}Ki)~+8zb^@!gmqXZ%Of~v>F(0&4V#@=1zM}C`OfimLYu=((G(acF
z%|^MwL$1QiFy!oF33f$ErtsB+CuMdSDG|j0kB1O+_D8HQ<{-wSUwuvE=)|KZ7tQxx
zF1swe{qJ#P6y&hK83ye5JM<;>$B~6Hs6|Rt7ua0}=syXN)14}jBIwZ$WVvuuFNFO)
z6YN1iuUoGw{IqM9EUYLcsMwDPy84v}IpZFk(wE10M-6g5s%M)<bq!b%*lTmxgVbOD
z^82YW9$iXQeTAU24`K{D8N)Degd52sX^8U<VsWJs$kz{Q1qbw{bUj639}BfFBiQ}E
zZ<+LT<BLM3l9Cct?<45y8Wac+*b?aoHZ$lx{oh}BWf+a>;lR%K<ez;0P6@h{s9J-d
zv*j_q2!iRm9XXVe$@WSu-sO+|uC=iw6weexpcjGteG}|1Z<pGM)2@RP1#;>xC7_UT
z1N4a^IC|{MUkvR!)CVO-p!4#|)1SDW?}>ZC{+4gp$%r`kmNszwtgO8zC8Q=Bpx=!;
z8{-S13a57s>qO8**dQ0k0futdz5U^M0y{+5>HNwzbzsl2MWQ}vsl?Se)V&D0+83pZ
zP#=9U8v;p5WEqcoHW`wuu#Vb$pFS86_R9)kC(C=)YUK@AUTJxk5^Wz{NA*R}St}jb
z0TH6uKKT4$$j-`)8R+IUcl|4>1&6&3!A`F!g+(0J{6iLTkP^--?f|NV0eTJ8_E=w(
z8@2PmJZRGF(ul0nOO!|p0dx*~Dsb5U6%=;z(I-vL=_f~YDbe&Zs-^*YHtI9_p#U}5
zhTheId&tFB9QMlt!j9#hIqXT$=elMx8?2OIVjED|N<Od>8mO<(4+U7KWBoH4eR1S<
z5bWd7Kv$Wz2fzPyrgVjs5=6|9!FCD7XbAdT0WQpwK6x6i+7dZu8T(<UX?%l*)#2qg
zM#y!#lpvx$I!D3ALB9u8Ai%}Z)VJS&mI6%Q{lNZ-U)U+cby4mRT!P316jH*(qYpEK
z-VJp^l<E7jyj!_*iwzccFYCJvuut#_yH>!^vu-XNKPMe$q=e8(9oW@o(Cec1iZp${
zgi=eDh=f<1WhI$lf7cJ}Zkgj<N*J-dsCs754a@tNqFmt7zgCb-sW{VjZ`kV<!Y=d0
zNr^gb|57t7?!4s#OV)tBEQlu$InTWC>U~hE6jg7LuuJ(9FN-Cgfp5@}>AYmc)F`-x
z$EAznJkz38Z30Swsk?vJ>m%$ROW30=vk`RbZ%-Kc3@9+lEuVoI^oa^@CeZuxf{Ox(
zLOyfm3?w*F!hue5aoDR$*kc6w#&0J>*B%X_WLilWGvR93uPu?V1L?F8$Knh0`Y0g`
za+>EMZr(N>YSpStM!DjHp2mL`G1%8j*rNqGMLWLw<|qn4!uwAt!BSHt?4}gYyYalP
zFVHhkp9poq=NOC{+k*#=*yJ!HVRx!DVB~dp=)^LZyLd2F_c8a4Bni7Yn8jc@!w2Z9
zO9!?TCCWo3U_SeLB2=kTo_orPD+zm4rs}`!n+wB6btOZs*G$h0`}jnMU0tR_o=fr7
z5c1nl=LEV~%Gxq~bhl!U>M5q^wMfHWSHd0<$UpyP5_Ip`D5%|r!#+B3VLykuO~K|5
z^u|0kU8GTc!#5M5YE@%YFCpe=?hp2lB<wb9osmoNORo*59gYjW@Fnd2W6&E10zFgb
zA*+I|)h9gKt2h>T{@UomUeADiyo9|NqximKi(%@_{!p%5Sue;#gFP*wVAp{3DV}F4
z{+b5MT^g{3nqUu|XNe^Xs}n}`3t)do!fpxjE!%V8My#Tfnv!POMnkZtAnfB1_WVSE
zo!qe(9OvtE|FE;`QGbc{0o(<7uyDoA^bMWl65KH71NOH*7>l1l<sD7>!Uq8S*qIfu
zdfiCOHdGT_UZc2m*zZT!|BQdwPb2L8lweH<b}8x?0oQ6&$gum>jSP6ipS~A`o$9~m
z%pL&0{y7g$%F*4g8|&7cPta65J3G^Bs%{VLJ>nR48bEfSYAC^)1}sGbbrmh@1)Rda
z{oy#MP$8S9azgE;2d|}0f4^OadhpWg!{MNNX~F~V`P_6L_F}5++^2^^lcqHZ$_t*a
zggs=jH5#x~C6uNEyAO3<#1E2>+iepb>un(|G<nCx40Lmb*)nC)Vc?CeDTxI}>LncT
zX21`k^UEu5j-qX|l4+$ZjN%qy9~+mjpGOT-LTwtbD^PpIoZ{udj=giBeMhS5BL37p
z0Pq)Glm)lk-p&L3^0)?G<F*z8d?k6et$TM247i~cWM-7{1-OJg{B5<ps0Lwxo?B7_
zwoc3rLsNKkNEr_oUwn}>_SSuf7k=Qt4;k8)Qc>;Kmk{voIDy_|WFzfHJIjk0g4}OF
z3n*JQ!vf&;!agdlU{}|nN-E(r4cJIc(CIthTc5q~21rXQX*@K?jq1LDFPoVGJ$pBS
zmCxM)+jq|fn%+7vqpUgG4qiV6pnU(!<CIUYL#NB3bm`K*N^eQnEsODK`$&biFsJW(
zMD0j!Jfaf>jfAdn;7t~Egf~s;Q&UPpgGSY1>_gX(!_D5~i)b{YkzUx&R%B{U=f5AE
z4{P5U4fl@dLiOs<80l*Sm$2LO#kvP|g%WPlfu*5d6ZymaZ#!ltT-CNNb)XO)D!04~
zy%+BRo|Ki9N%n}zGx|}w>0O5x@S5_%RE5FopzFy$&v5&2F08{P$k+#aLi3ij48tS;
zEW+M%s&UU@cVzMky4Kh5y3-UZO#}6I)LAh<9EY81wn44h7YBiz!!17OzMyxZvT#k?
zvh`&!0)u>>TXipN+B%K0s%Qnw01cHFQTW{^s5#iXk1nL-4_J7Es^K<nTGJ75`-S}h
zC&JFoqHb5LHeQ!a%nw&&L?HuD`SMu?5YAeohi6;x0F+GAdko*Dn)1U&c7>&Rw^9(z
ze{n6m``AMAF5@FViGLA<ppzb$PXWD#zDRHzkY*F#Zl8hH@&{o4(wpFpdpc6N=t`B!
z(bgqim!shJ4|{i~!M>fGWUPapn@ln40)JQy7;xj<f@L=uqlx&j>o$lxm2mL!XS7XK
zqeew&eN`RkH?Sp5MQ6?%M8-YbtENPj8#YgZO+QQ}V7L67gC(RMH;$Ce=d16h8u9;R
z7g)7+1mr$76sFI*9){oF4X*9i99p!jO;vQ#)6*eIN#S7QbvX0OGZ5?}odx>}o&?fz
zL&&@8plX7CKr`$#>P&gOKRRBBnLRcdBR<Y(IQ$$$s%2NIRB6b_C_}ELI06%}msGC^
zm)5Fm9I3uLW^5swKt`D|R0bN~m%o=6)F><0=!h?cBCsD97k1AzX+{ASrMS&VM}x5c
zOXN}AWQix&(g!B=#Hp==f?p!rX}#o9xJsDBAvDW2DCxb^OQ)01f0C16AJZN75$t)Q
zj_e<Jr;M_`Rv%_$tq>LR3t*>h67+hKu!|vryfn@zrsVX4kH2^nu4+@)5o>u4`v`=6
z&(TFfW|A@2R<mPNzXT!LDk|W9V5b=5wA7Lbv1S)l2(+<WAX~xVlgr7-_vL@57)Crt
z!0u8Ab~1LJC=kwhX{!e85*tC!P11nP6cuiNupiKuz@t<98U{M&y2?6KeA<6;m5X2{
zZoTE7W#%nWN5IZ)9@q44f}VXd!CfF+{J_j(pe8AHHVxD!s6C>u)h~qo=;;+OXVHzu
zsN$ULG;tt=gxr%Ct{CDgyN(C;slvkk|B&}-3O`~cm=ofy(f6U6DA?=<y@UqrNvD9$
zI~LC*`^<}X8`fo^N04|D-eU?S?$W&hZRL4^!ePfPJ?`0vuaS_4?g^*jF-3_)(}1-{
z9TpYr0I<`v>zxnBL$emOB<xZ4>g&|y3dg|CA@5~C{=0yXlh{#IdnHm$gWOaN*z=-7
z9ZIO=x7%hI&L58TkaL=fz`o5t>|ezib~EJHiVQhvmBzzSBL_R{s)2f3RH#Gojo-0n
z4)h<`Qo<fX*mY2Y!7d^95<?MtU6n|;d{9dw=&PKX#k2_QgIY=0i)U4j3)qW7K1)!@
zqc@tHNA=FABZA(DP+_N(RM$(`ixWm`3HFX5z}}`1b_sdmXnxH4Xl{M2{;ZQM@Dg_0
z0H;`j-hG=v*X|AJXAy(FU1VYBkoQK&e-avU4mx|@Jeo&qRBvn4X%q9NSb+To340)M
zfB1%tYQT!8hLY#uwm)W*Vbf(5_Rg2XW|M&~YOtFj@7qjx$Td2${ixPTlpF1<>!2<c
z6=Dgyy=(F682<Y3q-)`aUuPQkizlHdgk5nC>`sE*q$Q{lN-UZV>~am*FM{3}3A=ru
zQ%pK~8JfM^NVdWLlV8{=e%=JTeUR^R0_1dU24nS=Shaju>e7Kd;)KYy&|#ko0|LN~
zKTEhT0^_r0Wo5wJC4=GEU%6)A1lwTmK(J2_0((6(>{jF99RxY)oWYm|xk*Yan+9qn
z4cO;SHq3<zJB2NlNF%>_Ofs2J9(D#GnVDr^?&4U&KFth!0zgi+)Hb3jD<U)v*dPs5
zx0pA}8tlIy?AHxwVXo%MkF?J_;nCh?ImTS<j!cA@q!3&r3gdN!1N)7EVeelI*gKhF
zSAD|XwtaZ8bIAK#=OoBgFqlH!por3RP)q3!bd3!LI~s{7t0{IWuVe&6@9JPAVx)wO
z4`6EJrp+!jWj{5iToNtETrwTAv&%wzglY_C<GG^2B^(@EVBe0g_cdU56(4pzIP7r=
zIf`$ml~M$1JdE`>F>jdl?6R-@^M0@Dt-N#Hc4vDd^9cRk&i(VKq|(Ea`cOxu%%~;O
zs56REkpwO06s$30_5e(g{SffN5Fc!K2(D;YJ#5(LL>TsOe8A4%f790Bu$v*@<~+!E
zQW&ae?I`3WA?Oe2pq>%)##zrUJ8QuWP_kqxpLyYLy`vrMI<x?IN@X|XQLgokTP9<|
zg*)M<TiZ|?CG2ok01c*4--l)!3s>AsSzaimb0I(;*dK-l9@tH<3l96DV6e9+9_&9_
zgPkCEITrFWsIeNXNK!;>I<Rci+hX24%dk^v-(jP=Qhc=!*r_7w?+E*eqVP~&^g}0?
z!DCbVViwj?VZcuB?Nz`b$@6+N2vUkHJcjh1ywhJ+rwYwF%mo}#g|L54u=8v@L3SNH
zuxD`CSNMi~w_n)lJpzu#wDlHvWdGU=b~EJ7(PrQ@$PKYKQCW(}O$XKvwO7m=Xf;y}
zP0gvpVuuO}yScNw@p#w*?D)RqYC34}l`!Lp0hnKX0L?5G=MI6V{(dLC`qurhgxx|#
z9PpY#&EH1pov~bTFxdI$^j*>lWggixLV^AIBCzvgz%La3{_Q)}_Zr!`IPC2@5bPXs
zwEjC5^4;VCCwkL?C7~XQmnpot!~TGE-g;cq7+is1KNtY^X`#c;M^1DUp*`fk;7Ptb
z;8j!z))!tKMtRvH1bZ+by<tD&ANK1I_6wFB^u>YaL95fW?-&~F_-s6o&vqi@XHetv
zMV+$yFwAA4-f(ItYe3k44F&f3cEL`ayw#PL!GE?)F7!$>fut9x2>X4u!~Spou$$!t
z`)nH71Ho=_%^n<fa+iH*VsC-t$%Bcl6Mo9>1NLU|;2!I5WWPEP>_Y>?KG6o)bsw--
zu>kwpK(KE_*c*jsjVIU_#s+pbN-JQ(R#pk39jK;?)7o)Z?9zY@jTc9naA6-36!z<E
zhy6vNV80=vuz&qO*oEyUVMeC8QMVrh)ulMGQ8pT2%XDA`aXF1QVDD87*r!JT_SY=J
zzCJMQ4Q+<~=iPJA^Uyl%?GW~_&~~90h}lO%hg>Z{8H|)voZK{ERZt(sgD<=<*tZ6S
zy=^RD58E1F(<kg|v0<OJATaFx2DG#Ydoq=6K5}}wuze&%eT1r_#6#17U5VN$=#91m
zc1lHr9nd%Iw;}8Y{K3B51AFQ4U~e4)>{Y{r{nEg&f4K3Hn8R+KzJI#uF-MQ+9`Cm+
zm3V1~L3L@M-lBt=A5T;G3nJdg|2>szy@e0^Bnz;&MA$ce8w=QL*bDof&|r5dw2yD(
z44@K8{Bt|4PkBCnK7x)+EOq9(Jiz{XiUw+q4(eG^A3$-PYW~!g7!^Yc%Rjk_!hUlM
zV1LOH?3EDq(Sc!a98K8iy2y=p>_gWWF2@etKJ$neU^)4~Qk8gY#{Rkv?8SInubY6S
z@=wpN83uLgRW*a)Ii?WozXgJQh85Ur7lB>#f_=Cp*xz_30PO#X5bOhsz|KD-1?1#D
zJrs_dTJF^CGt*~gFW|Ye_RB4-*K43Y7WF~cRT1X%&66mgg8QS#5_Y!%`|Hkwo%`H(
z>DIt-;Gz4YI~Z~jun#q0)s;kO8nEU%upgYZwh9;aKMpU1sgL)Eij}fC457h(%7DEe
zl(q!>q)5X~GQ-{|Y}nJ`iTQ(qPUFj$&!Pk$zy3Mb_<1}){$D&cQxd6Zz<Ow)?utj)
z&CqJ+8T|8uanQ9#LnC2DA@Bz5w+4oNvK81{A?%w2!(LSc*vkZgeeWD2W}bZK-OgT*
zbElX;P(74HYdVl6elQ*#Tk$1~(VYxPGv^J0nl&r&uv3ElreLt=Anc{XgS`d9{&@h{
zU$zMQ>j7Z@$O7zT{K8J3KTbw*(h;5d`m*@4u!musOV)wihsqc90ogdZlVObZzHuAQ
zW0_ATC@?uifHk{7u-8P`-wpu#7uI0UnKQs}9uoHX74zBWqwdonFIh?CrooC7jndhw
zr$l{NHjnP)&9(NOF%(Xjo}Ny?556Vhu#<|w{szKcEj-w3gaUh$ps@36qy!qc9;cl8
zZb6@&b+J=M-#!kxDT-_eJ0+J?r|WSJy9qQ(<+NX4LR(+mdp4qx?S`AKgq?rR^9lPA
zgnf$8u&XB6AN2=2zb;D6)fVH&pM3sK*nM=N!#&)5Lyp2eom)zgt!O4$4cH9SX)zyM
z#DJ$9b8FU(q-2Wsjp|CNrg_JY4(uZ=!hU~1*c+Q*ci~Y%WoBkT&)!Yo`BnGAuEXT`
z;^=*GKhO3wYKDZ|za>5$H7ikIzYzEX?xpbVCllbk&kSpGuCH}IIgCts+yd+^1H-;5
z0<eEfu-7D`W3@{v!0mT;Fml$B2O)mmIGn0;$f*yfE3yTJ{qaPY#`{~t=buMl3h3W9
z!(J;e>}!hwdx7cw3Sp<f6U=Q#>9CHW*Wk(cv84N3lh2fphcS&uP18U<Ddq!>oHVcV
zK(O}@8}{Z1`-X2Uz#br<8;;hr^w7?E!Aqk(!W~arWq!m?qNZtbx^897u1?f}X<|Ou
zn8^$~dERl$J&Dpn6NFqrVb^@XUaeXM4m-Wh1hz-X^nYc`W<dSRtDy&5FT>U#>^+OH
z@4AMXDA(lHr}3#eu;KCSRAWtMr<!H(+^T!Yh}W%0BdAli3Y05XmbR^Uf(EWaNRz09
z6i%z@J^YXC75H91h2P@dKjnt++_eD=8`%XG=iUPU`t(8Av2QLMMW+|7AYMo7Kw?KU
zU?cQ+jYNx5Bc~b-*lnoYVm@dg40&`saAGOtGXLbOM`8845wKv{&4#Zym5#z<22}Z^
zS@T*(tu+F6;Ek=R9vQ*z9pXxEuj3xMhAODyHXQAd|A@c8-@SyOrqt7r7bn3c;mgw}
zZ_z+aY-bpoNB3)VU|U6f=mG$5UK109D35V37Y?6ZPW$$IjxB;;_s@mxduGG;J7>~#
zJAh%3MDN9+M(GI(c2Tjds9xW}-xAZUHNwd&TI!&FCgy_|+puSrn=9@OWRVcvt4~oa
z71<&>m9M1(Tdjk7PRx!V6_3(T)aR)0u}c-%q5^w4)NBn{T;+_H5?RcRnr-wwMYia*
zd{EOgQ18+~-4&0isiZ^^^Td*?cWaO<E$gvpdttRp2i6g_L9R2UBD5Yi`c{V>z@*VF
z*3HPlr2|{3C!i;tl>O33>=d3qsV7Q)H>WfW)Y7Q?bWnenQ+cW4iT!T$B~)oeHZhw9
ztTk%A2I@Hpyi|B%=QU8@iL2@<@!T{}%cCZv4oKLgLNvJT*MLnm`i>%-b6P&+C262`
zNBvvwxl08INI8#sAJ02$pe8A@IkRb?RzN+b1KT5Nhm(q#b|c`EQ56)~oZpTBb0O$g
zp<YY0gcef1L>BeeQCA&@m2%rG-kJ_-84c7s@c6A0t8hvcd&>;y*;5~28H#N2-84{Z
zqGsx#%ISPUhydS1&m34yMYhCghOtfuwUq|y-%v;72p?b43XjK7&*FJY9rC2HEm51t
zXTG}*>N=DzfsY3<6a_rJrh(c6m8Qrhn<v&iT?e%<>K_t#r;4h^oJ75g=L7I(G8?OG
zehqd6JRjl3?9ft$V*KbfJR(tpG*HVbvdI=6@HG89Dn0B(6XTE{MXg5l(Ll{qWRuOJ
zg}x-JBPve^^$$FPgkFRZT>S&j^YGXaCDSa+W*6{z$q0D^4cH_d*w=XemoA}?ve;i5
zsGCrebbJ=55{hiHMR1g_gt`&68nsUc6(sZ#o0@|LY@Y_|D$hNyq{t>)^cn%5hH8v@
zL<9CQ9`iK`eX*qhDPPBXih3B&o1kPGC)r}%2>L8kXVl}Uji`LNJr}ANaJW79ZYHV|
zDoc?~Hc=a8sRa%_`$z|NNJ8&VbZ<UE<)AvtEUU6PvLWc1s1_Qiqwu&2wM_?>pt<cB
ziX2+DqYV4T{YFs^xh*DJTr~|?3aXk0YEK>1NqAgmfRA#U*7k9;zSro;bkAp8s{wuH
zo_KzV4lG5HO}0d6hJncdAJxSe-B3>&<$mzE3*{!@h5G_vf!5h>&$WMwT1g`|sGaCD
z%4(ys$)->{4o|y`X)LNX3gKt>;&Hx_FawWYAT+;eRHj!w&4JUrAY}G#Z517%3s9#~
zM^L}fH354ak8^dPYwhN__Kd^uv`pwAn{44Uou>S1d4#Plf^Jx&hj_M~mZ4rneWn5X
z-V<}J;dwzZ@~9aw>z?=e!81C)ivM1UdJxZV_E^O0pvud-;Ld3O2Z@;?gj1~0*8l(j
M07*qoM6N<$f}cM6tpET3

literal 0
HcmV?d00001

diff --git a/carpincho-wallet/test/tsconfig.json b/carpincho-wallet/test/tsconfig.json
index 7fa78501..9848cb82 100644
--- a/carpincho-wallet/test/tsconfig.json
+++ b/carpincho-wallet/test/tsconfig.json
@@ -8,6 +8,7 @@
     "baseUrl": "..",
     "paths": {
       "@/assets/*.svg": ["test/__mocks__/svg.ts"],
+      "@/assets/*.png": ["test/__mocks__/svg.ts"],
       "@/*": ["src/*"]
     },
     "isolatedModules": true,
diff --git a/package-lock.json b/package-lock.json
index a2f89089..89584f43 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -125,7 +125,8 @@
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "react-qr-code": "^2.2.0"
       },
       "devDependencies": {
         "@happy-dom/global-registrator": "^20.9.0",
@@ -10606,6 +10607,23 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/protobufjs": {
       "version": "7.6.2",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.6.2.tgz",
@@ -10776,6 +10794,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/qrcode-generator": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-2.0.4.tgz",
+      "integrity": "sha512-mZSiP6RnbHl4xL2Ap5HfkjLnmxfKcPWpWe/c+5XxCuetEenqmNFf1FH/ftXPCtFG5/TDobjsjz6sSNL0Sr8Z9g==",
+      "license": "MIT"
+    },
     "node_modules/qrcode/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -11018,6 +11042,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-qr-code": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.2.0.tgz",
+      "integrity": "sha512-e5nS0UUN22K3Nf8KBRUzemfdJ6OmnN5w+kbnj1lvJaol9RyVRFeGl05bCkxSN2ZegbLxjjYjX1+mmAoX9+fAhw==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "qrcode-generator": "^2.0.4"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

From 23ed337d1cbe65762f80e5f1ca6145c6d44db187 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:04:03 -0300
Subject: [PATCH 67/98] feat(carpincho): add send and receive icons

---
 carpincho-wallet/src/components/ui/icons.tsx | 44 ++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index 43689477..43b8bcfa 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -367,6 +367,50 @@ export const CHEVRON_RIGHT_ICON = (
   </svg>
 )
 
+export const SEND_ICON = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <line
+      x1="7"
+      y1="17"
+      x2="17"
+      y2="7"
+    />
+    <polyline points="7 7 17 7 17 17" />
+  </svg>
+)
+
+export const RECEIVE_ICON = (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <line
+      x1="17"
+      y1="7"
+      x2="7"
+      y2="17"
+    />
+    <polyline points="17 17 7 17 7 7" />
+  </svg>
+)
+
 export const RECEIPT_ICON = (
   <svg
     width="16"

From 33bd8ebe322defd50045ced50cdfafa76165ef4d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:05:47 -0300
Subject: [PATCH 68/98] feat(carpincho): add TokenRow assets list item

---
 carpincho-wallet/src/components/TokenRow.tsx  | 51 ++++++++++++
 .../test/components/TokenRow.test.tsx         | 82 +++++++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TokenRow.tsx
 create mode 100644 carpincho-wallet/test/components/TokenRow.test.tsx

diff --git a/carpincho-wallet/src/components/TokenRow.tsx b/carpincho-wallet/src/components/TokenRow.tsx
new file mode 100644
index 00000000..aeccbf9c
--- /dev/null
+++ b/carpincho-wallet/src/components/TokenRow.tsx
@@ -0,0 +1,51 @@
+import cantonIcon from '@/assets/canton.png'
+import type { TokenHoldingSummary } from '@/cip56/holdings'
+import { CHEVRON_RIGHT_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}
+      </span>
+      <span className="block truncate text-[0.84rem] text-muted-foreground">
+        {utxoSubtitle(summary)}
+      </span>
+    </span>
+    <span
+      aria-hidden="true"
+      className="justify-self-end text-muted-foreground"
+    >
+      {CHEVRON_RIGHT_ICON}
+    </span>
+  </button>
+)
diff --git a/carpincho-wallet/test/components/TokenRow.test.tsx b/carpincho-wallet/test/components/TokenRow.test.tsx
new file mode 100644
index 00000000..66946e16
--- /dev/null
+++ b/carpincho-wallet/test/components/TokenRow.test.tsx
@@ -0,0 +1,82 @@
+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 { TokenHoldingSummary } from '@/cip56/holdings'
+import { TokenRow } from '@/components/TokenRow'
+
+const SUMMARY: TokenHoldingSummary = {
+  key: 'dso::party:Amulet',
+  tokenLabel: 'Amulet',
+  instrumentId: { admin: 'dso::party', id: 'Amulet' },
+  totalAmount: '9997',
+  utxoCount: 2,
+  lockedCount: 0,
+  unlockedCount: 2,
+  source: 'utxos',
+}
+
+describe('TokenRow', () => {
+  afterEach(() => {
+    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.
+    const { container } = render(
+      <TokenRow
+        summary={SUMMARY}
+        onOpen={() => undefined}
+      />,
+    )
+
+    assert.equal(screen.getByText('Amulet').textContent, 'Amulet')
+    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
+    assert.ok(container.querySelector('img'), 'the row should show the token icon')
+    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.
+    render(
+      <TokenRow
+        summary={{ ...SUMMARY, utxoCount: 1, lockedCount: 1, unlockedCount: 0 }}
+        onOpen={() => undefined}
+      />,
+    )
+
+    assert.equal(screen.getByText('1 UTXO · 1 locked').textContent, '1 UTXO · 1 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".
+    render(
+      <TokenRow
+        summary={{ ...SUMMARY, utxoCount: undefined, lockedCount: undefined }}
+        onOpen={() => undefined}
+      />,
+    )
+
+    assert.equal(screen.getByText('UTXOs load on demand').textContent, 'UTXOs load on demand')
+  })
+
+  it('opens the token when the row is clicked', async () => {
+    // Scenario: the whole row is the affordance that opens the token detail modal.
+    let opened = 0
+    render(
+      <TokenRow
+        summary={SUMMARY}
+        onOpen={() => {
+          opened += 1
+        }}
+      />,
+    )
+
+    await userEvent.click(screen.getByRole('button'))
+
+    assert.equal(opened, 1)
+  })
+})

From 6a9af6bd3dab4c01af6595fd7bc26c21149dd3ee Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:07:07 -0300
Subject: [PATCH 69/98] feat(carpincho): add TokenReceive QR screen

---
 .../src/components/TokenReceive.tsx           | 36 +++++++++++++++++++
 .../test/components/TokenReceive.test.tsx     | 23 ++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TokenReceive.tsx
 create mode 100644 carpincho-wallet/test/components/TokenReceive.test.tsx

diff --git a/carpincho-wallet/src/components/TokenReceive.tsx b/carpincho-wallet/src/components/TokenReceive.tsx
new file mode 100644
index 00000000..a310c1e6
--- /dev/null
+++ b/carpincho-wallet/src/components/TokenReceive.tsx
@@ -0,0 +1,36 @@
+import QRCode from 'react-qr-code'
+import { CopyPartyIdButton } from '@/components/CopyPartyIdButton'
+
+interface TokenReceiveProps {
+  partyId: string
+}
+
+// Receive screen: a scannable QR of the party id with the full id and copy below.
+export const TokenReceive = ({ partyId }: TokenReceiveProps): JSX.Element => (
+  <div className="flex flex-col items-center gap-5">
+    {/* Fixed light QR keeps it scannable in dark mode too. */}
+    <div
+      data-testid="receive-qr"
+      className="rounded-xl border border-border bg-white p-4"
+    >
+      <QRCode
+        value={partyId}
+        size={208}
+        bgColor="#ffffff"
+        fgColor="#14152b"
+        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>
+  </div>
+)
diff --git a/carpincho-wallet/test/components/TokenReceive.test.tsx b/carpincho-wallet/test/components/TokenReceive.test.tsx
new file mode 100644
index 00000000..53012a8c
--- /dev/null
+++ b/carpincho-wallet/test/components/TokenReceive.test.tsx
@@ -0,0 +1,23 @@
+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'
+
+const PARTY_ID = 'alice::1220abc0000000000000000000000000000000000000000000000000c8b64e3'
+
+describe('TokenReceive', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  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 qr = container.querySelector('[data-testid="receive-qr"] svg')
+    assert.ok(qr, 'the receive screen should render a QR code')
+    assert.equal(screen.getByText(PARTY_ID).textContent, PARTY_ID)
+    assert.ok(screen.getByRole('button', { name: /copy party id/i }))
+  })
+})

From e59545513b0d029a5c00dbeeaceb0f0c1383af2b Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:08:23 -0300
Subject: [PATCH 70/98] feat(carpincho): extract TokenHoldingDetail UTXO view

---
 .../src/components/TokenHoldingDetail.tsx     | 43 ++++++++++++++++
 .../components/TokenHoldingDetail.test.tsx    | 50 +++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TokenHoldingDetail.tsx
 create mode 100644 carpincho-wallet/test/components/TokenHoldingDetail.test.tsx

diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
new file mode 100644
index 00000000..5a9bef5b
--- /dev/null
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -0,0 +1,43 @@
+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>
+)
+
+// Full detail for a single token holding UTXO.
+export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.Element => {
+  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">
+      <HoldingDetailRow
+        label="amount"
+        value={view?.amount ?? 'unknown'}
+      />
+      <HoldingDetailRow
+        label="lock"
+        value={lock == null ? 'unlocked' : 'locked'}
+      />
+      {lock?.expiresAt === undefined ? null : (
+        <HoldingDetailRow
+          label="expires"
+          value={transferTimeLabel(lock.expiresAt)}
+        />
+      )}
+      <HoldingDetailRow
+        label="contract id"
+        value={holding.contractId}
+      />
+    </dl>
+  )
+}
diff --git a/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
new file mode 100644
index 00000000..ac15e8be
--- /dev/null
+++ b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
@@ -0,0 +1,50 @@
+import { strict as assert } from 'node:assert'
+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'
+
+const UNLOCKED: TokenHolding = {
+  contractId: 'holding-cid-1',
+  interfaceViewValue: {
+    owner: 'alice::party',
+    amount: '12.5000000000',
+    instrumentId: { admin: 'dso::party', id: 'Amulet' },
+    lock: null,
+  },
+}
+
+const LOCKED: TokenHolding = {
+  contractId: 'holding-cid-2',
+  interfaceViewValue: {
+    owner: 'alice::party',
+    amount: '3.2500000000',
+    instrumentId: { admin: 'dso::party', id: 'Amulet' },
+    lock: { holders: ['validator::party'], expiresAt: '2026-06-10T20:41:05.803Z' },
+  },
+}
+
+describe('TokenHoldingDetail', () => {
+  afterEach(() => {
+    cleanup()
+  })
+
+  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} />)
+
+    assert.equal(screen.getByText('12.5000000000').textContent, '12.5000000000')
+    assert.equal(screen.getByText('unlocked').textContent, 'unlocked')
+    assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
+    assert.equal(screen.queryByText('expires'), null)
+  })
+
+  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} />)
+
+    assert.equal(screen.getByText('locked').textContent, 'locked')
+    assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
+  })
+})

From 6d551f525e475446e99b58195f96084c97c31db0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:10:28 -0300
Subject: [PATCH 71/98] feat(carpincho): add SendTokenForm with preset token

---
 .../src/components/SendTokenForm.tsx          | 209 ++++++++++++++++++
 .../test/components/SendTokenForm.test.tsx    | 118 ++++++++++
 2 files changed, 327 insertions(+)
 create mode 100644 carpincho-wallet/src/components/SendTokenForm.tsx
 create mode 100644 carpincho-wallet/test/components/SendTokenForm.test.tsx

diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
new file mode 100644
index 00000000..b2509305
--- /dev/null
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -0,0 +1,209 @@
+import { type FormEvent, useState } from 'react'
+import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
+import type { TokenHoldingSummary } from '@/cip56/holdings'
+import { type CreateTokenTransferParams, createTokenTransfer } from '@/cip56/transfers'
+import { PrimaryButton } from '@/components/ui/Button'
+import { TextInput } from '@/components/ui/TextInput'
+import { toast } from '@/components/ui/toast'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export type TransferDeadline = '1h' | '1d' | '1w' | '1m' | '1y'
+
+export interface Cip56SendApi {
+  createTokenTransfer: (params: CreateTokenTransferParams) => Promise<ExecutePreparedResponse>
+}
+
+export interface SendTokenFormProps {
+  account: AccountPublic
+  summary: TokenHoldingSummary
+  sendApi?: Cip56SendApi
+  // Called after a transfer is accepted so the host can refresh holdings or navigate back.
+  onSent?: () => void
+}
+
+const defaultSendApi: Cip56SendApi = {
+  createTokenTransfer,
+}
+
+const DEADLINE_OPTIONS: Array<{ value: TransferDeadline; label: string }> = [
+  { value: '1h', label: '1 hour' },
+  { value: '1d', label: '1 day' },
+  { value: '1w', label: '1 week' },
+  { value: '1m', label: '1 month' },
+  { value: '1y', label: '1 year' },
+]
+
+// Converts compact UI presets into absolute expiration timestamps for CIP-56 transfers.
+export const transferDeadlineExpiration = (deadline: TransferDeadline, now = new Date()): Date => {
+  const next = new Date(now.getTime())
+  if (deadline === '1h') {
+    next.setUTCHours(next.getUTCHours() + 1)
+    return next
+  }
+  if (deadline === '1d') {
+    next.setUTCDate(next.getUTCDate() + 1)
+    return next
+  }
+  if (deadline === '1w') {
+    next.setUTCDate(next.getUTCDate() + 7)
+    return next
+  }
+  if (deadline === '1m') {
+    next.setUTCMonth(next.getUTCMonth() + 1)
+    return next
+  }
+  next.setUTCFullYear(next.getUTCFullYear() + 1)
+  return next
+}
+
+// Outgoing CIP-56 transfer form for a token already chosen by the detail modal.
+export const SendTokenForm = ({
+  account,
+  summary,
+  sendApi = defaultSendApi,
+  onSent,
+}: SendTokenFormProps): JSX.Element => {
+  const vault = useVault()
+  const [recipient, setRecipient] = useState('')
+  const [amount, setAmount] = useState('')
+  const [memo, setMemo] = useState('')
+  const [deadline, setDeadline] = useState<TransferDeadline>('1h')
+  const [submitting, setSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | undefined>(undefined)
+  const [submitStatus, setSubmitStatus] = useState<string | undefined>(undefined)
+
+  // Submits the transfer intent while Carpincho remains the signer of the prepared transaction.
+  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+    event.preventDefault()
+    if (summary.instrumentId?.id === undefined) {
+      setSubmitError('Token is missing an instrument id')
+      return
+    }
+    setSubmitting(true)
+    setSubmitError(undefined)
+    setSubmitStatus(undefined)
+    try {
+      await sendApi.createTokenTransfer({
+        account,
+        recipient: recipient.trim(),
+        amount: amount.trim(),
+        instrumentId: summary.instrumentId,
+        ...(memo.trim() === '' ? {} : { memo: memo.trim() }),
+        expirationDate: transferDeadlineExpiration(deadline).toISOString(),
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      setRecipient('')
+      setAmount('')
+      setMemo('')
+      setSubmitStatus('Transfer submitted.')
+      toast.success('Transfer submitted.')
+      onSent?.()
+    } catch (err) {
+      const message = (err as Error).message
+      setSubmitError(message)
+      toast.error(`Send failed: ${message}`)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-3"
+      onSubmit={(event) => {
+        void onSubmit(event)
+      }}
+    >
+      {submitError === undefined ? null : (
+        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+          {submitError}
+        </div>
+      )}
+
+      {submitStatus === undefined ? null : (
+        <div className="rounded-md border border-primary/30 bg-primary-soft px-3 py-2 text-[0.82rem] text-primary">
+          {submitStatus}
+        </div>
+      )}
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-recipient"
+      >
+        Recipient party
+        <TextInput
+          aria-label="Recipient party"
+          autoComplete="off"
+          id="send-recipient"
+          value={recipient}
+          onChange={(event) => setRecipient(event.target.value)}
+        />
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-amount"
+      >
+        Amount
+        <TextInput
+          aria-label="Amount"
+          id="send-amount"
+          inputMode="decimal"
+          value={amount}
+          onChange={(event) => setAmount(event.target.value)}
+        />
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-deadline"
+      >
+        Deadline
+        <select
+          aria-label="Deadline"
+          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
+          id="send-deadline"
+          value={deadline}
+          onChange={(event) => setDeadline(event.target.value as TransferDeadline)}
+        >
+          {DEADLINE_OPTIONS.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+            >
+              {option.label}
+            </option>
+          ))}
+        </select>
+      </label>
+
+      <label
+        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
+        htmlFor="send-memo"
+      >
+        Memo
+        <TextInput
+          aria-label="Memo"
+          id="send-memo"
+          value={memo}
+          onChange={(event) => setMemo(event.target.value)}
+        />
+      </label>
+
+      <PrimaryButton
+        className="mt-1"
+        disabled={
+          submitting ||
+          recipient.trim() === '' ||
+          amount.trim() === '' ||
+          summary.instrumentId?.id === undefined
+        }
+        type="submit"
+      >
+        {submitting ? 'Sending...' : 'Send'}
+      </PrimaryButton>
+    </form>
+  )
+}
diff --git a/carpincho-wallet/test/components/SendTokenForm.test.tsx b/carpincho-wallet/test/components/SendTokenForm.test.tsx
new file mode 100644
index 00000000..4bb388d9
--- /dev/null
+++ b/carpincho-wallet/test/components/SendTokenForm.test.tsx
@@ -0,0 +1,118 @@
+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 { TokenHoldingSummary } from '@/cip56/holdings'
+import {
+  type Cip56SendApi,
+  SendTokenForm,
+  transferDeadlineExpiration,
+} from '@/components/SendTokenForm'
+import { toast } from '@/components/ui/toast'
+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 SUMMARY: TokenHoldingSummary = {
+  key: 'dso::party:Amulet',
+  tokenLabel: 'Amulet',
+  instrumentId: { admin: 'dso::party', id: 'Amulet' },
+  totalAmount: '12.5000000000',
+  source: 'scan',
+}
+
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderForm = (sendApi: Cip56SendApi, onSent: () => void): void => {
+  render(
+    <VaultContext.Provider value={baseVault()}>
+      <SendTokenForm
+        account={ACCOUNT}
+        summary={SUMMARY}
+        sendApi={sendApi}
+        onSent={onSent}
+      />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('SendTokenForm', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('submits a transfer for the preset token without a token field', async () => {
+    // Scenario: the token is already chosen by the detail modal, so the form drops
+    // the token dropdown and sends against the passed-in instrument id.
+    const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
+    let sentCount = 0
+    const sendApi: Cip56SendApi = {
+      createTokenTransfer: async (params) => {
+        sent.push(params)
+        return { updateId: 'update-transfer-1' }
+      },
+    }
+
+    renderForm(sendApi, () => {
+      sentCount += 1
+    })
+
+    assert.equal(screen.queryByLabelText('Token'), null)
+    await userEvent.type(screen.getByLabelText('Recipient party'), 'receiver::party')
+    await userEvent.type(screen.getByLabelText('Amount'), '7.5')
+    await userEvent.type(screen.getByLabelText('Memo'), 'lunch')
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+
+    await screen.findByText('Transfer submitted.')
+    assert.equal(sent.length, 1)
+    assert.equal(sent[0]?.account.partyId, 'alice::party')
+    assert.equal(sent[0]?.recipient, 'receiver::party')
+    assert.equal(sent[0]?.amount, '7.5')
+    assert.deepEqual(sent[0]?.instrumentId, { admin: 'dso::party', id: 'Amulet' })
+    assert.equal(sent[0]?.memo, 'lunch')
+    assert.equal(sentCount, 1)
+  })
+
+  it('computes calendar deadline expirations from the selected preset', () => {
+    // Scenario: deadline presets must resolve to absolute ISO timestamps using
+    // calendar arithmetic for month/year.
+    const now = new Date('2026-06-10T12:00:00.000Z')
+
+    assert.equal(transferDeadlineExpiration('1h', now).toISOString(), '2026-06-10T13:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1d', now).toISOString(), '2026-06-11T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1w', now).toISOString(), '2026-06-17T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1m', now).toISOString(), '2026-07-10T12:00:00.000Z')
+    assert.equal(transferDeadlineExpiration('1y', now).toISOString(), '2027-06-10T12:00:00.000Z')
+  })
+})

From a06dbe1606baef71aab9ef2146e4880938935095 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:13:46 -0300
Subject: [PATCH 72/98] feat(carpincho): add TokenDetailSheet screen-stack
 modal

---
 .../src/components/TokenDetailSheet.tsx       | 248 ++++++++++++++++++
 .../test/components/TokenDetailSheet.test.tsx | 152 +++++++++++
 2 files changed, 400 insertions(+)
 create mode 100644 carpincho-wallet/src/components/TokenDetailSheet.tsx
 create mode 100644 carpincho-wallet/test/components/TokenDetailSheet.test.tsx

diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
new file mode 100644
index 00000000..eb34a288
--- /dev/null
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -0,0 +1,248 @@
+import { useState } from 'react'
+import type { TokenHolding, TokenHoldingSummary } from '@/cip56/holdings'
+import { type Cip56SendApi, SendTokenForm } from '@/components/SendTokenForm'
+import { TokenHoldingDetail } from '@/components/TokenHoldingDetail'
+import { TokenReceive } from '@/components/TokenReceive'
+import { SecondaryButton } from '@/components/ui/Button'
+import { CHEVRON_RIGHT_ICON, RECEIVE_ICON, SEND_ICON } from '@/components/ui/icons'
+import { Sheet } from '@/components/ui/Sheet'
+import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
+import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import type { AccountPublic } from '@/vault/types'
+
+type Screen = 'detail' | 'send' | 'receive' | 'holding'
+
+const PARENT: Record<Screen, Screen | null> = {
+  detail: null,
+  send: 'detail',
+  receive: 'detail',
+  holding: 'detail',
+}
+
+export interface TokenDetailSheetProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  account: AccountPublic
+  summary: TokenHoldingSummary
+  holdingsApi?: Cip56HoldingsApi
+  sendApi?: Cip56SendApi
+  // Lets the host refresh holdings after a transfer leaves the wallet.
+  onSent?: () => void
+}
+
+interface DetailScreenProps {
+  summary: TokenHoldingSummary
+  holdings: TokenHolding[]
+  loading: boolean
+  error?: string
+  onSend: () => void
+  onReceive: () => void
+  onOpenHolding: (holding: TokenHolding) => void
+}
+
+// One holding in the balance-screen list: amount left, chevron right.
+const HoldingListRow = ({
+  holding,
+  onOpen,
+}: {
+  holding: TokenHolding
+  onOpen: () => void
+}): JSX.Element => {
+  const view = holding.interfaceViewValue
+  return (
+    <button
+      type="button"
+      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"
+    >
+      <span className="min-w-0">
+        <span className="block text-[0.7rem] font-semibold uppercase tracking-[0.04em] text-muted-foreground">
+          Amount
+        </span>
+        <span className="flex items-center gap-2">
+          <span className="min-w-0 truncate font-mono text-[0.9rem] text-foreground">
+            {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>
+          )}
+        </span>
+      </span>
+      <span
+        aria-hidden="true"
+        className="justify-self-end text-muted-foreground"
+      >
+        {CHEVRON_RIGHT_ICON}
+      </span>
+    </button>
+  )
+}
+
+// Balance-first root screen: total, send/receive, then the holdings list.
+const DetailScreen = ({
+  summary,
+  holdings,
+  loading,
+  error,
+  onSend,
+  onReceive,
+  onOpenHolding,
+}: DetailScreenProps): JSX.Element => (
+  <div className="flex flex-col gap-5">
+    <div className="flex flex-col items-center gap-1 text-center">
+      <span className="break-all font-display text-3xl font-bold tracking-tight text-foreground">
+        {summary.totalAmount}
+      </span>
+      <span className="text-[0.9rem] font-semibold text-muted-foreground">
+        {summary.tokenLabel}
+      </span>
+    </div>
+
+    <div className="grid grid-cols-2 gap-3">
+      <SecondaryButton onClick={onSend}>
+        {SEND_ICON}
+        Send
+      </SecondaryButton>
+      <SecondaryButton onClick={onReceive}>
+        {RECEIVE_ICON}
+        Receive
+      </SecondaryButton>
+    </div>
+
+    <div className="flex 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>
+  </div>
+)
+
+// Single token modal: a screen stack (detail / send / receive / holding) inside one sheet.
+export const TokenDetailSheet = ({
+  open,
+  onOpenChange,
+  account,
+  summary,
+  holdingsApi,
+  sendApi,
+  onSent,
+}: TokenDetailSheetProps): JSX.Element => {
+  const [screen, setScreen] = useState<Screen>('detail')
+  const [activeHolding, setActiveHolding] = useState<TokenHolding | null>(null)
+  const [direction, setDirection] = useState<'forward' | 'back'>('forward')
+
+  const detailsApi =
+    holdingsApi?.listTokenHoldings === undefined
+      ? undefined
+      : { listTokenHoldings: holdingsApi.listTokenHoldings }
+  const { holdings, loading, error } = useTokenHoldingDetails(account, summary, {
+    api: detailsApi,
+    enabled: open,
+  })
+
+  const handleOpenChange = (next: boolean): void => {
+    if (!next) {
+      setScreen('detail')
+      setActiveHolding(null)
+      setDirection('forward')
+    }
+    onOpenChange(next)
+  }
+
+  const goTo = (next: Screen): void => {
+    setDirection('forward')
+    setScreen(next)
+  }
+
+  const goBack = (): void => {
+    const parent = PARENT[screen]
+    if (parent === null) {
+      handleOpenChange(false)
+      return
+    }
+    setDirection('back')
+    setScreen(parent)
+  }
+
+  const openHolding = (holding: TokenHolding): void => {
+    setActiveHolding(holding)
+    goTo('holding')
+  }
+
+  // After a transfer leaves the wallet, refresh the host and return to the balance view.
+  const handleSent = (): void => {
+    onSent?.()
+    setDirection('back')
+    setScreen('detail')
+  }
+
+  const title =
+    screen === 'send'
+      ? `Send ${summary.tokenLabel}`
+      : screen === 'receive'
+        ? 'Receive'
+        : screen === 'holding'
+          ? 'Holding details'
+          : summary.tokenLabel
+  const animationClass =
+    direction === 'forward' ? 'animate-slide-in-right' : 'animate-slide-in-left'
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={handleOpenChange}
+      title={title}
+      description={`${summary.tokenLabel} token details`}
+      onBack={screen === 'detail' ? undefined : goBack}
+      side="center"
+    >
+      <div
+        key={screen}
+        className={animationClass}
+      >
+        {screen === 'detail' && (
+          <DetailScreen
+            summary={summary}
+            holdings={holdings}
+            loading={loading}
+            error={error}
+            onSend={() => goTo('send')}
+            onReceive={() => goTo('receive')}
+            onOpenHolding={openHolding}
+          />
+        )}
+        {screen === 'send' && (
+          <SendTokenForm
+            account={account}
+            summary={summary}
+            sendApi={sendApi}
+            onSent={handleSent}
+          />
+        )}
+        {screen === 'receive' && <TokenReceive partyId={account.partyId} />}
+        {screen === 'holding' && activeHolding !== null && (
+          <TokenHoldingDetail holding={activeHolding} />
+        )}
+      </div>
+    </Sheet>
+  )
+}
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
new file mode 100644
index 00000000..3683db3b
--- /dev/null
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -0,0 +1,152 @@
+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 { TokenHoldingSummary } from '@/cip56/holdings'
+import { TokenDetailSheet } from '@/components/TokenDetailSheet'
+import { toast } from '@/components/ui/toast'
+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::1220deadbeefc8b64e3',
+  publicKeyBase64: 'public-key',
+  network: 'canton:local',
+  isPrimary: true,
+  createdAt: 1,
+}
+
+const SUMMARY: TokenHoldingSummary = {
+  key: 'dso::party:Amulet',
+  tokenLabel: 'Amulet',
+  instrumentId: { admin: 'dso::party', id: 'Amulet' },
+  totalAmount: '9997',
+  utxoCount: 2,
+  lockedCount: 0,
+  unlockedCount: 2,
+  source: 'utxos',
+  holdings: [
+    {
+      contractId: 'holding-cid-1',
+      interfaceViewValue: {
+        owner: 'alice::party',
+        amount: '9000.0000000000',
+        instrumentId: { admin: 'dso::party', id: 'Amulet' },
+        lock: null,
+      },
+    },
+    {
+      contractId: 'holding-cid-2',
+      interfaceViewValue: {
+        owner: 'alice::party',
+        amount: '997.0000000000',
+        instrumentId: { admin: 'dso::party', id: 'Amulet' },
+        lock: null,
+      },
+    },
+  ],
+}
+
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderSheet = (): void => {
+  render(
+    <TestQueryClientProvider>
+      <VaultContext.Provider value={baseVault()}>
+        <TokenDetailSheet
+          open={true}
+          onOpenChange={() => undefined}
+          account={ACCOUNT}
+          summary={SUMMARY}
+        />
+      </VaultContext.Provider>
+    </TestQueryClientProvider>,
+  )
+}
+
+describe('TokenDetailSheet', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('shows the balance and holdings list on the detail screen', () => {
+    // Scenario: the modal opens on the balance-first detail screen with the token
+    // total in big type and each holding listed below.
+    renderSheet()
+
+    assert.equal(screen.getByText('9997').textContent, '9997')
+    assert.ok(screen.getByText('9000.0000000000'))
+    assert.ok(screen.getByText('997.0000000000'))
+  })
+
+  it('opens only one dialog at a time across screens', async () => {
+    // Scenario: the one-modal rule means navigating between screens reuses a single
+    // dialog rather than stacking nested ones.
+    renderSheet()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+
+    assert.equal(document.querySelectorAll('[role="dialog"]').length, 1)
+  })
+
+  it('navigates to the send screen and back', async () => {
+    // Scenario: Send pushes the transfer form (token preset, no token field) and the
+    // back chevron returns to the balance view.
+    renderSheet()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    assert.ok(screen.getByLabelText('Recipient party'))
+    assert.equal(screen.queryByLabelText('Token'), null)
+
+    await userEvent.click(screen.getByRole('button', { name: /back/i }))
+    assert.ok(screen.getByText('9000.0000000000'))
+  })
+
+  it('navigates to the receive screen showing the party QR and id', async () => {
+    // Scenario: Receive shows a scannable QR plus the full party id and a copy button.
+    // The sheet renders through a portal, so the QR lives on document, not the container.
+    renderSheet()
+
+    await userEvent.click(screen.getByRole('button', { name: 'Receive' }))
+
+    assert.ok(document.querySelector('[data-testid="receive-qr"] svg'))
+    assert.equal(screen.getByText(ACCOUNT.partyId).textContent, ACCOUNT.partyId)
+    assert.ok(screen.getByRole('button', { name: /copy party id/i }))
+  })
+
+  it('opens a holding detail from the list and back', async () => {
+    // Scenario: each holding row drills into the full UTXO detail (contract id, lock).
+    renderSheet()
+
+    await userEvent.click(screen.getByRole('button', { name: /9000\.0000000000/ }))
+    assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
+
+    await userEvent.click(screen.getByRole('button', { name: /back/i }))
+    assert.ok(screen.getByText('997.0000000000'))
+  })
+})

From 5ae0662bfcaacb638bc3185bd7066bb754e24722 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:18:23 -0300
Subject: [PATCH 73/98] feat(carpincho): move sending into token modal, drop
 Send tab

---
 .../src/components/AssetsPanel.tsx            | 177 ++---------
 carpincho-wallet/src/components/HomeTabs.tsx  |  14 +-
 .../src/components/SendTokensPanel.tsx        | 278 ------------------
 .../test/components/AssetsPanel.test.tsx      |  88 +++---
 .../test/components/HomeTabs.test.tsx         |  13 +-
 .../test/components/SendTokensPanel.test.tsx  | 126 --------
 6 files changed, 89 insertions(+), 607 deletions(-)
 delete mode 100644 carpincho-wallet/src/components/SendTokensPanel.tsx
 delete mode 100644 carpincho-wallet/test/components/SendTokensPanel.test.tsx

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 2f02948c..4201227b 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
-import { transferTimeLabel } from '@/cip56/transfers'
-import { SecondaryButton } from '@/components/ui/Button'
-import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
+import type { Cip56SendApi } from '@/components/SendTokenForm'
+import { TokenDetailSheet } from '@/components/TokenDetailSheet'
+import { TokenRow } from '@/components/TokenRow'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -11,98 +11,15 @@ import { useVault } from '@/vault/useVault'
 export interface AssetsPanelProps {
   account?: AccountPublic
   api?: Cip56HoldingsApi
+  sendApi?: Cip56SendApi
 }
 
-interface HoldingDetailRowProps {
-  label: string
-  value: string
-}
-
-interface TokenHoldingDetailsProps {
-  account: AccountPublic
-  api?: Cip56HoldingsApi
-  summary: TokenHoldingSummary
-}
-
-// Keeps raw holding values readable in the expanded UTXO details area.
-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>
-)
-
-// Fetches UTXO details lazily so Scan summaries can render balances quickly.
-const TokenHoldingDetails = ({ account, api, summary }: TokenHoldingDetailsProps): JSX.Element => {
-  const detailsApi =
-    api?.listTokenHoldings === undefined ? undefined : { listTokenHoldings: api.listTokenHoldings }
-  const { holdings, loading, error } = useTokenHoldingDetails(account, summary, {
-    api: detailsApi,
-    enabled: true,
-  })
-
-  if (loading && holdings.length === 0) {
-    return <p className="m-0 text-[0.82rem] text-muted-foreground">Loading UTXOs</p>
-  }
-
-  if (error !== undefined) {
-    return (
-      <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-        {error}
-      </div>
-    )
-  }
-
-  if (holdings.length === 0) {
-    return <p className="m-0 text-[0.82rem] text-muted-foreground">No UTXO details</p>
-  }
-
-  return (
-    <>
-      {holdings.map((holding) => {
-        const view = holding.interfaceViewValue
-        const lock = view?.lock
-        return (
-          <dl
-            key={holding.contractId}
-            className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3"
-          >
-            <HoldingDetailRow
-              label="amount"
-              value={view?.amount ?? 'unknown'}
-            />
-            <HoldingDetailRow
-              label="lock"
-              value={lock == null ? 'unlocked' : 'locked'}
-            />
-            {lock?.expiresAt === undefined ? null : (
-              <HoldingDetailRow
-                label="expires"
-                value={transferTimeLabel(lock.expiresAt)}
-              />
-            )}
-            <HoldingDetailRow
-              label="contract id"
-              value={holding.contractId}
-            />
-          </dl>
-        )
-      })}
-    </>
-  )
-}
-
-// Renders active CIP-56 token holding UTXOs grouped as token balances.
-export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element => {
+// Renders active CIP-56 token holdings as activity-style rows that open a detail modal.
+export const AssetsPanel = ({ account, api, sendApi }: AssetsPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
-  const [expandedTokenKey, setExpandedTokenKey] = useState<string | undefined>(undefined)
-  const { summaries, loading, error } = useTokenHoldings(activeAccount, { api })
-
-  // Keeps only one token's UTXO list open so the compact wallet panel stays scannable.
-  const toggleHoldings = (key: string): void => {
-    setExpandedTokenKey((current) => (current === key ? undefined : key))
-  }
+  const [selected, setSelected] = useState<TokenHoldingSummary | null>(null)
+  const { summaries, loading, error, refresh } = useTokenHoldings(activeAccount, { api })
 
   if (activeAccount === undefined) {
     return (
@@ -125,62 +42,32 @@ export const AssetsPanel = ({ account, api }: AssetsPanelProps): JSX.Element =>
           <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">No token holdings</p>
         </div>
       ) : (
-        <div className="flex flex-col gap-2">
-          {summaries.map((summary) => {
-            const isExpanded = expandedTokenKey === summary.key
-            const detailsId = `token-holdings-${summary.key}`
-            return (
-              <article
-                key={summary.key}
-                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">
-                      {summary.totalAmount} {summary.tokenLabel}
-                    </p>
-                    <p className="m-0 mt-1 flex flex-wrap gap-x-1 text-[0.78rem] text-muted-foreground">
-                      {summary.utxoCount === undefined ? (
-                        <span>UTXOs load on demand</span>
-                      ) : (
-                        <span>
-                          {summary.utxoCount} {summary.utxoCount === 1 ? 'UTXO' : 'UTXOs'}
-                        </span>
-                      )}
-                      {(summary.lockedCount ?? 0) > 0 ? (
-                        <>
-                          <span aria-hidden="true">·</span>
-                          <span>{summary.lockedCount} locked</span>
-                        </>
-                      ) : null}
-                    </p>
-                  </div>
-                  <SecondaryButton
-                    aria-controls={detailsId}
-                    aria-expanded={isExpanded}
-                    className="shrink-0 px-3 py-1.5 text-[0.78rem]"
-                    onClick={() => toggleHoldings(summary.key)}
-                  >
-                    {isExpanded ? 'Hide holdings' : 'Show holdings'}
-                  </SecondaryButton>
-                </div>
-                {isExpanded ? (
-                  <div
-                    id={detailsId}
-                    className="mt-3 flex flex-col gap-3 rounded-md border border-border bg-background/60 p-3"
-                  >
-                    <TokenHoldingDetails
-                      account={activeAccount}
-                      api={api}
-                      summary={summary}
-                    />
-                  </div>
-                ) : null}
-              </article>
-            )
-          })}
+        <div className="flex flex-col">
+          {summaries.map((summary) => (
+            <TokenRow
+              key={summary.key}
+              summary={summary}
+              onOpen={() => setSelected(summary)}
+            />
+          ))}
         </div>
       )}
+
+      {selected !== null && (
+        <TokenDetailSheet
+          open={selected !== null}
+          onOpenChange={(open) => {
+            if (!open) setSelected(null)
+          }}
+          account={activeAccount}
+          summary={selected}
+          holdingsApi={api}
+          sendApi={sendApi}
+          onSent={() => {
+            void refresh()
+          }}
+        />
+      )}
     </div>
   )
 }
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 2d6c7df3..0062b1f1 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
-import { type Cip56SendApi, SendTokensPanel } from '@/components/SendTokensPanel'
+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'
@@ -69,7 +69,6 @@ export const HomeTabs = ({
           ) : null}
         </TabTrigger>
         <TabTrigger value="activity">Activity</TabTrigger>
-        <TabTrigger value="send">Send</TabTrigger>
       </TabsList>
       <TabContent
         value="assets"
@@ -78,6 +77,7 @@ export const HomeTabs = ({
         <AssetsPanel
           account={account}
           api={tokensApi}
+          sendApi={sendApi}
         />
       </TabContent>
       <TabContent
@@ -98,16 +98,6 @@ export const HomeTabs = ({
       >
         <ActivityList transactions={activeTransactions} />
       </TabContent>
-      <TabContent
-        value="send"
-        className={TAB_CONTENT_CLASS}
-      >
-        <SendTokensPanel
-          account={account}
-          holdingsApi={tokensApi}
-          sendApi={sendApi}
-        />
-      </TabContent>
     </Tabs>
   )
 }
diff --git a/carpincho-wallet/src/components/SendTokensPanel.tsx b/carpincho-wallet/src/components/SendTokensPanel.tsx
deleted file mode 100644
index 220731b8..00000000
--- a/carpincho-wallet/src/components/SendTokensPanel.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import { type FormEvent, useEffect, useMemo, useState } from 'react'
-import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
-import { type CreateTokenTransferParams, createTokenTransfer } from '@/cip56/transfers'
-import { PrimaryButton } from '@/components/ui/Button'
-import { TextInput } from '@/components/ui/TextInput'
-import { toast } from '@/components/ui/toast'
-import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
-import { useTokenHoldings } from '@/hooks/useTokenHoldings'
-import type { AccountPublic } from '@/vault/types'
-import { useVault } from '@/vault/useVault'
-
-export type TransferDeadline = '1h' | '1d' | '1w' | '1m' | '1y'
-
-export interface Cip56SendApi {
-  createTokenTransfer: (params: CreateTokenTransferParams) => Promise<ExecutePreparedResponse>
-}
-
-export interface SendTokensPanelProps {
-  account?: AccountPublic
-  holdingsApi?: Cip56HoldingsApi
-  sendApi?: Cip56SendApi
-}
-
-const defaultSendApi: Cip56SendApi = {
-  createTokenTransfer,
-}
-
-const DEADLINE_OPTIONS: Array<{ value: TransferDeadline; label: string }> = [
-  { value: '1h', label: '1 hour' },
-  { value: '1d', label: '1 day' },
-  { value: '1w', label: '1 week' },
-  { value: '1m', label: '1 month' },
-  { value: '1y', label: '1 year' },
-]
-
-// Converts compact UI presets into absolute expiration timestamps for CIP-56 transfers.
-export const transferDeadlineExpiration = (deadline: TransferDeadline, now = new Date()): Date => {
-  const next = new Date(now.getTime())
-  if (deadline === '1h') {
-    next.setUTCHours(next.getUTCHours() + 1)
-    return next
-  }
-  if (deadline === '1d') {
-    next.setUTCDate(next.getUTCDate() + 1)
-    return next
-  }
-  if (deadline === '1w') {
-    next.setUTCDate(next.getUTCDate() + 7)
-    return next
-  }
-  if (deadline === '1m') {
-    next.setUTCMonth(next.getUTCMonth() + 1)
-    return next
-  }
-  next.setUTCFullYear(next.getUTCFullYear() + 1)
-  return next
-}
-
-// Renders the outgoing CIP-56 transfer form for the active Carpincho party.
-export const SendTokensPanel = ({
-  account,
-  holdingsApi,
-  sendApi = defaultSendApi,
-}: SendTokensPanelProps): JSX.Element => {
-  const vault = useVault()
-  const activeAccount = account ?? vault.primary ?? vault.accounts[0]
-  const { summaries, loading, error, refresh } = useTokenHoldings(activeAccount, {
-    api: holdingsApi,
-  })
-  const [selectedTokenKey, setSelectedTokenKey] = useState('')
-  const [recipient, setRecipient] = useState('')
-  const [amount, setAmount] = useState('')
-  const [memo, setMemo] = useState('')
-  const [deadline, setDeadline] = useState<TransferDeadline>('1h')
-  const [submitting, setSubmitting] = useState(false)
-  const [submitError, setSubmitError] = useState<string | undefined>(undefined)
-  const [submitStatus, setSubmitStatus] = useState<string | undefined>(undefined)
-
-  const selectedSummary = useMemo(
-    () => summaries.find((summary) => summary.key === selectedTokenKey) ?? summaries[0],
-    [selectedTokenKey, summaries],
-  )
-
-  // Keeps the selected token aligned with the latest holdings after polling or sending.
-  useEffect(() => {
-    if (selectedSummary !== undefined && selectedTokenKey !== selectedSummary.key) {
-      setSelectedTokenKey(selectedSummary.key)
-    }
-    if (summaries.length === 0 && selectedTokenKey !== '') {
-      setSelectedTokenKey('')
-    }
-  }, [selectedSummary, selectedTokenKey, summaries.length])
-
-  // Submits the transfer intent while Carpincho remains the signer of the prepared transaction.
-  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
-    event.preventDefault()
-    if (activeAccount === undefined) {
-      setSubmitError('No account selected')
-      return
-    }
-    if (selectedSummary?.instrumentId?.id === undefined) {
-      setSubmitError('Select a token')
-      return
-    }
-    setSubmitting(true)
-    setSubmitError(undefined)
-    setSubmitStatus(undefined)
-    try {
-      await sendApi.createTokenTransfer({
-        account: activeAccount,
-        recipient: recipient.trim(),
-        amount: amount.trim(),
-        instrumentId: selectedSummary.instrumentId,
-        ...(memo.trim() === '' ? {} : { memo: memo.trim() }),
-        expirationDate: transferDeadlineExpiration(deadline).toISOString(),
-        signMessage: vault.signMessage,
-        recordTransaction: vault.recordTransaction,
-      })
-      setRecipient('')
-      setAmount('')
-      setMemo('')
-      setSubmitStatus('Transfer submitted.')
-      toast.success('Transfer submitted.')
-      await refresh()
-    } catch (err) {
-      const message = (err as Error).message
-      setSubmitError(message)
-      toast.error(`Send failed: ${message}`)
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  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>
-    )
-  }
-
-  return (
-    <form
-      className="flex min-h-full flex-col gap-3 px-1 py-2"
-      onSubmit={(event) => {
-        void onSubmit(event)
-      }}
-    >
-      <h2 className="m-0 px-1 text-[0.95rem] font-semibold text-foreground">Send tokens</h2>
-
-      {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>
-      )}
-
-      {submitError === undefined ? null : (
-        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-          {submitError}
-        </div>
-      )}
-
-      {submitStatus === undefined ? null : (
-        <div className="rounded-md border border-primary/30 bg-primary-soft px-3 py-2 text-[0.82rem] text-primary">
-          {submitStatus}
-        </div>
-      )}
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-token"
-      >
-        Token
-        <select
-          aria-label="Token"
-          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
-          disabled={summaries.length === 0}
-          id="send-token"
-          value={selectedSummary?.key ?? ''}
-          onChange={(event) => setSelectedTokenKey(event.target.value)}
-        >
-          {summaries.map((summary) => (
-            <option
-              key={summary.key}
-              value={summary.key}
-            >
-              {summary.tokenLabel} - {summary.totalAmount}
-            </option>
-          ))}
-        </select>
-      </label>
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-recipient"
-      >
-        Recipient party
-        <TextInput
-          aria-label="Recipient party"
-          autoComplete="off"
-          id="send-recipient"
-          value={recipient}
-          onChange={(event) => setRecipient(event.target.value)}
-        />
-      </label>
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-amount"
-      >
-        Amount
-        <TextInput
-          aria-label="Amount"
-          id="send-amount"
-          inputMode="decimal"
-          value={amount}
-          onChange={(event) => setAmount(event.target.value)}
-        />
-      </label>
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-deadline"
-      >
-        Deadline
-        <select
-          aria-label="Deadline"
-          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
-          id="send-deadline"
-          value={deadline}
-          onChange={(event) => setDeadline(event.target.value as TransferDeadline)}
-        >
-          {DEADLINE_OPTIONS.map((option) => (
-            <option
-              key={option.value}
-              value={option.value}
-            >
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </label>
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-memo"
-      >
-        Memo
-        <TextInput
-          aria-label="Memo"
-          id="send-memo"
-          value={memo}
-          onChange={(event) => setMemo(event.target.value)}
-        />
-      </label>
-
-      {summaries.length === 0 && !loading ? (
-        <p className="m-0 rounded-md border border-border bg-surface px-3 py-3 text-[0.85rem] text-muted-foreground">
-          No token holdings
-        </p>
-      ) : null}
-
-      <PrimaryButton
-        className="mt-1"
-        disabled={
-          submitting ||
-          summaries.length === 0 ||
-          recipient.trim() === '' ||
-          amount.trim() === '' ||
-          selectedSummary?.instrumentId?.id === undefined
-        }
-        type="submit"
-      >
-        {submitting ? 'Sending...' : 'Send'}
-      </PrimaryButton>
-    </form>
-  )
-}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 5569dc40..64728ef2 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -68,10 +68,9 @@ describe('AssetsPanel', () => {
     })
   })
 
-  it('shows token holding totals and expands UTXO details', async () => {
-    // Scenario: the active party owns two Amulet holding UTXOs, one unlocked and one locked.
-    // The panel should show a grouped total first and expose raw holding ids on demand.
-    let detailsCalls = 0
+  it('lists each token as an activity-style row without an inline expander', async () => {
+    // Scenario: the assets tab now reads like the activity feed: an icon row per
+    // token, no per-row "Show holdings" button, and the UTXO count as a subtitle.
     const api: Cip56HoldingsApi = {
       listTokenHoldingSummaries: async (partyId) => {
         assert.equal(partyId, 'alice::party')
@@ -81,10 +80,36 @@ describe('AssetsPanel', () => {
             tokenLabel: 'Amulet',
             instrumentId: { admin: 'dso::party', id: 'Amulet' },
             totalAmount: '15.75',
-            source: 'scan',
+            utxoCount: 2,
+            lockedCount: 0,
+            unlockedCount: 2,
+            source: 'utxos',
           },
         ]
       },
+    }
+
+    renderAssets(api)
+
+    await screen.findByText('Amulet')
+    assert.equal(screen.getByText('2 UTXOs').textContent, '2 UTXOs')
+    assert.equal(screen.queryByRole('button', { name: /show holdings/i }), null)
+  })
+
+  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.
+    let detailsCalls = 0
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [
+        {
+          key: 'dso::party:Amulet',
+          tokenLabel: 'Amulet',
+          instrumentId: { admin: 'dso::party', id: 'Amulet' },
+          totalAmount: '15.75',
+          source: 'scan',
+        },
+      ],
       listTokenHoldings: async (partyId) => {
         detailsCalls += 1
         assert.equal(partyId, 'alice::party')
@@ -98,51 +123,23 @@ describe('AssetsPanel', () => {
               lock: null,
             },
           },
-          {
-            contractId: 'holding-cid-2',
-            interfaceViewValue: {
-              owner: 'alice::party',
-              amount: '3.2500000000',
-              instrumentId: { admin: 'dso::party', id: 'Amulet' },
-              lock: { holders: ['validator::party'], expiresAt: '2026-06-10T20:41:05.803Z' },
-            },
-          },
         ]
       },
     }
 
     renderAssets(api)
 
-    await screen.findByText('15.75 Amulet')
-    assert.equal(screen.getByText('UTXOs load on demand').textContent, 'UTXOs load on demand')
-    assert.equal(screen.queryByText('holding-cid-1'), null)
     assert.equal(detailsCalls, 0)
+    await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
 
-    await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
-
-    const firstHoldingCard = screen.getByText('holding-cid-1').closest('dl')
-    assert.ok(firstHoldingCard, 'holding details should be grouped in one UTXO card')
-    assert.match(
-      firstHoldingCard.getAttribute('class') ?? '',
-      /rounded-md/,
-      'each holding UTXO should read as a distinct item',
-    )
-    assert.match(
-      firstHoldingCard.getAttribute('class') ?? '',
-      /bg-surface/,
-      'each holding UTXO should be visually separated from the detail container',
-    )
-    assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
-    assert.equal(screen.getByText('holding-cid-2').textContent, 'holding-cid-2')
-    assert.equal(screen.queryByText('owner'), null)
-    assert.equal(screen.getByText('2026-06-10 20:41 UTC').textContent, '2026-06-10 20:41 UTC')
+    await screen.findByText('15.75')
+    await screen.findByText('12.5000000000')
     assert.equal(detailsCalls, 1)
   })
 
   it('reuses fallback UTXO details from the summary response', async () => {
     // Scenario: when wallet-service falls back from Scan to UTXOs, the summary
-    // already contains raw holdings. Expanding the row must not make another
-    // UTXO request for the same token.
+    // already carries raw holdings, so opening the modal must not refetch them.
     let detailsCalls = 0
     const api: Cip56HoldingsApi = {
       listTokenHoldingSummaries: async () => [
@@ -176,10 +173,21 @@ describe('AssetsPanel', () => {
 
     renderAssets(api)
 
-    await screen.findByText('15.75 Amulet')
-    await userEvent.click(screen.getByRole('button', { name: 'Show holdings' }))
+    await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
 
-    assert.equal(screen.getByText('cached-holding-cid').textContent, 'cached-holding-cid')
+    await screen.findByText('15.7500000000')
     assert.equal(detailsCalls, 0)
   })
+
+  it('shows an empty state when the party owns no tokens', async () => {
+    // Scenario: a brand-new party has no holdings; the panel says so instead of
+    // rendering an empty list.
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: async () => [],
+    }
+
+    renderAssets(api)
+
+    await screen.findByText('No token holdings')
+  })
 })
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 6ce3fd92..a3563adf 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -89,9 +89,9 @@ describe('HomeTabs navigation', () => {
     cleanup()
   })
 
-  it('renders Assets, Transfers, Activity, and Send tabs', () => {
-    // Scenario: token balances, incoming transfers, history, and sending each own a
-    // top-level tab. Assets is the default landing view.
+  it('renders Assets, Transfers, and Activity 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(
       baseVault(),
       <HomeTabs
@@ -103,13 +103,13 @@ 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: 'Send' }))
+    assert.equal(screen.queryByRole('tab', { name: 'Send' }), null)
   })
 
   it('opens the Assets tab with the current party holdings', async () => {
     // Scenario: token balances live in the Assets tab, separate from incoming
     // transfer requests. Opening Assets should mount the holdings panel for the
-    // active account and show the grouped balance.
+    // active account and show the token row.
     const holdingsApi: Cip56HoldingsApi = {
       listTokenHoldingSummaries: async () => [
         {
@@ -117,6 +117,7 @@ describe('HomeTabs navigation', () => {
           tokenLabel: 'Amulet',
           instrumentId: { admin: 'dso::party', id: 'Amulet' },
           totalAmount: '7',
+          utxoCount: 1,
           source: 'scan',
         },
       ],
@@ -133,7 +134,7 @@ describe('HomeTabs navigation', () => {
 
     await userEvent.click(screen.getByRole('tab', { name: 'Assets' }))
 
-    await screen.findByText('7 Amulet')
+    await screen.findByText('Amulet')
   })
 
   it('badges the Transfers tab when hidden incoming transfers require action', async () => {
diff --git a/carpincho-wallet/test/components/SendTokensPanel.test.tsx b/carpincho-wallet/test/components/SendTokensPanel.test.tsx
deleted file mode 100644
index 1dfb61bc..00000000
--- a/carpincho-wallet/test/components/SendTokensPanel.test.tsx
+++ /dev/null
@@ -1,126 +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 {
-  type Cip56SendApi,
-  SendTokensPanel,
-  transferDeadlineExpiration,
-} from '@/components/SendTokensPanel'
-import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
-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 self-custodial party that sends tokens.
-  id: 'account-1',
-  name: 'Alice',
-  partyId: 'alice::party',
-  publicKeyBase64: 'public-key',
-  network: 'canton:local',
-  isPrimary: true,
-  createdAt: 1,
-}
-
-// Builds the minimum unlocked vault context required by the send panel.
-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,
-    signMessage: async () => 'signature',
-    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
-    changePassword: async () => undefined,
-    verifyPassword: () => true,
-    autoLockOption: 'never',
-    setAutoLockOption: () => undefined,
-  }) as VaultContextValue
-
-// Mounts the send panel with injectable APIs so the test observes only UI intent.
-const renderSendTokens = (holdingsApi: Cip56HoldingsApi, sendApi: Cip56SendApi): void => {
-  render(
-    <TestQueryClientProvider>
-      <VaultContext.Provider value={baseVault()}>
-        <SendTokensPanel
-          holdingsApi={holdingsApi}
-          sendApi={sendApi}
-        />
-      </VaultContext.Provider>
-    </TestQueryClientProvider>,
-  )
-}
-
-describe('SendTokensPanel', () => {
-  afterEach(() => {
-    // The send panel polls holdings through a hook; cleanup stops the poller between scenarios.
-    cleanup()
-  })
-
-  it('submits a transfer for the selected token with recipient, amount, memo, and deadline', async () => {
-    // Scenario: Alice has one Amulet holding and wants to create an outgoing
-    // transfer request. The panel should derive the sender from the active
-    // account, default the deadline to 1h, and pass the selected instrument id.
-    const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
-    const holdingsApi: Cip56HoldingsApi = {
-      listTokenHoldingSummaries: async () => [
-        {
-          key: 'dso::party:Amulet',
-          tokenLabel: 'Amulet',
-          instrumentId: { admin: 'dso::party', id: 'Amulet' },
-          totalAmount: '12.5000000000',
-          source: 'scan',
-        },
-      ],
-    }
-    const sendApi: Cip56SendApi = {
-      createTokenTransfer: async (params) => {
-        sent.push(params)
-        return { updateId: 'update-transfer-1' }
-      },
-    }
-
-    renderSendTokens(holdingsApi, sendApi)
-
-    await screen.findByRole('option', { name: /Amulet/ })
-    await userEvent.type(screen.getByLabelText('Recipient party'), 'receiver::party')
-    await userEvent.type(screen.getByLabelText('Amount'), '7.5')
-    await userEvent.type(screen.getByLabelText('Memo'), 'lunch')
-    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
-
-    assert.equal(sent.length, 1)
-    assert.equal(sent[0]?.account.partyId, 'alice::party')
-    assert.equal(sent[0]?.recipient, 'receiver::party')
-    assert.equal(sent[0]?.amount, '7.5')
-    assert.deepEqual(sent[0]?.instrumentId, { admin: 'dso::party', id: 'Amulet' })
-    assert.equal(sent[0]?.memo, 'lunch')
-    assert.equal(typeof sent[0]?.expirationDate, 'string')
-    assert.equal(
-      await screen.findByText('Transfer submitted.'),
-      screen.getByText('Transfer submitted.'),
-    )
-  })
-
-  it('computes calendar deadline expirations from the selected preset', () => {
-    // Scenario: deadline options are user-facing presets, but the transfer
-    // command needs an absolute ISO timestamp. Month/year options must use
-    // calendar arithmetic instead of fixed day counts.
-    const now = new Date('2026-06-10T12:00:00.000Z')
-
-    assert.equal(transferDeadlineExpiration('1h', now).toISOString(), '2026-06-10T13:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1d', now).toISOString(), '2026-06-11T12:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1w', now).toISOString(), '2026-06-17T12:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1m', now).toISOString(), '2026-07-10T12:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1y', now).toISOString(), '2027-06-10T12:00:00.000Z')
-  })
-})

From b6d9aa8875e8688215b89833fee68c510be59381 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:28:05 -0300
Subject: [PATCH 74/98] feat(carpincho): format token amounts and refine token
 modal header

---
 .../src/components/TokenDetailSheet.tsx       | 20 +++++++++----
 .../src/components/TokenHoldingDetail.tsx     |  3 +-
 .../src/components/TransfersPanel.tsx         |  9 ++++--
 carpincho-wallet/src/utils/amount.ts          | 24 +++++++++++++++
 .../test/components/AssetsPanel.test.tsx      |  7 +++--
 .../test/components/TokenDetailSheet.test.tsx | 12 ++++----
 .../components/TokenHoldingDetail.test.tsx    |  2 +-
 .../test/components/TransfersPanel.test.tsx   |  4 +--
 carpincho-wallet/test/utils/amount.test.ts    | 29 +++++++++++++++++++
 9 files changed, 90 insertions(+), 20 deletions(-)
 create mode 100644 carpincho-wallet/src/utils/amount.ts
 create mode 100644 carpincho-wallet/test/utils/amount.test.ts

diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index eb34a288..bbbd73e3 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import cantonIcon from '@/assets/canton.png'
 import type { TokenHolding, TokenHoldingSummary } from '@/cip56/holdings'
 import { type Cip56SendApi, SendTokenForm } from '@/components/SendTokenForm'
 import { TokenHoldingDetail } from '@/components/TokenHoldingDetail'
@@ -8,6 +9,7 @@ import { CHEVRON_RIGHT_ICON, RECEIVE_ICON, SEND_ICON } from '@/components/ui/ico
 import { Sheet } from '@/components/ui/Sheet'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { formatTokenAmount } from '@/utils/amount'
 import type { AccountPublic } from '@/vault/types'
 
 type Screen = 'detail' | 'send' | 'receive' | 'holding'
@@ -60,8 +62,8 @@ const HoldingListRow = ({
           Amount
         </span>
         <span className="flex items-center gap-2">
-          <span className="min-w-0 truncate font-mono text-[0.9rem] text-foreground">
-            {view?.amount ?? 'unknown'}
+          <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">
@@ -91,11 +93,18 @@ const DetailScreen = ({
   onOpenHolding,
 }: DetailScreenProps): JSX.Element => (
   <div className="flex flex-col gap-5">
-    <div className="flex flex-col items-center gap-1 text-center">
+    <div className="flex flex-col items-center gap-1.5 text-center">
       <span className="break-all font-display text-3xl font-bold tracking-tight text-foreground">
-        {summary.totalAmount}
+        {formatTokenAmount(summary.totalAmount)}
       </span>
-      <span className="text-[0.9rem] font-semibold text-muted-foreground">
+      <span className="flex items-center gap-1.5 text-[0.9rem] font-semibold text-muted-foreground">
+        <img
+          src={cantonIcon}
+          alt=""
+          aria-hidden="true"
+          draggable={false}
+          className="size-4 rounded-full"
+        />
         {summary.tokenLabel}
       </span>
     </div>
@@ -212,6 +221,7 @@ export const TokenDetailSheet = ({
       onOpenChange={handleOpenChange}
       title={title}
       description={`${summary.tokenLabel} token details`}
+      hideTitle={screen === 'detail'}
       onBack={screen === 'detail' ? undefined : goBack}
       side="center"
     >
diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
index 5a9bef5b..ba3470ee 100644
--- a/carpincho-wallet/src/components/TokenHoldingDetail.tsx
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -1,5 +1,6 @@
 import type { TokenHolding } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
+import { formatTokenAmount } from '@/utils/amount'
 
 interface HoldingDetailRowProps {
   label: string
@@ -22,7 +23,7 @@ export const TokenHoldingDetail = ({ holding }: { holding: TokenHolding }): JSX.
     <dl className="grid gap-3 rounded-md border border-border bg-surface px-3 py-3">
       <HoldingDetailRow
         label="amount"
-        value={view?.amount ?? 'unknown'}
+        value={view?.amount === undefined ? 'unknown' : formatTokenAmount(view.amount)}
       />
       <HoldingDetailRow
         label="lock"
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 4357d3e0..f03eb6e8 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -14,6 +14,7 @@ import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
 import { shortMiddle } from '@/utils/account'
+import { formatTokenAmount } from '@/utils/amount'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
@@ -182,9 +183,11 @@ export const TransfersPanel = ({
         <div className="flex flex-col gap-2">
           {transfers.map((transfer) => {
             const transferView = transfer.interfaceViewValue?.transfer
-            const label = `${transferView?.amount ?? 'unknown'} ${tokenDisplayLabel(
-              transferView?.instrumentId,
-            )}`
+            const label = `${
+              transferView?.amount === undefined
+                ? 'unknown'
+                : formatTokenAmount(transferView.amount)
+            } ${tokenDisplayLabel(transferView?.instrumentId)}`
             const description = transferDescription(transfer)
             const isAccepting = acceptingCid === transfer.contractId
             const isExpanded = expandedCid === transfer.contractId
diff --git a/carpincho-wallet/src/utils/amount.ts b/carpincho-wallet/src/utils/amount.ts
new file mode 100644
index 00000000..aba02ec0
--- /dev/null
+++ b/carpincho-wallet/src/utils/amount.ts
@@ -0,0 +1,24 @@
+// Groups an integer string with comma thousands separators.
+const groupThousands = (whole: string): string => whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+
+// Formats a decimal token amount for display: two decimals, half-up rounding, and
+// comma-grouped thousands. Falls back to the raw string for non-numeric values so
+// labels like "unknown" pass through untouched. BigInt keeps precision past Number range.
+export const formatTokenAmount = (value: string): string => {
+  const trimmed = value.trim()
+  if (!/^\d+(\.\d+)?$/.test(trimmed)) {
+    return value
+  }
+  const [whole, fraction = ''] = trimmed.split('.')
+  let cents = Number.parseInt(`${fraction}00`.slice(0, 2), 10)
+  let wholeValue = BigInt(whole)
+  // Round half up using the first dropped digit.
+  if ((fraction[2] ?? '0') >= '5') {
+    cents += 1
+    if (cents === 100) {
+      cents = 0
+      wholeValue += 1n
+    }
+  }
+  return `${groupThousands(wholeValue.toString())}.${cents.toString().padStart(2, '0')}`
+}
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index 64728ef2..d3e5015c 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -133,7 +133,7 @@ describe('AssetsPanel', () => {
     await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
 
     await screen.findByText('15.75')
-    await screen.findByText('12.5000000000')
+    await screen.findByText('12.50')
     assert.equal(detailsCalls, 1)
   })
 
@@ -175,7 +175,10 @@ describe('AssetsPanel', () => {
 
     await userEvent.click(await screen.findByRole('button', { name: /Amulet/ }))
 
-    await screen.findByText('15.7500000000')
+    // 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.
+    const matches = await screen.findAllByText('15.75')
+    assert.ok(matches.length >= 2)
     assert.equal(detailsCalls, 0)
   })
 
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index 3683db3b..9fc9015e 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -99,9 +99,9 @@ describe('TokenDetailSheet', () => {
     // total in big type and each holding listed below.
     renderSheet()
 
-    assert.equal(screen.getByText('9997').textContent, '9997')
-    assert.ok(screen.getByText('9000.0000000000'))
-    assert.ok(screen.getByText('997.0000000000'))
+    assert.equal(screen.getByText('9,997.00').textContent, '9,997.00')
+    assert.ok(screen.getByText('9,000.00'))
+    assert.ok(screen.getByText('997.00'))
   })
 
   it('opens only one dialog at a time across screens', async () => {
@@ -124,7 +124,7 @@ describe('TokenDetailSheet', () => {
     assert.equal(screen.queryByLabelText('Token'), null)
 
     await userEvent.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByText('9000.0000000000'))
+    assert.ok(screen.getByText('9,000.00'))
   })
 
   it('navigates to the receive screen showing the party QR and id', async () => {
@@ -143,10 +143,10 @@ describe('TokenDetailSheet', () => {
     // Scenario: each holding row drills into the full UTXO detail (contract id, lock).
     renderSheet()
 
-    await userEvent.click(screen.getByRole('button', { name: /9000\.0000000000/ }))
+    await userEvent.click(screen.getByRole('button', { name: /9,000\.00/ }))
     assert.equal(screen.getByText('holding-cid-1').textContent, 'holding-cid-1')
 
     await userEvent.click(screen.getByRole('button', { name: /back/i }))
-    assert.ok(screen.getByText('997.0000000000'))
+    assert.ok(screen.getByText('997.00'))
   })
 })
diff --git a/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
index ac15e8be..57c3726e 100644
--- a/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
+++ b/carpincho-wallet/test/components/TokenHoldingDetail.test.tsx
@@ -34,7 +34,7 @@ describe('TokenHoldingDetail', () => {
     // unlocked holding has no expiry row.
     render(<TokenHoldingDetail holding={UNLOCKED} />)
 
-    assert.equal(screen.getByText('12.5000000000').textContent, '12.5000000000')
+    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)
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 75b7a602..8c4f272b 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -103,7 +103,7 @@ describe('TransfersPanel', () => {
     renderTransfers(api)
 
     await screen.findByText('Incoming transfers')
-    await screen.findByText('42 Amulet')
+    await screen.findByText('42.00 Amulet')
     await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
     await waitFor(() => assert.ok(screen.getByText('No pending transfers')))
 
@@ -143,7 +143,7 @@ describe('TransfersPanel', () => {
 
     renderTransfers(api)
 
-    await screen.findByText('666.0000000000 Amulet')
+    await screen.findByText('666.00 Amulet')
     assert.equal(screen.getByText('invoice 42').textContent, 'invoice 42')
     assert.equal(screen.queryByText('transfer-cid-1'), null)
 
diff --git a/carpincho-wallet/test/utils/amount.test.ts b/carpincho-wallet/test/utils/amount.test.ts
new file mode 100644
index 00000000..12a38f78
--- /dev/null
+++ b/carpincho-wallet/test/utils/amount.test.ts
@@ -0,0 +1,29 @@
+import { strict as assert } from 'node:assert'
+import { describe, it } from 'node:test'
+import { formatTokenAmount } from '@/utils/amount'
+
+describe('formatTokenAmount', () => {
+  it('pads to two decimals and groups thousands', () => {
+    assert.equal(formatTokenAmount('9997'), '9,997.00')
+    assert.equal(formatTokenAmount('15.75'), '15.75')
+    assert.equal(formatTokenAmount('2.0000000000'), '2.00')
+    assert.equal(formatTokenAmount('9995.0000000000'), '9,995.00')
+    assert.equal(formatTokenAmount('1234567.891'), '1,234,567.89')
+  })
+
+  it('rounds half up to two decimals, carrying into the whole part', () => {
+    assert.equal(formatTokenAmount('0.004'), '0.00')
+    assert.equal(formatTokenAmount('0.005'), '0.01')
+    assert.equal(formatTokenAmount('1.999'), '2.00')
+    assert.equal(formatTokenAmount('999.999'), '1,000.00')
+  })
+
+  it('keeps precision for amounts beyond Number range', () => {
+    assert.equal(formatTokenAmount('12345678901234567890.5'), '12,345,678,901,234,567,890.50')
+  })
+
+  it('returns the raw value when it is not a positive decimal', () => {
+    assert.equal(formatTokenAmount('unknown'), 'unknown')
+    assert.equal(formatTokenAmount(''), '')
+  })
+})

From 57410a9ce397ffb35664fbfdaab6f9aa2a95b953 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:38:48 -0300
Subject: [PATCH 75/98] fix(carpincho): focus new modal screen and drop
 redundant send banner

---
 carpincho-wallet/src/components/SendTokenForm.tsx |  9 ---------
 .../src/components/TokenDetailSheet.tsx           | 15 ++++++++++++++-
 .../test/components/SendTokenForm.test.tsx        |  4 ++--
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
index b2509305..24baea61 100644
--- a/carpincho-wallet/src/components/SendTokenForm.tsx
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -71,7 +71,6 @@ export const SendTokenForm = ({
   const [deadline, setDeadline] = useState<TransferDeadline>('1h')
   const [submitting, setSubmitting] = useState(false)
   const [submitError, setSubmitError] = useState<string | undefined>(undefined)
-  const [submitStatus, setSubmitStatus] = useState<string | undefined>(undefined)
 
   // Submits the transfer intent while Carpincho remains the signer of the prepared transaction.
   const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
@@ -82,7 +81,6 @@ export const SendTokenForm = ({
     }
     setSubmitting(true)
     setSubmitError(undefined)
-    setSubmitStatus(undefined)
     try {
       await sendApi.createTokenTransfer({
         account,
@@ -97,7 +95,6 @@ export const SendTokenForm = ({
       setRecipient('')
       setAmount('')
       setMemo('')
-      setSubmitStatus('Transfer submitted.')
       toast.success('Transfer submitted.')
       onSent?.()
     } catch (err) {
@@ -122,12 +119,6 @@ export const SendTokenForm = ({
         </div>
       )}
 
-      {submitStatus === undefined ? null : (
-        <div className="rounded-md border border-primary/30 bg-primary-soft px-3 py-2 text-[0.82rem] text-primary">
-          {submitStatus}
-        </div>
-      )}
-
       <label
         className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
         htmlFor="send-recipient"
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index bbbd73e3..e592ea21 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import cantonIcon from '@/assets/canton.png'
 import type { TokenHolding, TokenHoldingSummary } from '@/cip56/holdings'
 import { type Cip56SendApi, SendTokenForm } from '@/components/SendTokenForm'
@@ -158,6 +158,18 @@ export const TokenDetailSheet = ({
   const [screen, setScreen] = useState<Screen>('detail')
   const [activeHolding, setActiveHolding] = useState<TokenHolding | null>(null)
   const [direction, setDirection] = useState<'forward' | 'back'>('forward')
+  const screenRef = useRef<HTMLDivElement>(null)
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-run on every screen change to refocus the new view.
+  useEffect(() => {
+    if (!open) return
+    const root = screenRef.current
+    if (root === null) return
+    const target = root.querySelector<HTMLElement>(
+      'button, [href], input, [tabindex]:not([tabindex="-1"])',
+    )
+    target?.focus()
+  }, [open, screen])
 
   const detailsApi =
     holdingsApi?.listTokenHoldings === undefined
@@ -227,6 +239,7 @@ export const TokenDetailSheet = ({
     >
       <div
         key={screen}
+        ref={screenRef}
         className={animationClass}
       >
         {screen === 'detail' && (
diff --git a/carpincho-wallet/test/components/SendTokenForm.test.tsx b/carpincho-wallet/test/components/SendTokenForm.test.tsx
index 4bb388d9..223e0eae 100644
--- a/carpincho-wallet/test/components/SendTokenForm.test.tsx
+++ b/carpincho-wallet/test/components/SendTokenForm.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 { TokenHoldingSummary } from '@/cip56/holdings'
 import {
@@ -94,7 +94,7 @@ describe('SendTokenForm', () => {
     await userEvent.type(screen.getByLabelText('Memo'), 'lunch')
     await userEvent.click(screen.getByRole('button', { name: 'Send' }))
 
-    await screen.findByText('Transfer submitted.')
+    await waitFor(() => assert.equal(sentCount, 1))
     assert.equal(sent.length, 1)
     assert.equal(sent[0]?.account.partyId, 'alice::party')
     assert.equal(sent[0]?.recipient, 'receiver::party')

From ab6d18d4a0108c4b8ab84f486f37e836affb99bb Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:44:27 -0300
Subject: [PATCH 76/98] refactor(carpincho): move amount formatter to cip56 and
 flatten modal back-nav

---
 carpincho-wallet/src/{utils => cip56}/amount.ts   |  4 +++-
 .../src/components/TokenDetailSheet.tsx           | 15 ++++-----------
 .../src/components/TokenHoldingDetail.tsx         |  2 +-
 .../src/components/TransfersPanel.tsx             |  2 +-
 .../test/{utils => cip56}/amount.test.ts          |  2 +-
 5 files changed, 10 insertions(+), 15 deletions(-)
 rename carpincho-wallet/src/{utils => cip56}/amount.ts (92%)
 rename carpincho-wallet/test/{utils => cip56}/amount.test.ts (95%)

diff --git a/carpincho-wallet/src/utils/amount.ts b/carpincho-wallet/src/cip56/amount.ts
similarity index 92%
rename from carpincho-wallet/src/utils/amount.ts
rename to carpincho-wallet/src/cip56/amount.ts
index aba02ec0..58d11e1b 100644
--- a/carpincho-wallet/src/utils/amount.ts
+++ b/carpincho-wallet/src/cip56/amount.ts
@@ -1,12 +1,14 @@
 // Groups an integer string with comma thousands separators.
 const groupThousands = (whole: string): string => whole.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 
+const DECIMAL_RE = /^\d+(\.\d+)?$/
+
 // Formats a decimal token amount for display: two decimals, half-up rounding, and
 // comma-grouped thousands. Falls back to the raw string for non-numeric values so
 // labels like "unknown" pass through untouched. BigInt keeps precision past Number range.
 export const formatTokenAmount = (value: string): string => {
   const trimmed = value.trim()
-  if (!/^\d+(\.\d+)?$/.test(trimmed)) {
+  if (!DECIMAL_RE.test(trimmed)) {
     return value
   }
   const [whole, fraction = ''] = trimmed.split('.')
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index e592ea21..c57defa1 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import cantonIcon from '@/assets/canton.png'
+import { formatTokenAmount } from '@/cip56/amount'
 import type { TokenHolding, TokenHoldingSummary } from '@/cip56/holdings'
 import { type Cip56SendApi, SendTokenForm } from '@/components/SendTokenForm'
 import { TokenHoldingDetail } from '@/components/TokenHoldingDetail'
@@ -9,18 +10,10 @@ import { CHEVRON_RIGHT_ICON, RECEIVE_ICON, SEND_ICON } from '@/components/ui/ico
 import { Sheet } from '@/components/ui/Sheet'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
-import { formatTokenAmount } from '@/utils/amount'
 import type { AccountPublic } from '@/vault/types'
 
 type Screen = 'detail' | 'send' | 'receive' | 'holding'
 
-const PARENT: Record<Screen, Screen | null> = {
-  detail: null,
-  send: 'detail',
-  receive: 'detail',
-  holding: 'detail',
-}
-
 export interface TokenDetailSheetProps {
   open: boolean
   onOpenChange: (open: boolean) => void
@@ -194,14 +187,14 @@ export const TokenDetailSheet = ({
     setScreen(next)
   }
 
+  // The screen hierarchy is flat: every non-detail screen returns to detail.
   const goBack = (): void => {
-    const parent = PARENT[screen]
-    if (parent === null) {
+    if (screen === 'detail') {
       handleOpenChange(false)
       return
     }
     setDirection('back')
-    setScreen(parent)
+    setScreen('detail')
   }
 
   const openHolding = (holding: TokenHolding): void => {
diff --git a/carpincho-wallet/src/components/TokenHoldingDetail.tsx b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
index ba3470ee..b1ec4d83 100644
--- a/carpincho-wallet/src/components/TokenHoldingDetail.tsx
+++ b/carpincho-wallet/src/components/TokenHoldingDetail.tsx
@@ -1,6 +1,6 @@
+import { formatTokenAmount } from '@/cip56/amount'
 import type { TokenHolding } from '@/cip56/holdings'
 import { transferTimeLabel } from '@/cip56/transfers'
-import { formatTokenAmount } from '@/utils/amount'
 
 interface HoldingDetailRowProps {
   label: string
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index f03eb6e8..ceb9e042 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import { formatTokenAmount } from '@/cip56/amount'
 import {
   tokenDisplayLabel,
   transferDescription,
@@ -14,7 +15,6 @@ import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
 import { shortMiddle } from '@/utils/account'
-import { formatTokenAmount } from '@/utils/amount'
 import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
diff --git a/carpincho-wallet/test/utils/amount.test.ts b/carpincho-wallet/test/cip56/amount.test.ts
similarity index 95%
rename from carpincho-wallet/test/utils/amount.test.ts
rename to carpincho-wallet/test/cip56/amount.test.ts
index 12a38f78..43653b86 100644
--- a/carpincho-wallet/test/utils/amount.test.ts
+++ b/carpincho-wallet/test/cip56/amount.test.ts
@@ -1,6 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { describe, it } from 'node:test'
-import { formatTokenAmount } from '@/utils/amount'
+import { formatTokenAmount } from '@/cip56/amount'
 
 describe('formatTokenAmount', () => {
   it('pads to two decimals and groups thousands', () => {

From 5f9a3420c0e51fd4bd778b52055ab017c33e9f65 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:49:26 -0300
Subject: [PATCH 77/98] docs(carpincho): sync token modal redesign in
 architecture and AGENTS

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

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index 9aa5691e..cd684e6c 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-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`, `RECEIPT_ICON`, `TRASH_ICON`, `WALLET_CONNECT_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, 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 four tabs, in order: `AssetsPanel` (token balances/holdings), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus incoming CIP-56 transfers awaiting receiver acceptance), `ActivityList` (executed transactions as MetaMask-style rows grouped by day, each opening a centered detail `Sheet`), and `SendTokensPanel` (the token transfer form); Assets is the default landing tab. The Transfers tab is force-mounted so its React Query polling continues while hidden and shows a pending-incoming-transfer count badge. 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`. 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-dialog`, `@radix-ui/react-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`); 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 uses `SendTokenForm` with the token preset and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus incoming CIP-56 transfers awaiting receiver acceptance), 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 pending-incoming-transfer count badge. 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`. 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, incoming 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 eeeb2279..36ea0ead 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -30,8 +30,9 @@ src/
   assets/           SVG brand assets (carpincho-logo.svg)
   components/       Shared UI components (Logo, Header, WelcomeHero, AccountCard,
                     AccountRow, AccountListRow, AccountsDialog, CopyPartyIdButton,
-                    ActivityList, HomeTabs, TokensPanel, SendTokensPanel,
-                    IncomingTransfersSection, ConnectionFooter,
+                    ActivityList, HomeTabs, AssetsPanel, TransfersPanel,
+                    TokenRow, TokenDetailSheet, TokenReceive, TokenHoldingDetail,
+                    SendTokenForm, ConnectionFooter,
                     NewPasswordFields, CreateAccountForm, PasswordStrengthIndicator,
                     SecurityPanel, menu/* drawer, ui/* primitives).
                     ui/* wraps Radix headless primitives (Tabs on top of
@@ -41,7 +42,7 @@ src/
                     PendingActionCard).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
-  cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers,
+  cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,
                     and Amulet preapproval; calls wallet-service cip56.* / amulet.* RPC
   hooks/            React Query wrappers over cip56/ (token holdings, incoming transfers,
                     Amulet preapproval) with polling and imperative refetch
@@ -122,7 +123,7 @@ Token balances, transfers, and Amulet auto-accept are layered on top of the wall
 - **`cip56/transfers.ts`** — `listPendingIncomingTransfers` reads pending CIP-56 transfers; `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 row expands; `useAmuletPreapproval` polls status and exposes `enable()` / `disable()`. `TokensPanel`, `SendTokensPanel`, and `IncomingTransfersSection` 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`, `TokenDetailSheet`, and `TransfersPanel` consume these hooks.
 
 ### Data Access Layer
 

From 38853c6d906fdbb84cc3e9059325146ef16ca1ba Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 15:57:42 -0300
Subject: [PATCH 78/98] feat(carpincho): use boring-avatars for account avatars

---
 carpincho-wallet/package.json                 |  1 +
 .../src/components/AccountRow.tsx             |  1 -
 .../src/components/ui/AccountAvatar.tsx       | 29 ++++++++++++-------
 carpincho-wallet/src/utils/account.ts         | 28 ------------------
 package-lock.json                             | 11 +++++++
 5 files changed, 30 insertions(+), 40 deletions(-)

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index 37a64c48..b303ec29 100644
--- a/carpincho-wallet/package.json
+++ b/carpincho-wallet/package.json
@@ -32,6 +32,7 @@
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
+    "boring-avatars": "^2.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-qr-code": "^2.2.0"
diff --git a/carpincho-wallet/src/components/AccountRow.tsx b/carpincho-wallet/src/components/AccountRow.tsx
index ffe5ead4..c8adc7f1 100644
--- a/carpincho-wallet/src/components/AccountRow.tsx
+++ b/carpincho-wallet/src/components/AccountRow.tsx
@@ -21,7 +21,6 @@ export const AccountRow = ({
 }: AccountRowProps): JSX.Element => (
   <div className="flex min-w-0 flex-1 items-center gap-2">
     <AccountAvatar
-      name={account.name}
       partyId={account.partyId}
       size={avatarSize}
     />
diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index e534b242..adf415d2 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -1,25 +1,32 @@
-import { avatarStyle, initials } from '@/utils/account'
+import Avatar from 'boring-avatars'
 import { cn } from '@/utils/cn'
 
 interface AccountAvatarProps {
-  name: string
   partyId: string
   size?: 'sm' | 'md'
 }
 
+const SIZE_PX: Record<NonNullable<AccountAvatarProps['size']>, number> = {
+  sm: 24,
+  md: 40,
+}
+
 const SIZE_CLASS: Record<NonNullable<AccountAvatarProps['size']>, string> = {
-  sm: 'size-6 text-[0.6rem]',
-  md: 'size-10 text-[0.82rem]',
+  sm: 'size-6',
+  md: 'size-10',
 }
 
-export const AccountAvatar = ({ name, partyId, size = 'md' }: AccountAvatarProps): JSX.Element => (
+const AVATAR_COLORS = ['#692581', '#a563bf', '#c670e5', '#e71d73', '#7d2d99']
+
+export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX.Element => (
   <span
-    className={cn(
-      'shrink-0 grid place-items-center rounded-md text-white font-mono font-bold tracking-[0.05em] ring-1 ring-black/10 shadow-[inset_0_1px_0_rgba(255,255,255,0.12)]',
-      SIZE_CLASS[size],
-    )}
-    style={avatarStyle(partyId)}
+    className={cn('shrink-0 overflow-hidden rounded-full ring-1 ring-black/10', SIZE_CLASS[size])}
   >
-    {initials(name)}
+    <Avatar
+      name={partyId}
+      size={SIZE_PX[size]}
+      variant="marble"
+      colors={AVATAR_COLORS}
+    />
   </span>
 )
diff --git a/carpincho-wallet/src/utils/account.ts b/carpincho-wallet/src/utils/account.ts
index 88d272aa..e9bee165 100644
--- a/carpincho-wallet/src/utils/account.ts
+++ b/carpincho-wallet/src/utils/account.ts
@@ -1,4 +1,3 @@
-import type { CSSProperties } from 'react'
 import type { AccountPublic } from '@/vault/types'
 
 export const shortMiddle = (value: string, head = 10, tail = 6): string => {
@@ -8,33 +7,6 @@ export const shortMiddle = (value: string, head = 10, tail = 6): string => {
   return `${value.slice(0, head)}...${value.slice(-tail)}`
 }
 
-const hashString = (value: string): number => {
-  let hash = 0
-  for (let i = 0; i < value.length; i++) {
-    hash = (hash * 31 + value.charCodeAt(i)) >>> 0
-  }
-  return hash
-}
-
-const AVATAR_PAIRS = [
-  ['#692581', '#a563bf'],
-  ['#7d2d99', '#c670e5'],
-  ['#b5613a', '#d18a5e'],
-  ['#4d4458', '#9a8ea4'],
-  ['#3d1349', '#7d2d99'],
-  ['#c670e5', '#692581'],
-] as const
-
-export const avatarStyle = (partyId: string): CSSProperties => {
-  const hash = hashString(partyId)
-  const pair = AVATAR_PAIRS[hash % AVATAR_PAIRS.length]
-  return {
-    background: `linear-gradient(135deg, ${pair[0]} 0%, ${pair[1]} 100%)`,
-  }
-}
-
-export const initials = (name: string): string => name.slice(0, 2).toUpperCase()
-
 export const sortAccounts = (accounts: AccountPublic[]): AccountPublic[] =>
   [...accounts].sort((a, b) =>
     a.isPrimary === b.isPrimary ? a.createdAt - b.createdAt : a.isPrimary ? -1 : 1,
diff --git a/package-lock.json b/package-lock.json
index 89584f43..bba71d21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -124,6 +124,7 @@
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
+        "boring-avatars": "^2.0.4",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-qr-code": "^2.2.0"
@@ -6648,6 +6649,16 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/boring-avatars": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/boring-avatars/-/boring-avatars-2.0.4.tgz",
+      "integrity": "sha512-xhZO/w/6aFmRfkaWohcl2NfyIy87gK5SBbys8kctZeTGF1Apjpv/10pfUuv+YEfVPkESU/h2Y6tt/Dwp+bIZPw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.28.2",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",

From 91563bd24d80674d92ba1b3cf2b73e8ab8d4f931 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:01:40 -0300
Subject: [PATCH 79/98] feat(carpincho): switch account avatars to abstract
 variant

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

diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index adf415d2..6a66e093 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -25,7 +25,7 @@ export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX
     <Avatar
       name={partyId}
       size={SIZE_PX[size]}
-      variant="marble"
+      variant="abstract"
       colors={AVATAR_COLORS}
     />
   </span>

From 201258bc429480831dd085a1f0b8b96fb055335d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:11:03 -0300
Subject: [PATCH 80/98] feat(carpincho): use beam face avatars with a multi-hue
 palette

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

diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index 6a66e093..3c1d3c04 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -16,7 +16,7 @@ const SIZE_CLASS: Record<NonNullable<AccountAvatarProps['size']>, string> = {
   md: 'size-10',
 }
 
-const AVATAR_COLORS = ['#692581', '#a563bf', '#c670e5', '#e71d73', '#7d2d99']
+const AVATAR_COLORS = ['#692581', '#e71d73', '#f7b32b', '#2d9d92', '#3a86ff']
 
 export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX.Element => (
   <span
@@ -25,7 +25,7 @@ export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX
     <Avatar
       name={partyId}
       size={SIZE_PX[size]}
-      variant="abstract"
+      variant="beam"
       colors={AVATAR_COLORS}
     />
   </span>

From 3472823ea83e3993d375549b6b6dadaca94c4cf8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:11:53 -0300
Subject: [PATCH 81/98] chore(carpincho): add radix select dep and contacts
 icon

---
 carpincho-wallet/package.json                |   1 +
 carpincho-wallet/src/components/ui/icons.tsx |  23 +
 package-lock.json                            | 506 +++++++++++++++++++
 3 files changed, 530 insertions(+)

diff --git a/carpincho-wallet/package.json b/carpincho-wallet/package.json
index b303ec29..386d8153 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-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.3.0",
     "@radix-ui/react-switch": "^1.3.0",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-toast": "^1.2.15",
diff --git a/carpincho-wallet/src/components/ui/icons.tsx b/carpincho-wallet/src/components/ui/icons.tsx
index 43b8bcfa..f7aaf804 100644
--- a/carpincho-wallet/src/components/ui/icons.tsx
+++ b/carpincho-wallet/src/components/ui/icons.tsx
@@ -468,6 +468,29 @@ export const TRASH_ICON = (
   </svg>
 )
 
+export const CONTACTS_ICON = (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+    <circle
+      cx="9"
+      cy="7"
+      r="4"
+    />
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+  </svg>
+)
+
 // Official WalletConnect logo mark, in brand blue.
 export const WALLET_CONNECT_ICON = (
   <svg
diff --git a/package-lock.json b/package-lock.json
index bba71d21..589c4c9c 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-dialog": "^1.1.15",
+        "@radix-ui/react-select": "^2.3.0",
         "@radix-ui/react-switch": "^1.3.0",
         "@radix-ui/react-tabs": "^1.1.13",
         "@radix-ui/react-toast": "^1.2.15",
@@ -3238,6 +3239,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.2.tgz",
+      "integrity": "sha512-ceTwaxc4I5IOi97DgCotl3pqiyRGvffcc0oOsE2dQYaJOFIDsDt4VWG6xEbg1QePv9QWausCEIppud/tJ1wNig==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
@@ -3593,6 +3600,505 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.3.0.tgz",
+      "integrity": "sha512-mENc7WpJvJcW8hlMpzfFcHcEhTvYS5JMBmi9HVC1Q00uhBwML086MHYUV8QQdQv6lcu0Wg8dzd1RB8AFADcG/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.2",
+        "@radix-ui/primitive": "1.1.4",
+        "@radix-ui/react-collection": "1.1.9",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-direction": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.12",
+        "@radix-ui/react-focus-guards": "1.1.4",
+        "@radix-ui/react-focus-scope": "1.1.9",
+        "@radix-ui/react-id": "1.1.2",
+        "@radix-ui/react-popper": "1.3.0",
+        "@radix-ui/react-portal": "1.1.11",
+        "@radix-ui/react-presence": "1.1.6",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-slot": "1.2.5",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.2.3",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-previous": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.2.5",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.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-select/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-select/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.9.tgz",
+      "integrity": "sha512-yqHW5WQ/cTpU/un7dqqIKNy2iRU8BC0JB78PEzTfCCYvZu1U6W9KwObAniMk9nhSfyotKPQTYaUD/HB0f5muig==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.5"
+      },
+      "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-select/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.9.tgz",
+      "integrity": "sha512-zuSVi7ziP7uQRqc+yGxsKJfNkdyHv3ZKDaHe0gzg4dRgws96TPKWIiz84tVHP4GEcEl8bC0mdt17NkcxaJHmaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-slot": "1.2.5"
+      },
+      "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-select/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-select/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-select/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.2.tgz",
+      "integrity": "sha512-C3vFhbyi4SW3PmbAi6Awpu4OzJtd0MxGurvSsYtr7p7nM8RNB3VAF3CUmnp2j50knpkrRcB7+ycVXzgLgF6yNA==",
+      "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-select/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.12.tgz",
+      "integrity": "sha512-MhoruH6xEzsbvOmo4TNgMfmtvRGyDZw4MDSdf4ybMHfezjqwzv6hyd4lsMzBp8K9Sn6sGzCF62x1I7BYUECXOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.4",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-escape-keydown": "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-select/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.4.tgz",
+      "integrity": "sha512-cot/aB/mOm0IYVYTTmQcEEK1M48lZWi8FlYe5nDPQQ8NYZUlXEFgncJ9p2Kzer3RKSrY7cTTpEMLZKNo9QoP5Q==",
+      "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-select/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.9.tgz",
+      "integrity": "sha512-9Se8t+Zry+1rEOL7Y6l/4ANYU/TOtAtf8O2fKdwLltcaMcm6kOqYGbzO4tMFQ0bvzO920pRAoHpFZ4W85S3keQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-use-callback-ref": "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-select/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-select/node_modules/@radix-ui/react-popper": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.3.0.tgz",
+      "integrity": "sha512-9PB589e1aWZbrlFUHdz6WiPCL+xLZHQFX7oibqG/6Q0SwOkxDyQX9W/cyPa+sAPPKuC8cpLCpRczE5a/1DiwVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.9",
+        "@radix-ui/react-compose-refs": "1.1.3",
+        "@radix-ui/react-context": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.5",
+        "@radix-ui/react-use-callback-ref": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.2",
+        "@radix-ui/react-use-rect": "1.1.2",
+        "@radix-ui/react-use-size": "1.1.2",
+        "@radix-ui/rect": "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-select/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.11.tgz",
+      "integrity": "sha512-UEytdjgEh2tJGgD/gZK4FUx6t1rNIlM3U0DENhSrG7I75FGm1DnaDuVUWF1pWAWUwGmn1sCJ1VGHn8LhN1aTOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.5",
+        "@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-select/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-select/node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.5.tgz",
+      "integrity": "sha512-zifXeB8Y88qCYx8PLZ5oQb32KwZub+s925mMoZsBBq9KUQqWKkREubTfs6ASjRPPBe7Jt9O8OHH89+95VG+grA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.5"
+      },
+      "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-select/node_modules/@radix-ui/react-slot": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.5.tgz",
+      "integrity": "sha512-rCMO3QsIVKv5JTY5CVbo2MvO77SpEqqYc8AvRE7OWqRDOIqAKjsp+DrmnY9uc8NPdxB5E2z47HTYGeE2+NTptg==",
+      "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-select/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-select/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-select/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-select/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.2.tgz",
+      "integrity": "sha512-2uVLvLjgO7NZCWw01/FdqRwmA42J0BcjPMUCA+koFEOAb+zjqIP7SiFz/7zWPrKnVmSqr76Omq2ALyCuX4dhLw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "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-select/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-select/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.2.tgz",
+      "integrity": "sha512-d8a+bBY/FxikNPlgJJoaBHZX+zKVbWHYJGTLnLvveQgFSTntkGdEKv3JDtHrMS0DNYpllz2nRsTLGLKYttbpmw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "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-select/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.2.tgz",
+      "integrity": "sha512-giWQp+4mxjBPt4KZ0MmyuykFNWfbDxKt4x+fPkRYmgRFJSbCZFzUglvMb/Kjn38tm10YP4ufiQZDx3zna4LU6w==",
+      "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-select/node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.5.tgz",
+      "integrity": "sha512-tPcHNI3FajdDBFpl/Ez1m2WL0ufJqBKyHxMDBvKitopamK36WwBGOMicuMEZKkM5Wce41QxUyv6BsiqfrWBiGg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.5"
+      },
+      "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-select/node_modules/@radix-ui/rect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.2.tgz",
+      "integrity": "sha512-xnXE7wG13PI+cxieVssYXlQJuYVRhH9NBoxt3KNwzghDIA69GMm7d4wXRouHIYjE+KvS6U/MsMO73NdS2MH9ZA==",
+      "license": "MIT"
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",

From ae84886a9146bf7aeaa6e5ea21525c47cec8f4ed Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:13:56 -0300
Subject: [PATCH 82/98] feat(carpincho): add exact decimal string comparison

---
 carpincho-wallet/src/cip56/amount.ts            | 15 +++++++++++++++
 .../test/cip56/amountCompare.test.ts            | 17 +++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 carpincho-wallet/test/cip56/amountCompare.test.ts

diff --git a/carpincho-wallet/src/cip56/amount.ts b/carpincho-wallet/src/cip56/amount.ts
index 58d11e1b..4febd513 100644
--- a/carpincho-wallet/src/cip56/amount.ts
+++ b/carpincho-wallet/src/cip56/amount.ts
@@ -24,3 +24,18 @@ export const formatTokenAmount = (value: string): string => {
   }
   return `${groupThousands(wholeValue.toString())}.${cents.toString().padStart(2, '0')}`
 }
+
+// Compares two decimal strings exactly (no float). Returns -1/0/1, or undefined for non-decimals.
+export const compareDecimalStrings = (a: string, b: string): -1 | 0 | 1 | undefined => {
+  const ta = a.trim()
+  const tb = b.trim()
+  if (!DECIMAL_RE.test(ta) || !DECIMAL_RE.test(tb)) {
+    return undefined
+  }
+  const [aw, af = ''] = ta.split('.')
+  const [bw, bf = ''] = tb.split('.')
+  const scale = Math.max(af.length, bf.length)
+  const av = BigInt(`${aw}${af.padEnd(scale, '0')}`)
+  const bv = BigInt(`${bw}${bf.padEnd(scale, '0')}`)
+  return av < bv ? -1 : av > bv ? 1 : 0
+}
diff --git a/carpincho-wallet/test/cip56/amountCompare.test.ts b/carpincho-wallet/test/cip56/amountCompare.test.ts
new file mode 100644
index 00000000..8c9b3dac
--- /dev/null
+++ b/carpincho-wallet/test/cip56/amountCompare.test.ts
@@ -0,0 +1,17 @@
+import { strict as assert } from 'node:assert'
+import { describe, it } from 'node:test'
+import { compareDecimalStrings } from '@/cip56/amount'
+
+describe('compareDecimalStrings', () => {
+  it('compares decimals of differing scale without float error', () => {
+    assert.equal(compareDecimalStrings('10', '9.999999999'), 1)
+    assert.equal(compareDecimalStrings('1.5', '1.50'), 0)
+    assert.equal(compareDecimalStrings('0.1', '0.2'), -1)
+    assert.equal(compareDecimalStrings('1000.00', '1000'), 0)
+  })
+
+  it('returns undefined for non-decimal input', () => {
+    assert.equal(compareDecimalStrings('abc', '1'), undefined)
+    assert.equal(compareDecimalStrings('1', ''), undefined)
+  })
+})

From 24ad416f521cd478aaf7005a7ed7fdaddb55a448 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:15:34 -0300
Subject: [PATCH 83/98] feat(carpincho): generate 256-color avatar palette
 keyed by full party id

---
 .../src/components/ui/AccountAvatar.tsx       | 30 +++++++-
 carpincho-wallet/src/components/ui/Select.tsx | 73 +++++++++++++++++++
 .../test/components/Select.test.tsx           | 26 +++++++
 3 files changed, 128 insertions(+), 1 deletion(-)
 create mode 100644 carpincho-wallet/src/components/ui/Select.tsx
 create mode 100644 carpincho-wallet/test/components/Select.test.tsx

diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index 3c1d3c04..081bb350 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -16,7 +16,35 @@ const SIZE_CLASS: Record<NonNullable<AccountAvatarProps['size']>, string> = {
   md: 'size-10',
 }
 
-const AVATAR_COLORS = ['#692581', '#e71d73', '#f7b32b', '#2d9d92', '#3a86ff']
+const hslToHex = (h: number, s: number, l: number): string => {
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const base = l - c / 2
+  const [r, g, b] =
+    h < 60
+      ? [c, x, 0]
+      : h < 120
+        ? [x, c, 0]
+        : h < 180
+          ? [0, c, x]
+          : h < 240
+            ? [0, x, c]
+            : h < 300
+              ? [x, 0, c]
+              : [c, 0, x]
+  const channel = (value: number): string =>
+    Math.round((value + base) * 255)
+      .toString(16)
+      .padStart(2, '0')
+  return `#${channel(r)}${channel(g)}${channel(b)}`
+}
+
+// 256 distinct colors: golden-angle hue spread keeps neighbouring indices far apart,
+// with small saturation/lightness steps so wrapped hues stay separable. boring-avatars
+// hashes the full party id and picks colors[hash % 256], so schemes repeat only every 256.
+const AVATAR_COLORS = Array.from({ length: 256 }, (_value, i) =>
+  hslToHex((i * 137.508) % 360, 0.62 + (i % 3) * 0.08, 0.52 + (i % 2) * 0.08),
+)
 
 export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX.Element => (
   <span
diff --git a/carpincho-wallet/src/components/ui/Select.tsx b/carpincho-wallet/src/components/ui/Select.tsx
new file mode 100644
index 00000000..51ca9ab3
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/Select.tsx
@@ -0,0 +1,73 @@
+import * as RadixSelect from '@radix-ui/react-select'
+import { CHECK_ICON, CHEVRON_DOWN_ICON } from '@/components/ui/icons'
+import { cn } from '@/utils/cn'
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+export interface SelectProps {
+  value: string
+  onValueChange: (value: string) => void
+  options: SelectOption[]
+  ariaLabel: string
+  id?: string
+}
+
+const TRIGGER_CLASS =
+  'flex w-full items-center justify-between gap-2 px-4 py-2.5 text-base leading-[1.5] ' +
+  'text-foreground bg-surface border border-border-strong rounded-md transition-colors ' +
+  'focus:border-primary focus:outline-0 focus:shadow-focus data-[placeholder]:text-form-placeholder'
+
+const CONTENT_CLASS =
+  'z-50 overflow-hidden rounded-md border border-border bg-surface shadow-[var(--shadow-popover)] ' +
+  'animate-in fade-in-0 zoom-in-95'
+
+const ITEM_CLASS =
+  'flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-base text-foreground outline-none ' +
+  'data-[highlighted]:bg-primary-soft data-[state=checked]:font-semibold'
+
+export const Select = ({
+  value,
+  onValueChange,
+  options,
+  ariaLabel,
+  id,
+}: SelectProps): JSX.Element => (
+  <RadixSelect.Root
+    value={value}
+    onValueChange={onValueChange}
+  >
+    <RadixSelect.Trigger
+      id={id}
+      aria-label={ariaLabel}
+      className={TRIGGER_CLASS}
+    >
+      <RadixSelect.Value />
+      <RadixSelect.Icon className="text-muted-foreground">{CHEVRON_DOWN_ICON}</RadixSelect.Icon>
+    </RadixSelect.Trigger>
+    <RadixSelect.Portal>
+      <RadixSelect.Content
+        position="popper"
+        sideOffset={4}
+        className={cn(CONTENT_CLASS, 'w-[var(--radix-select-trigger-width)]')}
+      >
+        <RadixSelect.Viewport>
+          {options.map((option) => (
+            <RadixSelect.Item
+              key={option.value}
+              value={option.value}
+              className={ITEM_CLASS}
+            >
+              <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>
+              <RadixSelect.ItemIndicator className="text-primary">
+                {CHECK_ICON}
+              </RadixSelect.ItemIndicator>
+            </RadixSelect.Item>
+          ))}
+        </RadixSelect.Viewport>
+      </RadixSelect.Content>
+    </RadixSelect.Portal>
+  </RadixSelect.Root>
+)
diff --git a/carpincho-wallet/test/components/Select.test.tsx b/carpincho-wallet/test/components/Select.test.tsx
new file mode 100644
index 00000000..e4e92a53
--- /dev/null
+++ b/carpincho-wallet/test/components/Select.test.tsx
@@ -0,0 +1,26 @@
+import { strict as assert } from 'node:assert'
+import { afterEach, describe, it } from 'node:test'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Select } from '@/components/ui/Select'
+
+const OPTIONS = [
+  { value: '1h', label: '1 hour' },
+  { value: '1d', label: '1 day' },
+]
+
+describe('Select', () => {
+  afterEach(() => cleanup())
+
+  it('renders the selected option label on the trigger', () => {
+    render(
+      <Select
+        ariaLabel="Deadline"
+        value="1d"
+        onValueChange={() => undefined}
+        options={OPTIONS}
+      />,
+    )
+    const trigger = screen.getByLabelText('Deadline')
+    assert.equal(trigger.textContent?.includes('1 day'), true)
+  })
+})

From 72ad21590882e488dfc543aedac5e6a619797730 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:19:33 -0300
Subject: [PATCH 84/98] feat(carpincho): add crypto-standard amount field

---
 .../src/components/AmountField.tsx            | 56 +++++++++++++++++++
 .../test/components/AmountField.test.tsx      | 55 ++++++++++++++++++
 2 files changed, 111 insertions(+)
 create mode 100644 carpincho-wallet/src/components/AmountField.tsx
 create mode 100644 carpincho-wallet/test/components/AmountField.test.tsx

diff --git a/carpincho-wallet/src/components/AmountField.tsx b/carpincho-wallet/src/components/AmountField.tsx
new file mode 100644
index 00000000..de6575a2
--- /dev/null
+++ b/carpincho-wallet/src/components/AmountField.tsx
@@ -0,0 +1,56 @@
+import { formatTokenAmount } from '@/cip56/amount'
+import { cn } from '@/utils/cn'
+
+export interface AmountFieldProps {
+  value: string
+  onChange: (value: string) => void
+  onMax: () => void
+  balance: string
+  tokenLabel: string
+  error?: boolean
+}
+
+const FIELD_CLASS =
+  'flex items-center gap-2 rounded-md border bg-surface px-4 py-2.5 transition-colors ' +
+  'focus-within:shadow-focus'
+
+export const AmountField = ({
+  value,
+  onChange,
+  onMax,
+  balance,
+  tokenLabel,
+  error,
+}: AmountFieldProps): JSX.Element => (
+  <div className="grid gap-1">
+    <span className="text-[0.78rem] font-semibold text-muted-foreground">Amount</span>
+    <div
+      className={cn(
+        FIELD_CLASS,
+        error
+          ? 'border-danger focus-within:border-danger'
+          : 'border-border-strong focus-within:border-primary',
+      )}
+    >
+      <input
+        aria-label="Amount"
+        inputMode="decimal"
+        autoComplete="off"
+        placeholder="0.00"
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="min-w-0 flex-1 border-0 bg-transparent p-0 text-base text-foreground outline-none placeholder:text-form-placeholder"
+      />
+      <button
+        type="button"
+        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"
+      >
+        Max
+      </button>
+    </div>
+    <span className="text-[0.72rem] text-muted-foreground">
+      Balance: {formatTokenAmount(balance)} {tokenLabel}
+    </span>
+  </div>
+)
diff --git a/carpincho-wallet/test/components/AmountField.test.tsx b/carpincho-wallet/test/components/AmountField.test.tsx
new file mode 100644
index 00000000..f600809a
--- /dev/null
+++ b/carpincho-wallet/test/components/AmountField.test.tsx
@@ -0,0 +1,55 @@
+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 { AmountField } from '@/components/AmountField'
+
+describe('AmountField', () => {
+  afterEach(() => cleanup())
+
+  it('shows the formatted spendable balance and token', () => {
+    render(
+      <AmountField
+        value=""
+        onChange={() => undefined}
+        onMax={() => undefined}
+        balance="1234.5"
+        tokenLabel="Amulet"
+      />,
+    )
+    assert.ok(screen.getByText(/1,234\.50/))
+    assert.ok(screen.getByText(/Amulet/))
+  })
+
+  it('calls onMax when Max is clicked', async () => {
+    let maxed = 0
+    render(
+      <AmountField
+        value=""
+        onChange={() => undefined}
+        onMax={() => {
+          maxed += 1
+        }}
+        balance="10"
+        tokenLabel="Amulet"
+      />,
+    )
+    await userEvent.click(screen.getByRole('button', { name: /max/i }))
+    assert.equal(maxed, 1)
+  })
+
+  it('forwards typed input to onChange', async () => {
+    const values: string[] = []
+    render(
+      <AmountField
+        value=""
+        onChange={(v) => values.push(v)}
+        onMax={() => undefined}
+        balance="10"
+        tokenLabel="Amulet"
+      />,
+    )
+    await userEvent.type(screen.getByLabelText('Amount'), '5')
+    assert.deepEqual(values, ['5'])
+  })
+})

From 74a69279e4227bf058f9138046e4e90bfd6cadf5 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:20:49 -0300
Subject: [PATCH 85/98] fix(carpincho): hide decorative avatar from a11y tree
 and correct palette comment

---
 .../src/components/ContactsPicker.tsx         | 38 ++++++++++++++++
 .../src/components/ui/AccountAvatar.tsx       |  4 +-
 .../test/components/ContactsPicker.test.tsx   | 44 +++++++++++++++++++
 3 files changed, 85 insertions(+), 1 deletion(-)
 create mode 100644 carpincho-wallet/src/components/ContactsPicker.tsx
 create mode 100644 carpincho-wallet/test/components/ContactsPicker.test.tsx

diff --git a/carpincho-wallet/src/components/ContactsPicker.tsx b/carpincho-wallet/src/components/ContactsPicker.tsx
new file mode 100644
index 00000000..b3c80ea7
--- /dev/null
+++ b/carpincho-wallet/src/components/ContactsPicker.tsx
@@ -0,0 +1,38 @@
+import { AccountRow } from '@/components/AccountRow'
+import type { AccountPublic } from '@/vault/types'
+
+export interface ContactsPickerProps {
+  contacts: AccountPublic[]
+  onSelect: (partyId: string) => void
+}
+
+// Fixed height for ~4 rows so a longer list scrolls rather than resizing the sheet.
+const LIST_CLASS = 'flex h-[13rem] flex-col gap-1 overflow-y-auto'
+
+export const ContactsPicker = ({ contacts, onSelect }: ContactsPickerProps): JSX.Element => {
+  if (contacts.length === 0) {
+    return (
+      <p className="px-2 py-6 text-center text-[0.92rem] text-muted-foreground">
+        No other accounts to send to. Add another account to build your contacts.
+      </p>
+    )
+  }
+  return (
+    <div className={LIST_CLASS}>
+      {contacts.map((account) => (
+        <button
+          key={account.id}
+          type="button"
+          aria-label={account.name}
+          onClick={() => onSelect(account.partyId)}
+          className="flex items-center rounded-sm p-2 text-left outline-none transition-colors hover:bg-primary-soft focus-visible:shadow-focus"
+        >
+          <AccountRow
+            account={account}
+            withName
+          />
+        </button>
+      ))}
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index 081bb350..8e2a307a 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -41,13 +41,15 @@ const hslToHex = (h: number, s: number, l: number): string => {
 
 // 256 distinct colors: golden-angle hue spread keeps neighbouring indices far apart,
 // with small saturation/lightness steps so wrapped hues stay separable. boring-avatars
-// hashes the full party id and picks colors[hash % 256], so schemes repeat only every 256.
+// picks colors[hash % 256] for the face, so there are 256 colour schemes; the shape, eyes,
+// and rotation still derive from the full party-id hash, so whole-avatar collisions stay rare.
 const AVATAR_COLORS = Array.from({ length: 256 }, (_value, i) =>
   hslToHex((i * 137.508) % 360, 0.62 + (i % 3) * 0.08, 0.52 + (i % 2) * 0.08),
 )
 
 export const AccountAvatar = ({ partyId, size = 'md' }: AccountAvatarProps): JSX.Element => (
   <span
+    aria-hidden="true"
     className={cn('shrink-0 overflow-hidden rounded-full ring-1 ring-black/10', SIZE_CLASS[size])}
   >
     <Avatar
diff --git a/carpincho-wallet/test/components/ContactsPicker.test.tsx b/carpincho-wallet/test/components/ContactsPicker.test.tsx
new file mode 100644
index 00000000..a8101644
--- /dev/null
+++ b/carpincho-wallet/test/components/ContactsPicker.test.tsx
@@ -0,0 +1,44 @@
+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 { ContactsPicker } from '@/components/ContactsPicker'
+import type { AccountPublic } from '@/vault/types'
+
+const make = (id: string, name: string): AccountPublic => ({
+  id,
+  name,
+  partyId: `${name.toLowerCase()}::1220abcd`,
+  publicKeyBase64: 'pk',
+  network: 'canton:local',
+  isPrimary: false,
+  createdAt: 1,
+})
+
+describe('ContactsPicker', () => {
+  afterEach(() => cleanup())
+
+  it('lists the provided contacts and returns the picked party id', async () => {
+    const picked: string[] = []
+    render(
+      <ContactsPicker
+        contacts={[make('a', 'Bob'), make('b', 'Carol')]}
+        onSelect={(partyId) => picked.push(partyId)}
+      />,
+    )
+    assert.ok(screen.getByText('Bob'))
+    assert.ok(screen.getByText('Carol'))
+    await userEvent.click(screen.getByRole('button', { name: 'Bob' }))
+    assert.deepEqual(picked, ['bob::1220abcd'])
+  })
+
+  it('shows an empty state when there are no other accounts', () => {
+    render(
+      <ContactsPicker
+        contacts={[]}
+        onSelect={() => undefined}
+      />,
+    )
+    assert.ok(screen.getByText(/no other accounts/i))
+  })
+})

From 615c0c6bedbfd20d55709025c0ccd7c956f56b69 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:25:15 -0300
Subject: [PATCH 86/98] refactor(carpincho): replace hsl sextant ternary with
 lookup table

---
 .../src/components/ui/AccountAvatar.tsx       | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/carpincho-wallet/src/components/ui/AccountAvatar.tsx b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
index 8e2a307a..60bded93 100644
--- a/carpincho-wallet/src/components/ui/AccountAvatar.tsx
+++ b/carpincho-wallet/src/components/ui/AccountAvatar.tsx
@@ -20,18 +20,15 @@ const hslToHex = (h: number, s: number, l: number): string => {
   const c = (1 - Math.abs(2 * l - 1)) * s
   const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
   const base = l - c / 2
-  const [r, g, b] =
-    h < 60
-      ? [c, x, 0]
-      : h < 120
-        ? [x, c, 0]
-        : h < 180
-          ? [0, c, x]
-          : h < 240
-            ? [0, x, c]
-            : h < 300
-              ? [x, 0, c]
-              : [c, 0, x]
+  const sextants = [
+    [c, x, 0],
+    [x, c, 0],
+    [0, c, x],
+    [0, x, c],
+    [x, 0, c],
+    [c, 0, x],
+  ]
+  const [r, g, b] = sextants[Math.floor(h / 60) % 6]
   const channel = (value: number): string =>
     Math.round((value + base) * 255)
       .toString(16)

From 81b4f2c236dde8b2dd346a507e2c7f86107fe83d Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:27:06 -0300
Subject: [PATCH 87/98] feat(carpincho): add contacts and confirmation steps to
 send flow

---
 .../src/components/SendConfirm.tsx            | 137 ++++++++++
 .../src/components/SendTokenForm.tsx          | 237 ++++++++----------
 .../src/components/TokenDetailSheet.tsx       |  95 ++++++-
 .../test/components/SendConfirm.test.tsx      | 121 +++++++++
 .../test/components/SendTokenForm.test.tsx    | 156 ++++++------
 .../test/components/TokenDetailSheet.test.tsx |  47 +++-
 6 files changed, 561 insertions(+), 232 deletions(-)
 create mode 100644 carpincho-wallet/src/components/SendConfirm.tsx
 create mode 100644 carpincho-wallet/test/components/SendConfirm.test.tsx

diff --git a/carpincho-wallet/src/components/SendConfirm.tsx b/carpincho-wallet/src/components/SendConfirm.tsx
new file mode 100644
index 00000000..95360978
--- /dev/null
+++ b/carpincho-wallet/src/components/SendConfirm.tsx
@@ -0,0 +1,137 @@
+import { type ReactNode, useState } from 'react'
+import { formatTokenAmount } from '@/cip56/amount'
+import type { TokenHoldingSummary } from '@/cip56/holdings'
+import { transferTimeLabel } from '@/cip56/transfers'
+import {
+  type Cip56SendApi,
+  defaultSendApi,
+  type TransferDeadline,
+  transferDeadlineExpiration,
+} from '@/components/SendTokenForm'
+import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
+import { toast } from '@/components/ui/toast'
+import { shortMiddle } from '@/utils/account'
+import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
+
+export interface SendConfirmProps {
+  account: AccountPublic
+  summary: TokenHoldingSummary
+  recipient: string
+  amount: string
+  memo: string
+  deadline: TransferDeadline
+  sendApi?: Cip56SendApi
+  onCancel: () => void
+  onSent: () => void
+}
+
+const Row = ({ label, children }: { label: string; children: ReactNode }): JSX.Element => (
+  <div className="flex items-start justify-between gap-3 py-1.5">
+    <span className="text-[0.78rem] font-semibold text-muted-foreground">{label}</span>
+    <span className="min-w-0 break-all text-right text-[0.86rem] text-foreground">{children}</span>
+  </div>
+)
+
+// Confirmation screen: human-readable summary, the raw request JSON behind an expander,
+// then the actual submit. Carpincho stays the signer of the prepared transaction.
+export const SendConfirm = ({
+  account,
+  summary,
+  recipient,
+  amount,
+  memo,
+  deadline,
+  sendApi = defaultSendApi,
+  onCancel,
+  onSent,
+}: SendConfirmProps): JSX.Element => {
+  const vault = useVault()
+  const [submitting, setSubmitting] = useState(false)
+  const [submitError, setSubmitError] = useState<string | undefined>(undefined)
+
+  const expirationDate = transferDeadlineExpiration(deadline).toISOString()
+  const trimmedMemo = memo.trim()
+  const request = {
+    sender: account.partyId,
+    recipient: recipient.trim(),
+    amount: amount.trim(),
+    instrumentId: summary.instrumentId?.id,
+    ...(trimmedMemo === '' ? {} : { memo: trimmedMemo }),
+    expirationDate,
+  }
+
+  const onConfirm = async (): Promise<void> => {
+    if (summary.instrumentId?.id === undefined) {
+      setSubmitError('Token is missing an instrument id')
+      return
+    }
+    setSubmitting(true)
+    setSubmitError(undefined)
+    try {
+      await sendApi.createTokenTransfer({
+        account,
+        recipient: recipient.trim(),
+        amount: amount.trim(),
+        instrumentId: summary.instrumentId,
+        ...(trimmedMemo === '' ? {} : { memo: trimmedMemo }),
+        expirationDate,
+        signMessage: vault.signMessage,
+        recordTransaction: vault.recordTransaction,
+      })
+      toast.success('Transfer submitted.')
+      onSent()
+    } catch (err) {
+      const message = (err as Error).message
+      setSubmitError(message)
+      toast.error(`Send failed: ${message}`)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      {submitError === undefined ? null : (
+        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
+          {submitError}
+        </div>
+      )}
+
+      <div className="divide-y divide-border rounded-md border border-border px-3 py-1">
+        <Row label="To">{shortMiddle(recipient.trim(), 12, 7)}</Row>
+        <Row label="Amount">
+          {formatTokenAmount(amount.trim())} {summary.tokenLabel}
+        </Row>
+        <Row label="Expires">{transferTimeLabel(expirationDate)}</Row>
+        {trimmedMemo === '' ? null : <Row label="Memo">{trimmedMemo}</Row>}
+      </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">
+          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>
+      </details>
+
+      <div className="grid grid-cols-2 gap-3">
+        <SecondaryButton
+          onClick={onCancel}
+          disabled={submitting}
+        >
+          Cancel
+        </SecondaryButton>
+        <PrimaryButton
+          disabled={submitting}
+          onClick={() => {
+            void onConfirm()
+          }}
+        >
+          {submitting ? 'Sending...' : 'Confirm'}
+        </PrimaryButton>
+      </div>
+    </div>
+  )
+}
diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
index 24baea61..02527774 100644
--- a/carpincho-wallet/src/components/SendTokenForm.tsx
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -1,12 +1,13 @@
-import { type FormEvent, useState } from 'react'
 import type { ExecutePreparedResponse } from '@/api/interactiveSubmission'
+import { compareDecimalStrings } from '@/cip56/amount'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { type CreateTokenTransferParams, createTokenTransfer } from '@/cip56/transfers'
+import { AmountField } from '@/components/AmountField'
 import { PrimaryButton } from '@/components/ui/Button'
+import { CONTACTS_ICON } from '@/components/ui/icons'
+import { Select } from '@/components/ui/Select'
 import { TextInput } from '@/components/ui/TextInput'
-import { toast } from '@/components/ui/toast'
-import type { AccountPublic } from '@/vault/types'
-import { useVault } from '@/vault/useVault'
+import { Tooltip } from '@/components/ui/Tooltip'
 
 export type TransferDeadline = '1h' | '1d' | '1w' | '1m' | '1y'
 
@@ -14,19 +15,9 @@ export interface Cip56SendApi {
   createTokenTransfer: (params: CreateTokenTransferParams) => Promise<ExecutePreparedResponse>
 }
 
-export interface SendTokenFormProps {
-  account: AccountPublic
-  summary: TokenHoldingSummary
-  sendApi?: Cip56SendApi
-  // Called after a transfer is accepted so the host can refresh holdings or navigate back.
-  onSent?: () => void
-}
+export const defaultSendApi: Cip56SendApi = { createTokenTransfer }
 
-const defaultSendApi: Cip56SendApi = {
-  createTokenTransfer,
-}
-
-const DEADLINE_OPTIONS: Array<{ value: TransferDeadline; label: string }> = [
+export const DEADLINE_OPTIONS: Array<{ value: TransferDeadline; label: string }> = [
   { value: '1h', label: '1 hour' },
   { value: '1d', label: '1 day' },
   { value: '1w', label: '1 week' },
@@ -57,144 +48,132 @@ export const transferDeadlineExpiration = (deadline: TransferDeadline, now = new
   return next
 }
 
-// Outgoing CIP-56 transfer form for a token already chosen by the detail modal.
+const MEMO_HELP =
+  "A short note that rides along with the transfer, like the reference line on a bank payment. The recipient can read it. Leave it blank if you don't need one."
+
+export interface SendTokenFormProps {
+  summary: TokenHoldingSummary
+  spendableBalance: string
+  recipient: string
+  amount: string
+  memo: string
+  deadline: TransferDeadline
+  onRecipientChange: (value: string) => void
+  onAmountChange: (value: string) => void
+  onMemoChange: (value: string) => void
+  onDeadlineChange: (value: TransferDeadline) => void
+  onOpenContacts: () => void
+  onReview: () => void
+}
+
+// True when amount is a positive decimal not exceeding the spendable balance.
+const amountIsValid = (amount: string, balance: string): boolean => {
+  if (compareDecimalStrings(amount, '0') !== 1) {
+    return false
+  }
+  return compareDecimalStrings(amount, balance) !== 1
+}
+
+// Send screen body: controlled fields preset to one token; advances to confirmation via Review.
 export const SendTokenForm = ({
-  account,
   summary,
-  sendApi = defaultSendApi,
-  onSent,
+  spendableBalance,
+  recipient,
+  amount,
+  memo,
+  deadline,
+  onRecipientChange,
+  onAmountChange,
+  onMemoChange,
+  onDeadlineChange,
+  onOpenContacts,
+  onReview,
 }: SendTokenFormProps): JSX.Element => {
-  const vault = useVault()
-  const [recipient, setRecipient] = useState('')
-  const [amount, setAmount] = useState('')
-  const [memo, setMemo] = useState('')
-  const [deadline, setDeadline] = useState<TransferDeadline>('1h')
-  const [submitting, setSubmitting] = useState(false)
-  const [submitError, setSubmitError] = useState<string | undefined>(undefined)
-
-  // Submits the transfer intent while Carpincho remains the signer of the prepared transaction.
-  const onSubmit = async (event: FormEvent<HTMLFormElement>): Promise<void> => {
-    event.preventDefault()
-    if (summary.instrumentId?.id === undefined) {
-      setSubmitError('Token is missing an instrument id')
-      return
-    }
-    setSubmitting(true)
-    setSubmitError(undefined)
-    try {
-      await sendApi.createTokenTransfer({
-        account,
-        recipient: recipient.trim(),
-        amount: amount.trim(),
-        instrumentId: summary.instrumentId,
-        ...(memo.trim() === '' ? {} : { memo: memo.trim() }),
-        expirationDate: transferDeadlineExpiration(deadline).toISOString(),
-        signMessage: vault.signMessage,
-        recordTransaction: vault.recordTransaction,
-      })
-      setRecipient('')
-      setAmount('')
-      setMemo('')
-      toast.success('Transfer submitted.')
-      onSent?.()
-    } catch (err) {
-      const message = (err as Error).message
-      setSubmitError(message)
-      toast.error(`Send failed: ${message}`)
-    } finally {
-      setSubmitting(false)
-    }
-  }
+  const trimmedAmount = amount.trim()
+  const overBalance =
+    trimmedAmount !== '' && compareDecimalStrings(trimmedAmount, spendableBalance) === 1
+  const canReview =
+    recipient.trim() !== '' &&
+    amountIsValid(trimmedAmount, spendableBalance) &&
+    summary.instrumentId?.id !== undefined
 
   return (
-    <form
-      className="flex flex-col gap-3"
-      onSubmit={(event) => {
-        void onSubmit(event)
-      }}
-    >
-      {submitError === undefined ? null : (
-        <div className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-[0.82rem] text-danger">
-          {submitError}
+    <div className="flex flex-col gap-3">
+      <div className="grid gap-1">
+        <div className="flex items-center justify-between">
+          <label
+            className="text-[0.78rem] font-semibold text-muted-foreground"
+            htmlFor="send-recipient"
+          >
+            Recipient
+          </label>
+          <button
+            type="button"
+            aria-label="Contacts"
+            onClick={onOpenContacts}
+            className="inline-flex items-center gap-1 rounded-sm text-[0.74rem] font-semibold text-primary transition-colors hover:text-primary-hover focus-visible:outline-none focus-visible:shadow-focus"
+          >
+            {CONTACTS_ICON}
+            Contacts
+          </button>
         </div>
-      )}
-
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-recipient"
-      >
-        Recipient party
         <TextInput
-          aria-label="Recipient party"
+          aria-label="Recipient"
           autoComplete="off"
           id="send-recipient"
           value={recipient}
-          onChange={(event) => setRecipient(event.target.value)}
+          onChange={(event) => onRecipientChange(event.target.value)}
         />
-      </label>
+      </div>
 
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-amount"
-      >
-        Amount
-        <TextInput
-          aria-label="Amount"
-          id="send-amount"
-          inputMode="decimal"
-          value={amount}
-          onChange={(event) => setAmount(event.target.value)}
-        />
-      </label>
+      <AmountField
+        value={amount}
+        onChange={onAmountChange}
+        onMax={() => onAmountChange(spendableBalance)}
+        balance={spendableBalance}
+        tokenLabel={summary.tokenLabel}
+        error={overBalance}
+      />
 
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-deadline"
-      >
-        Deadline
-        <select
-          aria-label="Deadline"
-          className="rounded-md border border-border-strong bg-surface px-3 py-2.5 text-base text-foreground focus:border-primary focus:outline-0 focus:shadow-focus"
+      <div className="grid gap-1">
+        <label
+          className="text-[0.78rem] font-semibold text-muted-foreground"
+          htmlFor="send-deadline"
+        >
+          Deadline
+        </label>
+        <Select
           id="send-deadline"
+          ariaLabel="Deadline"
           value={deadline}
-          onChange={(event) => setDeadline(event.target.value as TransferDeadline)}
-        >
-          {DEADLINE_OPTIONS.map((option) => (
-            <option
-              key={option.value}
-              value={option.value}
-            >
-              {option.label}
-            </option>
-          ))}
-        </select>
-      </label>
+          onValueChange={(value) => onDeadlineChange(value as TransferDeadline)}
+          options={DEADLINE_OPTIONS}
+        />
+      </div>
 
-      <label
-        className="grid gap-1 text-[0.78rem] font-semibold text-muted-foreground"
-        htmlFor="send-memo"
-      >
-        Memo
+      <div className="grid gap-1">
+        <span className="flex items-center gap-1.5 text-[0.78rem] font-semibold text-muted-foreground">
+          Memo
+          <Tooltip
+            label="What is a memo?"
+            content={MEMO_HELP}
+          />
+        </span>
         <TextInput
           aria-label="Memo"
           id="send-memo"
           value={memo}
-          onChange={(event) => setMemo(event.target.value)}
+          onChange={(event) => onMemoChange(event.target.value)}
         />
-      </label>
+      </div>
 
       <PrimaryButton
         className="mt-1"
-        disabled={
-          submitting ||
-          recipient.trim() === '' ||
-          amount.trim() === '' ||
-          summary.instrumentId?.id === undefined
-        }
-        type="submit"
+        disabled={!canReview}
+        onClick={onReview}
       >
-        {submitting ? 'Sending...' : 'Send'}
+        Review
       </PrimaryButton>
-    </form>
+    </div>
   )
 }
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index c57defa1..ceab534a 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -1,8 +1,10 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import cantonIcon from '@/assets/canton.png'
 import { formatTokenAmount } from '@/cip56/amount'
-import type { TokenHolding, TokenHoldingSummary } from '@/cip56/holdings'
-import { type Cip56SendApi, SendTokenForm } from '@/components/SendTokenForm'
+import { sumDecimalAmounts, type TokenHolding, type TokenHoldingSummary } from '@/cip56/holdings'
+import { ContactsPicker } from '@/components/ContactsPicker'
+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 { SecondaryButton } from '@/components/ui/Button'
@@ -10,9 +12,11 @@ import { CHEVRON_RIGHT_ICON, RECEIVE_ICON, SEND_ICON } from '@/components/ui/ico
 import { Sheet } from '@/components/ui/Sheet'
 import { useTokenHoldingDetails } from '@/hooks/useTokenHoldingDetails'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
+import { sortAccounts } from '@/utils/account'
 import type { AccountPublic } from '@/vault/types'
+import { useVault } from '@/vault/useVault'
 
-type Screen = 'detail' | 'send' | 'receive' | 'holding'
+type Screen = 'detail' | 'send' | 'contacts' | 'confirm' | 'receive' | 'holding'
 
 export interface TokenDetailSheetProps {
   open: boolean
@@ -138,7 +142,8 @@ const DetailScreen = ({
   </div>
 )
 
-// Single token modal: a screen stack (detail / send / receive / holding) inside one sheet.
+// Single token modal: a screen stack inside one sheet. Send-form state lives here so it
+// survives the contacts and confirmation screens.
 export const TokenDetailSheet = ({
   open,
   onOpenChange,
@@ -148,9 +153,14 @@ export const TokenDetailSheet = ({
   sendApi,
   onSent,
 }: TokenDetailSheetProps): JSX.Element => {
+  const vault = useVault()
   const [screen, setScreen] = useState<Screen>('detail')
   const [activeHolding, setActiveHolding] = useState<TokenHolding | null>(null)
   const [direction, setDirection] = useState<'forward' | 'back'>('forward')
+  const [recipient, setRecipient] = useState('')
+  const [amount, setAmount] = useState('')
+  const [memo, setMemo] = useState('')
+  const [deadline, setDeadline] = useState<TransferDeadline>('1h')
   const screenRef = useRef<HTMLDivElement>(null)
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: re-run on every screen change to refocus the new view.
@@ -173,11 +183,36 @@ export const TokenDetailSheet = ({
     enabled: open,
   })
 
+  // Spendable balance excludes locked holdings, which would fail on send.
+  const spendableBalance = useMemo(
+    () =>
+      sumDecimalAmounts(
+        holdings
+          .filter((holding) => holding.interfaceViewValue?.lock == null)
+          .map((holding) => holding.interfaceViewValue?.amount)
+          .filter((value): value is string => value !== undefined),
+      ),
+    [holdings],
+  )
+
+  const contacts = useMemo(
+    () => sortAccounts(vault.accounts).filter((entry) => entry.id !== account.id),
+    [vault.accounts, account.id],
+  )
+
+  const resetForm = (): void => {
+    setRecipient('')
+    setAmount('')
+    setMemo('')
+    setDeadline('1h')
+  }
+
   const handleOpenChange = (next: boolean): void => {
     if (!next) {
       setScreen('detail')
       setActiveHolding(null)
       setDirection('forward')
+      resetForm()
     }
     onOpenChange(next)
   }
@@ -187,14 +222,14 @@ export const TokenDetailSheet = ({
     setScreen(next)
   }
 
-  // The screen hierarchy is flat: every non-detail screen returns to detail.
+  // Send-flow screens step back to the form; everything else returns to detail.
   const goBack = (): void => {
     if (screen === 'detail') {
       handleOpenChange(false)
       return
     }
     setDirection('back')
-    setScreen('detail')
+    setScreen(screen === 'contacts' || screen === 'confirm' ? 'send' : 'detail')
   }
 
   const openHolding = (holding: TokenHolding): void => {
@@ -205,18 +240,21 @@ export const TokenDetailSheet = ({
   // After a transfer leaves the wallet, refresh the host and return to the balance view.
   const handleSent = (): void => {
     onSent?.()
+    resetForm()
     setDirection('back')
     setScreen('detail')
   }
 
   const title =
-    screen === 'send'
+    screen === 'send' || screen === 'confirm'
       ? `Send ${summary.tokenLabel}`
-      : screen === 'receive'
-        ? 'Receive'
-        : screen === 'holding'
-          ? 'Holding details'
-          : summary.tokenLabel
+      : screen === 'contacts'
+        ? 'Choose recipient'
+        : screen === 'receive'
+          ? 'Receive'
+          : screen === 'holding'
+            ? 'Holding details'
+            : summary.tokenLabel
   const animationClass =
     direction === 'forward' ? 'animate-slide-in-right' : 'animate-slide-in-left'
 
@@ -248,9 +286,40 @@ export const TokenDetailSheet = ({
         )}
         {screen === 'send' && (
           <SendTokenForm
+            summary={summary}
+            spendableBalance={spendableBalance}
+            recipient={recipient}
+            amount={amount}
+            memo={memo}
+            deadline={deadline}
+            onRecipientChange={setRecipient}
+            onAmountChange={setAmount}
+            onMemoChange={setMemo}
+            onDeadlineChange={setDeadline}
+            onOpenContacts={() => goTo('contacts')}
+            onReview={() => goTo('confirm')}
+          />
+        )}
+        {screen === 'contacts' && (
+          <ContactsPicker
+            contacts={contacts}
+            onSelect={(partyId) => {
+              setRecipient(partyId)
+              setDirection('back')
+              setScreen('send')
+            }}
+          />
+        )}
+        {screen === 'confirm' && (
+          <SendConfirm
             account={account}
             summary={summary}
+            recipient={recipient}
+            amount={amount}
+            memo={memo}
+            deadline={deadline}
             sendApi={sendApi}
+            onCancel={goBack}
             onSent={handleSent}
           />
         )}
diff --git a/carpincho-wallet/test/components/SendConfirm.test.tsx b/carpincho-wallet/test/components/SendConfirm.test.tsx
new file mode 100644
index 00000000..a71eb9bc
--- /dev/null
+++ b/carpincho-wallet/test/components/SendConfirm.test.tsx
@@ -0,0 +1,121 @@
+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 { TokenHoldingSummary } from '@/cip56/holdings'
+import { SendConfirm } from '@/components/SendConfirm'
+import type { Cip56SendApi } from '@/components/SendTokenForm'
+import { toast } from '@/components/ui/toast'
+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 SUMMARY: TokenHoldingSummary = {
+  key: 'dso::party:Amulet',
+  tokenLabel: 'Amulet',
+  instrumentId: { admin: 'dso::party', id: 'Amulet' },
+  totalAmount: '100',
+  source: 'scan',
+}
+
+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,
+    signMessage: async () => 'signature',
+    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
+    changePassword: async () => undefined,
+    verifyPassword: () => true,
+    autoLockOption: 'never',
+    setAutoLockOption: () => undefined,
+  }) as VaultContextValue
+
+const renderConfirm = (
+  sendApi: Cip56SendApi,
+  onSent: () => void,
+  onCancel = (): void => undefined,
+): void => {
+  render(
+    <VaultContext.Provider value={baseVault()}>
+      <SendConfirm
+        account={ACCOUNT}
+        summary={SUMMARY}
+        recipient="bob::party"
+        amount="7.5"
+        memo="lunch"
+        deadline="1h"
+        sendApi={sendApi}
+        onCancel={onCancel}
+        onSent={onSent}
+      />
+    </VaultContext.Provider>,
+  )
+}
+
+describe('SendConfirm', () => {
+  afterEach(() => {
+    cleanup()
+    toast.clear()
+  })
+
+  it('shows the human summary and submits the transfer on Confirm', async () => {
+    const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
+    let sentCount = 0
+    const sendApi: Cip56SendApi = {
+      createTokenTransfer: async (params) => {
+        sent.push(params)
+        return { updateId: 'u1' }
+      },
+    }
+    renderConfirm(sendApi, () => (sentCount += 1))
+
+    assert.ok(screen.getByText('lunch'))
+    assert.ok(screen.getByText(/7\.50/))
+    await userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+    await waitFor(() => assert.equal(sentCount, 1))
+    assert.equal(sent[0]?.recipient, 'bob::party')
+    assert.equal(sent[0]?.amount, '7.5')
+    assert.equal(sent[0]?.memo, 'lunch')
+    assert.deepEqual(sent[0]?.instrumentId, { admin: 'dso::party', id: 'Amulet' })
+    assert.equal(typeof sent[0]?.expirationDate, 'string')
+  })
+
+  it('exposes the request JSON behind a View data expander', () => {
+    renderConfirm({ createTokenTransfer: async () => ({ updateId: 'u1' }) }, () => undefined)
+    assert.ok(screen.getByText(/"recipient": "bob::party"/))
+  })
+
+  it('cancels back without submitting', async () => {
+    let cancelled = 0
+    let sentCount = 0
+    renderConfirm(
+      { createTokenTransfer: async () => ({ updateId: 'u1' }) },
+      () => (sentCount += 1),
+      () => (cancelled += 1),
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    assert.equal(cancelled, 1)
+    assert.equal(sentCount, 0)
+  })
+})
diff --git a/carpincho-wallet/test/components/SendTokenForm.test.tsx b/carpincho-wallet/test/components/SendTokenForm.test.tsx
index 223e0eae..6a88537b 100644
--- a/carpincho-wallet/test/components/SendTokenForm.test.tsx
+++ b/carpincho-wallet/test/components/SendTokenForm.test.tsx
@@ -1,118 +1,112 @@
 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, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import {
-  type Cip56SendApi,
+  DEADLINE_OPTIONS,
   SendTokenForm,
   transferDeadlineExpiration,
 } from '@/components/SendTokenForm'
-import { toast } from '@/components/ui/toast'
-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,
-}
+import { TooltipProvider } from '@/components/ui/Tooltip'
 
 const SUMMARY: TokenHoldingSummary = {
   key: 'dso::party:Amulet',
   tokenLabel: 'Amulet',
   instrumentId: { admin: 'dso::party', id: 'Amulet' },
-  totalAmount: '12.5000000000',
+  totalAmount: '12.5',
   source: 'scan',
 }
 
-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,
-    signMessage: async () => 'signature',
-    recordTransaction: async (tx) => ({ ...tx, id: 'tx-1', createdAt: 1 }),
-    changePassword: async () => undefined,
-    verifyPassword: () => true,
-    autoLockOption: 'never',
-    setAutoLockOption: () => undefined,
-  }) as VaultContextValue
+interface Handlers {
+  onRecipientChange?: (v: string) => void
+  onAmountChange?: (v: string) => void
+  onMemoChange?: (v: string) => void
+  onOpenContacts?: () => void
+  onReview?: () => void
+}
 
-const renderForm = (sendApi: Cip56SendApi, onSent: () => void): void => {
+const renderForm = (
+  props: Partial<{ recipient: string; amount: string; memo: string }> & Handlers = {},
+): void => {
   render(
-    <VaultContext.Provider value={baseVault()}>
+    <TooltipProvider>
       <SendTokenForm
-        account={ACCOUNT}
         summary={SUMMARY}
-        sendApi={sendApi}
-        onSent={onSent}
+        spendableBalance="12.5"
+        recipient={props.recipient ?? ''}
+        amount={props.amount ?? ''}
+        memo={props.memo ?? ''}
+        deadline="1h"
+        onRecipientChange={props.onRecipientChange ?? (() => undefined)}
+        onAmountChange={props.onAmountChange ?? (() => undefined)}
+        onMemoChange={props.onMemoChange ?? (() => undefined)}
+        onDeadlineChange={() => undefined}
+        onOpenContacts={props.onOpenContacts ?? (() => undefined)}
+        onReview={props.onReview ?? (() => undefined)}
       />
-    </VaultContext.Provider>,
+    </TooltipProvider>,
   )
 }
 
 describe('SendTokenForm', () => {
-  afterEach(() => {
-    cleanup()
-    toast.clear()
-  })
+  afterEach(() => cleanup())
 
-  it('submits a transfer for the preset token without a token field', async () => {
-    // Scenario: the token is already chosen by the detail modal, so the form drops
-    // the token dropdown and sends against the passed-in instrument id.
-    const sent: Parameters<Cip56SendApi['createTokenTransfer']>[0][] = []
-    let sentCount = 0
-    const sendApi: Cip56SendApi = {
-      createTokenTransfer: async (params) => {
-        sent.push(params)
-        return { updateId: 'update-transfer-1' }
-      },
-    }
+  it('renders a Recipient field (not "Recipient party") and no Token field', () => {
+    renderForm()
+    assert.ok(screen.getByLabelText('Recipient'))
+    assert.equal(screen.queryByLabelText('Recipient party'), null)
+    assert.equal(screen.queryByLabelText('Token'), null)
+  })
 
-    renderForm(sendApi, () => {
-      sentCount += 1
+  it('forwards field edits to the controlled handlers', async () => {
+    const recipients: string[] = []
+    const memos: string[] = []
+    renderForm({
+      onRecipientChange: (v) => recipients.push(v),
+      onMemoChange: (v) => memos.push(v),
     })
+    await userEvent.type(screen.getByLabelText('Recipient'), 'x')
+    await userEvent.type(screen.getByLabelText('Memo'), 'y')
+    assert.deepEqual(recipients, ['x'])
+    assert.deepEqual(memos, ['y'])
+  })
 
-    assert.equal(screen.queryByLabelText('Token'), null)
-    await userEvent.type(screen.getByLabelText('Recipient party'), 'receiver::party')
-    await userEvent.type(screen.getByLabelText('Amount'), '7.5')
-    await userEvent.type(screen.getByLabelText('Memo'), 'lunch')
-    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+  it('opens contacts from the contacts button', async () => {
+    let opened = 0
+    renderForm({ onOpenContacts: () => (opened += 1) })
+    await userEvent.click(screen.getByRole('button', { name: /contacts/i }))
+    assert.equal(opened, 1)
+  })
+
+  it('disables Review until recipient and a positive amount within balance are set', async () => {
+    let reviewed = 0
+    renderForm({ onReview: () => (reviewed += 1) })
+    assert.equal(
+      (screen.getByRole('button', { name: 'Review' }) as HTMLButtonElement).disabled,
+      true,
+    )
+    cleanup()
 
-    await waitFor(() => assert.equal(sentCount, 1))
-    assert.equal(sent.length, 1)
-    assert.equal(sent[0]?.account.partyId, 'alice::party')
-    assert.equal(sent[0]?.recipient, 'receiver::party')
-    assert.equal(sent[0]?.amount, '7.5')
-    assert.deepEqual(sent[0]?.instrumentId, { admin: 'dso::party', id: 'Amulet' })
-    assert.equal(sent[0]?.memo, 'lunch')
-    assert.equal(sentCount, 1)
+    renderForm({ recipient: 'bob::party', amount: '5', onReview: () => (reviewed += 1) })
+    const review = screen.getByRole('button', { name: 'Review' })
+    assert.equal((review as HTMLButtonElement).disabled, false)
+    await userEvent.click(review)
+    assert.equal(reviewed, 1)
   })
 
-  it('computes calendar deadline expirations from the selected preset', () => {
-    // Scenario: deadline presets must resolve to absolute ISO timestamps using
-    // calendar arithmetic for month/year.
-    const now = new Date('2026-06-10T12:00:00.000Z')
+  it('blocks Review when amount exceeds spendable balance', () => {
+    renderForm({ recipient: 'bob::party', amount: '999' })
+    assert.equal(
+      (screen.getByRole('button', { name: 'Review' }) as HTMLButtonElement).disabled,
+      true,
+    )
+  })
 
+  it('still computes calendar deadline expirations from presets', () => {
+    const now = new Date('2026-06-10T12:00:00.000Z')
     assert.equal(transferDeadlineExpiration('1h', now).toISOString(), '2026-06-10T13:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1d', now).toISOString(), '2026-06-11T12:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1w', now).toISOString(), '2026-06-17T12:00:00.000Z')
     assert.equal(transferDeadlineExpiration('1m', now).toISOString(), '2026-07-10T12:00:00.000Z')
-    assert.equal(transferDeadlineExpiration('1y', now).toISOString(), '2027-06-10T12:00:00.000Z')
+    assert.equal(DEADLINE_OPTIONS.length, 5)
   })
 })
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index 9fc9015e..197e1ad6 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
@@ -4,6 +4,7 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import type { TokenHoldingSummary } from '@/cip56/holdings'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
+import { TooltipProvider } from '@/components/ui/Tooltip'
 import { toast } from '@/components/ui/toast'
 import { TestQueryClientProvider } from '@/test-utils/queryClient'
 import type { AccountPublic } from '@/vault/types'
@@ -76,14 +77,16 @@ const baseVault = (): VaultContextValue =>
 const renderSheet = (): void => {
   render(
     <TestQueryClientProvider>
-      <VaultContext.Provider value={baseVault()}>
-        <TokenDetailSheet
-          open={true}
-          onOpenChange={() => undefined}
-          account={ACCOUNT}
-          summary={SUMMARY}
-        />
-      </VaultContext.Provider>
+      <TooltipProvider>
+        <VaultContext.Provider value={baseVault()}>
+          <TokenDetailSheet
+            open={true}
+            onOpenChange={() => undefined}
+            account={ACCOUNT}
+            summary={SUMMARY}
+          />
+        </VaultContext.Provider>
+      </TooltipProvider>
     </TestQueryClientProvider>,
   )
 }
@@ -120,13 +123,39 @@ describe('TokenDetailSheet', () => {
     renderSheet()
 
     await userEvent.click(screen.getByRole('button', { name: 'Send' }))
-    assert.ok(screen.getByLabelText('Recipient party'))
+    assert.ok(screen.getByLabelText('Recipient'))
     assert.equal(screen.queryByLabelText('Token'), null)
 
     await userEvent.click(screen.getByRole('button', { name: /back/i }))
     assert.ok(screen.getByText('9,000.00'))
   })
 
+  it('shows spendable balance on send and keeps recipient after visiting contacts', async () => {
+    // Scenario: balance excludes locked holdings; visiting contacts and returning
+    // preserves the typed recipient because form state lives in the sheet.
+    renderSheet()
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    await userEvent.type(screen.getByLabelText('Recipient'), 'bob::party')
+
+    assert.ok(screen.getByText(/Balance: 9,997\.00 Amulet/))
+
+    await userEvent.click(screen.getByRole('button', { name: /contacts/i }))
+    await userEvent.click(screen.getByRole('button', { name: /back/i }))
+    assert.equal((screen.getByLabelText('Recipient') as HTMLInputElement).value, 'bob::party')
+  })
+
+  it('advances Send -> Review -> Confirm and keeps one dialog', async () => {
+    renderSheet()
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    await userEvent.type(screen.getByLabelText('Recipient'), 'bob::party')
+    await userEvent.type(screen.getByLabelText('Amount'), '5')
+    await userEvent.click(screen.getByRole('button', { name: 'Review' }))
+
+    assert.ok(screen.getByRole('button', { name: 'Confirm' }))
+    assert.ok(screen.getByRole('button', { name: 'Cancel' }))
+    assert.equal(document.querySelectorAll('[role="dialog"]').length, 1)
+  })
+
   it('navigates to the receive screen showing the party QR and id', async () => {
     // Scenario: Receive shows a scannable QR plus the full party id and a copy button.
     // The sheet renders through a portal, so the QR lives on document, not the container.

From df4308f82114e5d8ae8935c7d772e2ebb2558aa0 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:37:32 -0300
Subject: [PATCH 88/98] feat(carpincho): icon-only contacts, fixed 4-row list,
 grouped amount input, close on send

---
 carpincho-wallet/src/cip56/amount.ts          | 20 ++++++++++++
 .../src/components/AmountField.tsx            |  6 ++--
 .../src/components/ContactsPicker.tsx         |  7 +++--
 .../src/components/SendTokenForm.tsx          |  3 +-
 .../src/components/TokenDetailSheet.tsx       |  6 ++--
 .../test/cip56/amountCompare.test.ts          | 21 ++++++++++++-
 .../test/components/AmountField.test.tsx      | 15 ++++++++-
 .../test/components/TokenDetailSheet.test.tsx | 31 ++++++++++++++++++-
 8 files changed, 94 insertions(+), 15 deletions(-)

diff --git a/carpincho-wallet/src/cip56/amount.ts b/carpincho-wallet/src/cip56/amount.ts
index 4febd513..108aed5e 100644
--- a/carpincho-wallet/src/cip56/amount.ts
+++ b/carpincho-wallet/src/cip56/amount.ts
@@ -25,6 +25,26 @@ export const formatTokenAmount = (value: string): string => {
   return `${groupThousands(wholeValue.toString())}.${cents.toString().padStart(2, '0')}`
 }
 
+// Strips grouping commas and any non-decimal characters, collapsing extra dots so the
+// stored amount stays a plain decimal string.
+export const stripAmountGroups = (value: string): string => {
+  const cleaned = value.replace(/[^\d.]/g, '')
+  const [whole, ...rest] = cleaned.split('.')
+  return rest.length === 0 ? whole : `${whole}.${rest.join('')}`
+}
+
+// Groups the integer part of a partial amount with commas, keeping the fraction and a
+// trailing dot intact so it can format live while the user types.
+export const formatAmountInput = (value: string): string => {
+  const cleaned = stripAmountGroups(value)
+  if (cleaned === '') {
+    return ''
+  }
+  const [whole, ...fraction] = cleaned.split('.')
+  const grouped = groupThousands(whole)
+  return fraction.length === 0 ? grouped : `${grouped}.${fraction.join('')}`
+}
+
 // Compares two decimal strings exactly (no float). Returns -1/0/1, or undefined for non-decimals.
 export const compareDecimalStrings = (a: string, b: string): -1 | 0 | 1 | undefined => {
   const ta = a.trim()
diff --git a/carpincho-wallet/src/components/AmountField.tsx b/carpincho-wallet/src/components/AmountField.tsx
index de6575a2..fed60680 100644
--- a/carpincho-wallet/src/components/AmountField.tsx
+++ b/carpincho-wallet/src/components/AmountField.tsx
@@ -1,4 +1,4 @@
-import { formatTokenAmount } from '@/cip56/amount'
+import { formatAmountInput, formatTokenAmount, stripAmountGroups } from '@/cip56/amount'
 import { cn } from '@/utils/cn'
 
 export interface AmountFieldProps {
@@ -37,8 +37,8 @@ export const AmountField = ({
         inputMode="decimal"
         autoComplete="off"
         placeholder="0.00"
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
+        value={formatAmountInput(value)}
+        onChange={(event) => onChange(stripAmountGroups(event.target.value))}
         className="min-w-0 flex-1 border-0 bg-transparent p-0 text-base text-foreground outline-none placeholder:text-form-placeholder"
       />
       <button
diff --git a/carpincho-wallet/src/components/ContactsPicker.tsx b/carpincho-wallet/src/components/ContactsPicker.tsx
index b3c80ea7..ca53589f 100644
--- a/carpincho-wallet/src/components/ContactsPicker.tsx
+++ b/carpincho-wallet/src/components/ContactsPicker.tsx
@@ -6,8 +6,9 @@ export interface ContactsPickerProps {
   onSelect: (partyId: string) => void
 }
 
-// Fixed height for ~4 rows so a longer list scrolls rather than resizing the sheet.
-const LIST_CLASS = 'flex h-[13rem] flex-col gap-1 overflow-y-auto'
+// Fixed height of exactly 4 rows (4 × h-14 + 3 × gap-1) so the list never resizes the
+// sheet and a longer list scrolls.
+const LIST_CLASS = 'flex h-[236px] flex-col gap-1 overflow-y-auto'
 
 export const ContactsPicker = ({ contacts, onSelect }: ContactsPickerProps): JSX.Element => {
   if (contacts.length === 0) {
@@ -25,7 +26,7 @@ export const ContactsPicker = ({ contacts, onSelect }: ContactsPickerProps): JSX
           type="button"
           aria-label={account.name}
           onClick={() => onSelect(account.partyId)}
-          className="flex items-center rounded-sm p-2 text-left outline-none transition-colors hover:bg-primary-soft focus-visible:shadow-focus"
+          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"
         >
           <AccountRow
             account={account}
diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
index 02527774..4933e868 100644
--- a/carpincho-wallet/src/components/SendTokenForm.tsx
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -111,10 +111,9 @@ export const SendTokenForm = ({
             type="button"
             aria-label="Contacts"
             onClick={onOpenContacts}
-            className="inline-flex items-center gap-1 rounded-sm text-[0.74rem] font-semibold text-primary transition-colors hover:text-primary-hover focus-visible:outline-none focus-visible:shadow-focus"
+            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"
           >
             {CONTACTS_ICON}
-            Contacts
           </button>
         </div>
         <TextInput
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index ceab534a..ae2c8a7f 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -237,12 +237,10 @@ export const TokenDetailSheet = ({
     goTo('holding')
   }
 
-  // After a transfer leaves the wallet, refresh the host and return to the balance view.
+  // After a transfer leaves the wallet, refresh the host and close the whole sheet.
   const handleSent = (): void => {
     onSent?.()
-    resetForm()
-    setDirection('back')
-    setScreen('detail')
+    handleOpenChange(false)
   }
 
   const title =
diff --git a/carpincho-wallet/test/cip56/amountCompare.test.ts b/carpincho-wallet/test/cip56/amountCompare.test.ts
index 8c9b3dac..be76a89c 100644
--- a/carpincho-wallet/test/cip56/amountCompare.test.ts
+++ b/carpincho-wallet/test/cip56/amountCompare.test.ts
@@ -1,6 +1,6 @@
 import { strict as assert } from 'node:assert'
 import { describe, it } from 'node:test'
-import { compareDecimalStrings } from '@/cip56/amount'
+import { compareDecimalStrings, formatAmountInput, stripAmountGroups } from '@/cip56/amount'
 
 describe('compareDecimalStrings', () => {
   it('compares decimals of differing scale without float error', () => {
@@ -15,3 +15,22 @@ describe('compareDecimalStrings', () => {
     assert.equal(compareDecimalStrings('1', ''), undefined)
   })
 })
+
+describe('stripAmountGroups', () => {
+  it('removes commas and invalid characters, collapsing extra dots', () => {
+    assert.equal(stripAmountGroups('9,997.50'), '9997.50')
+    assert.equal(stripAmountGroups('1,234,567'), '1234567')
+    assert.equal(stripAmountGroups('1.2.3'), '1.23')
+    assert.equal(stripAmountGroups('12a3'), '123')
+  })
+})
+
+describe('formatAmountInput', () => {
+  it('groups the integer part while preserving the fraction and trailing dot', () => {
+    assert.equal(formatAmountInput('1234567'), '1,234,567')
+    assert.equal(formatAmountInput('9997.5'), '9,997.5')
+    assert.equal(formatAmountInput('9997.'), '9,997.')
+    assert.equal(formatAmountInput('1234567.891'), '1,234,567.891')
+    assert.equal(formatAmountInput(''), '')
+  })
+})
diff --git a/carpincho-wallet/test/components/AmountField.test.tsx b/carpincho-wallet/test/components/AmountField.test.tsx
index f600809a..e2cce00c 100644
--- a/carpincho-wallet/test/components/AmountField.test.tsx
+++ b/carpincho-wallet/test/components/AmountField.test.tsx
@@ -38,7 +38,20 @@ describe('AmountField', () => {
     assert.equal(maxed, 1)
   })
 
-  it('forwards typed input to onChange', async () => {
+  it('displays the value with comma grouping', () => {
+    render(
+      <AmountField
+        value="1234567.5"
+        onChange={() => undefined}
+        onMax={() => undefined}
+        balance="10"
+        tokenLabel="Amulet"
+      />,
+    )
+    assert.equal((screen.getByLabelText('Amount') as HTMLInputElement).value, '1,234,567.5')
+  })
+
+  it('strips grouping commas before forwarding to onChange', async () => {
     const values: string[] = []
     render(
       <AmountField
diff --git a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx b/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
index 197e1ad6..bb10681d 100644
--- a/carpincho-wallet/test/components/TokenDetailSheet.test.tsx
+++ b/carpincho-wallet/test/components/TokenDetailSheet.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 { TokenHoldingSummary } from '@/cip56/holdings'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
@@ -156,6 +156,35 @@ describe('TokenDetailSheet', () => {
     assert.equal(document.querySelectorAll('[role="dialog"]').length, 1)
   })
 
+  it('closes the whole sheet after a confirmed send', async () => {
+    // Scenario: confirming returns the user to the assets tab, not the detail screen.
+    let closed = false
+    render(
+      <TestQueryClientProvider>
+        <TooltipProvider>
+          <VaultContext.Provider value={baseVault()}>
+            <TokenDetailSheet
+              open={true}
+              onOpenChange={(open) => {
+                if (!open) closed = true
+              }}
+              account={ACCOUNT}
+              summary={SUMMARY}
+              sendApi={{ createTokenTransfer: async () => ({ updateId: 'u1' }) }}
+            />
+          </VaultContext.Provider>
+        </TooltipProvider>
+      </TestQueryClientProvider>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Send' }))
+    await userEvent.type(screen.getByLabelText('Recipient'), 'bob::party')
+    await userEvent.type(screen.getByLabelText('Amount'), '5')
+    await userEvent.click(screen.getByRole('button', { name: 'Review' }))
+    await userEvent.click(screen.getByRole('button', { name: 'Confirm' }))
+
+    await waitFor(() => assert.equal(closed, true))
+  })
+
   it('navigates to the receive screen showing the party QR and id', async () => {
     // Scenario: Receive shows a scannable QR plus the full party id and a copy button.
     // The sheet renders through a portal, so the QR lives on document, not the container.

From ac8e272ef8459b5d4a40a795d01b677031d33d80 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:49:08 -0300
Subject: [PATCH 89/98] fix(carpincho): normalize leading-dot amounts and flag
 invalid amount for a11y

---
 carpincho-wallet/src/cip56/amount.ts              | 7 ++++---
 carpincho-wallet/src/components/AmountField.tsx   | 1 +
 carpincho-wallet/test/cip56/amountCompare.test.ts | 7 +++++++
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/carpincho-wallet/src/cip56/amount.ts b/carpincho-wallet/src/cip56/amount.ts
index 108aed5e..67fdfff3 100644
--- a/carpincho-wallet/src/cip56/amount.ts
+++ b/carpincho-wallet/src/cip56/amount.ts
@@ -25,12 +25,13 @@ export const formatTokenAmount = (value: string): string => {
   return `${groupThousands(wholeValue.toString())}.${cents.toString().padStart(2, '0')}`
 }
 
-// Strips grouping commas and any non-decimal characters, collapsing extra dots so the
-// stored amount stays a plain decimal string.
+// Strips grouping commas and any non-decimal characters, collapsing extra dots and
+// normalizing a leading dot to "0." so the stored amount stays a plain decimal string.
 export const stripAmountGroups = (value: string): string => {
   const cleaned = value.replace(/[^\d.]/g, '')
   const [whole, ...rest] = cleaned.split('.')
-  return rest.length === 0 ? whole : `${whole}.${rest.join('')}`
+  const normalizedWhole = whole === '' && rest.length > 0 ? '0' : whole
+  return rest.length === 0 ? normalizedWhole : `${normalizedWhole}.${rest.join('')}`
 }
 
 // Groups the integer part of a partial amount with commas, keeping the fraction and a
diff --git a/carpincho-wallet/src/components/AmountField.tsx b/carpincho-wallet/src/components/AmountField.tsx
index fed60680..fe042c4e 100644
--- a/carpincho-wallet/src/components/AmountField.tsx
+++ b/carpincho-wallet/src/components/AmountField.tsx
@@ -34,6 +34,7 @@ export const AmountField = ({
     >
       <input
         aria-label="Amount"
+        aria-invalid={error ? true : undefined}
         inputMode="decimal"
         autoComplete="off"
         placeholder="0.00"
diff --git a/carpincho-wallet/test/cip56/amountCompare.test.ts b/carpincho-wallet/test/cip56/amountCompare.test.ts
index be76a89c..fc5e2352 100644
--- a/carpincho-wallet/test/cip56/amountCompare.test.ts
+++ b/carpincho-wallet/test/cip56/amountCompare.test.ts
@@ -23,6 +23,12 @@ describe('stripAmountGroups', () => {
     assert.equal(stripAmountGroups('1.2.3'), '1.23')
     assert.equal(stripAmountGroups('12a3'), '123')
   })
+
+  it('normalizes a leading dot to "0."', () => {
+    assert.equal(stripAmountGroups('.5'), '0.5')
+    assert.equal(stripAmountGroups('.'), '0.')
+    assert.equal(stripAmountGroups(''), '')
+  })
 })
 
 describe('formatAmountInput', () => {
@@ -31,6 +37,7 @@ describe('formatAmountInput', () => {
     assert.equal(formatAmountInput('9997.5'), '9,997.5')
     assert.equal(formatAmountInput('9997.'), '9,997.')
     assert.equal(formatAmountInput('1234567.891'), '1,234,567.891')
+    assert.equal(formatAmountInput('.5'), '0.5')
     assert.equal(formatAmountInput(''), '')
   })
 })

From d24a495f60873cb889eb7a55723f97485d310dfa Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:49:51 -0300
Subject: [PATCH 90/98] feat(carpincho): direction-aware transfers tab with
 merged history

Classify active transfer instructions by sender so the wallet that sent a
transfer sees it as awaiting acceptance instead of an Accept button, which only
the receiver gets. Count only incoming transfers toward the tab badge, drop the
Incoming transfers heading, and merge transfer history into the Transfers tab
while keeping the rest of the activity log under Activity.
---
 carpincho-wallet/src/cip56/transfers.ts       |   7 +
 carpincho-wallet/src/components/HomeTabs.tsx  |  17 +-
 .../src/components/TransfersPanel.tsx         | 269 +++++++++++-------
 .../test/components/HomeTabs.test.tsx         |  36 +++
 .../test/components/TransfersPanel.test.tsx   |  83 +++++-
 5 files changed, 310 insertions(+), 102 deletions(-)

diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index 59ee5a7c..bd831928 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -57,6 +57,13 @@ export interface CreateTokenTransferParams {
 
 const TRANSFER_REASON_KEY = 'splice.lfdecentralizedtrust.org/reason'
 
+// Transaction-log methods that represent transfers; these move from Activity into Transfers.
+const TRANSFER_HISTORY_METHODS = new Set(['cip56.transfer.create', 'cip56.transfer.accept'])
+
+// True when a recorded transaction is a transfer, so the two tabs can split their history.
+export const isTransferHistoryTransaction = (method: string): boolean =>
+  TRANSFER_HISTORY_METHODS.has(method)
+
 // Keeps token labels readable while preserving the SDK contract payload shape elsewhere.
 export const tokenDisplayLabel = (instrumentId?: TokenInstrumentId): string =>
   instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 0062b1f1..6eea8f02 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
+import { isTransferHistoryTransaction } from '@/cip56/transfers'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
@@ -52,6 +53,19 @@ export const HomeTabs = ({
           ),
     [account, transactions],
   )
+  // Transfer history moves into the Transfers tab; everything else stays under Activity.
+  const { transferTransactions, otherTransactions } = useMemo(() => {
+    const transfersHistory: TransactionRecord[] = []
+    const other: TransactionRecord[] = []
+    for (const tx of activeTransactions) {
+      if (isTransferHistoryTransaction(tx.method)) {
+        transfersHistory.push(tx)
+      } else {
+        other.push(tx)
+      }
+    }
+    return { transferTransactions: transfersHistory, otherTransactions: other }
+  }, [activeTransactions])
 
   return (
     <Tabs
@@ -90,13 +104,14 @@ export const HomeTabs = ({
           api={transfersApi}
           preapprovalApi={preapprovalApi}
           onPendingCountChange={onPendingTransferCountChange}
+          historyTransactions={transferTransactions}
         />
       </TabContent>
       <TabContent
         value="activity"
         className={TAB_CONTENT_CLASS}
       >
-        <ActivityList transactions={activeTransactions} />
+        <ActivityList transactions={otherTransactions} />
       </TabContent>
     </Tabs>
   )
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index ceb9e042..5481359a 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -1,11 +1,13 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { formatTokenAmount } from '@/cip56/amount'
+import type { PendingTokenTransfer } from '@/cip56/transfers'
 import {
   tokenDisplayLabel,
   transferDescription,
   transferStatusLabel,
   transferTimeLabel,
 } from '@/cip56/transfers'
+import { ActivityList } from '@/components/ActivityList'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { Switch } from '@/components/ui/Switch'
 import { Tooltip } from '@/components/ui/Tooltip'
@@ -15,7 +17,7 @@ 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 type { AccountPublic, TransactionRecord } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
 export interface TransfersPanelProps {
@@ -23,6 +25,7 @@ export interface TransfersPanelProps {
   api?: Cip56TransferApi
   preapprovalApi?: AmuletPreapprovalApi
   onPendingCountChange?: (count: number) => void
+  historyTransactions?: TransactionRecord[]
 }
 
 interface TransferDetailRowProps {
@@ -104,12 +107,113 @@ const TransferDetailRow = ({ label, value }: TransferDetailRowProps): JSX.Elemen
   </div>
 )
 
-// Renders incoming CIP-56 transfer instructions that require receiver acceptance.
+interface TransferCardProps {
+  transfer: PendingTokenTransfer
+  direction: 'incoming' | 'outgoing'
+  isExpanded: boolean
+  onToggleDetails: (transferInstructionCid: string) => void
+  isAccepting: boolean
+  onAccept: (transferInstructionCid: string) => void
+}
+
+// One active transfer instruction; receivers can accept, senders only watch it settle.
+const TransferCard = ({
+  transfer,
+  direction,
+  isExpanded,
+  onToggleDetails,
+  isAccepting,
+  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 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={() => {
+                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, plus this account's transfer history.
 export const TransfersPanel = ({
   account,
   api,
   preapprovalApi,
   onPendingCountChange,
+  historyTransactions,
 }: TransfersPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
@@ -121,10 +225,28 @@ export const TransfersPanel = ({
     recordTransaction: vault.recordTransaction,
   })
 
-  // Exposes the pending count to any parent that wants to surface action badges.
+  // The ledger returns every instruction the party is a stakeholder on; the sender of an
+  // outgoing transfer cannot accept it, so only transfers we did not send are actionable.
+  const { incoming, outgoing } = useMemo(() => {
+    const partyId = activeAccount?.partyId
+    const incomingTransfers: PendingTokenTransfer[] = []
+    const outgoingTransfers: PendingTokenTransfer[] = []
+    for (const transfer of transfers) {
+      if (transfer.interfaceViewValue?.transfer?.sender === partyId) {
+        outgoingTransfers.push(transfer)
+      } else {
+        incomingTransfers.push(transfer)
+      }
+    }
+    return { incoming: incomingTransfers, outgoing: outgoingTransfers }
+  }, [transfers, activeAccount?.partyId])
+
+  const history = historyTransactions ?? []
+
+  // Only incoming transfers need receiver action, so the badge counts those alone.
   useEffect(() => {
-    onPendingCountChange?.(transfers.length)
-  }, [onPendingCountChange, transfers.length])
+    onPendingCountChange?.(incoming.length)
+  }, [onPendingCountChange, incoming.length])
 
   useEffect(() => {
     return () => onPendingCountChange?.(0)
@@ -158,6 +280,9 @@ export const TransfersPanel = ({
     )
   }
 
+  const hasActive = incoming.length > 0 || outgoing.length > 0
+  const hasContent = hasActive || history.length > 0
+
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 pt-4 pb-2">
       <AmuletPreapprovalSection
@@ -165,109 +290,55 @@ export const TransfersPanel = ({
         api={preapprovalApi}
       />
 
-      <h2 className="m-0 px-1 text-[0.95rem] font-semibold text-foreground">Incoming transfers</h2>
-
       {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>
       )}
 
-      {transfers.length === 0 && !loading ? (
+      {!hasContent && !loading ? (
         <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>
+          <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">No transfers yet</p>
         </div>
-      ) : (
+      ) : null}
+
+      {hasActive ? (
         <div className="flex flex-col gap-2">
-          {transfers.map((transfer) => {
-            const transferView = transfer.interfaceViewValue?.transfer
-            const label = `${
-              transferView?.amount === undefined
-                ? 'unknown'
-                : formatTokenAmount(transferView.amount)
-            } ${tokenDisplayLabel(transferView?.instrumentId)}`
-            const description = transferDescription(transfer)
-            const isAccepting = acceptingCid === transfer.contractId
-            const isExpanded = expandedCid === transfer.contractId
-            const detailsId = `transfer-details-${transfer.contractId}`
-            return (
-              <article
-                key={transfer.contractId}
-                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">
-                      from:{' '}
-                      {transferView?.sender === undefined
-                        ? 'unknown'
-                        : shortMiddle(transferView.sender, 10, 6)}
-                    </p>
-                  </div>
-                  <div className="flex shrink-0 flex-col gap-2">
-                    <PrimaryButton
-                      className="px-3 py-1.5 text-[0.82rem]"
-                      disabled={isAccepting}
-                      onClick={() => {
-                        void onAccept(transfer.contractId)
-                      }}
-                    >
-                      {isAccepting ? 'Accepting...' : 'Accept'}
-                    </PrimaryButton>
-                    <SecondaryButton
-                      aria-controls={detailsId}
-                      aria-expanded={isExpanded}
-                      className="px-3 py-1.5 text-[0.78rem]"
-                      onClick={() => toggleDetails(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>
-            )
-          })}
+          {incoming.map((transfer) => (
+            <TransferCard
+              key={transfer.contractId}
+              transfer={transfer}
+              direction="incoming"
+              isExpanded={expandedCid === transfer.contractId}
+              onToggleDetails={toggleDetails}
+              isAccepting={acceptingCid === transfer.contractId}
+              onAccept={(cid) => {
+                void onAccept(cid)
+              }}
+            />
+          ))}
+          {outgoing.map((transfer) => (
+            <TransferCard
+              key={transfer.contractId}
+              transfer={transfer}
+              direction="outgoing"
+              isExpanded={expandedCid === transfer.contractId}
+              onToggleDetails={toggleDetails}
+              isAccepting={false}
+              onAccept={() => undefined}
+            />
+          ))}
         </div>
-      )}
+      ) : null}
+
+      {history.length > 0 ? (
+        <section className="flex flex-col">
+          <h2 className="m-0 px-1 pt-1 text-[0.8rem] font-semibold tracking-tight text-muted-foreground">
+            History
+          </h2>
+          <ActivityList transactions={history} />
+        </section>
+      ) : null}
     </div>
   )
 }
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index a3563adf..070ecc2b 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -175,6 +175,42 @@ describe('HomeTabs navigation', () => {
     await screen.findByRole('tab', { name: 'Transfers 1' })
   })
 
+  it('routes transfer records to the Transfers tab and the rest to Activity', async () => {
+    // Scenario: transfer history is merged into the Transfers tab, so transfer
+    // records must not also appear under Activity. Non-transfer records stay there.
+    const transferRecord: TransactionRecord = {
+      id: 'tx-transfer',
+      accountId: ACCOUNT.id,
+      accountName: ACCOUNT.name,
+      partyId: ACCOUNT.partyId,
+      network: ACCOUNT.network,
+      method: 'cip56.transfer.create',
+      status: 'executed',
+      createdAt: Date.parse('2026-06-10T12:00:00.000Z'),
+      preparedTransactionHash: 'transfer-hash',
+      summary: 'Send 5 Amulet',
+    }
+    const otherRecord = txFor(ACCOUNT, 'tx-other', 'dApp execute')
+
+    renderHome(
+      baseVault(),
+      <HomeTabs
+        transactions={[transferRecord, otherRecord]}
+        preapprovalApi={inactivePreapprovalApi}
+      />,
+    )
+
+    // The Transfers tab is force-mounted, so its merged history is in the DOM already.
+    await screen.findByText('Send 5 Amulet')
+    assert.equal(screen.queryByText('dApp execute'), null)
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }))
+
+    assert.equal(screen.getByText('dApp execute').textContent, 'dApp execute')
+    // The transfer record lives only in Transfers, never duplicated into Activity.
+    assert.equal(screen.getAllByText('Send 5 Amulet').length, 1)
+  })
+
   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.
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 8c4f272b..3c9375b2 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -102,14 +102,93 @@ describe('TransfersPanel', () => {
 
     renderTransfers(api)
 
-    await screen.findByText('Incoming transfers')
     await screen.findByText('42.00 Amulet')
     await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
-    await waitFor(() => assert.ok(screen.getByText('No pending transfers')))
+    await waitFor(() => assert.ok(screen.getByText('No transfers yet')))
 
     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 transfers yet')
+    assert.equal(screen.queryByText('Incoming 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('lists transfer history passed to the panel', async () => {
+    // Scenario: completed transfers come from the local transaction log and render
+    // in the Transfers tab alongside any active transfer instructions.
+    const api: Cip56TransferApi = {
+      listPendingIncomingTransfers: async () => [],
+    }
+
+    render(
+      <TestQueryClientProvider>
+        <TooltipProvider>
+          <VaultContext.Provider value={baseVault()}>
+            <TransfersPanel
+              api={api}
+              preapprovalApi={inactivePreapprovalApi}
+              historyTransactions={[
+                {
+                  id: 'tx-history-1',
+                  accountId: ACCOUNT.id,
+                  accountName: ACCOUNT.name,
+                  partyId: ACCOUNT.partyId,
+                  network: ACCOUNT.network,
+                  method: 'cip56.transfer.create',
+                  status: 'executed',
+                  createdAt: Date.parse('2026-06-10T12:00:00.000Z'),
+                  preparedTransactionHash: 'history-hash',
+                  summary: 'Send 5 Amulet',
+                },
+              ]}
+            />
+          </VaultContext.Provider>
+        </TooltipProvider>
+      </TestQueryClientProvider>,
+    )
+
+    await screen.findByText('Send 5 Amulet')
+  })
+
   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

From 97523774429512a028b00b8fcb8e2cd8d918ba75 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:53:19 -0300
Subject: [PATCH 91/98] refactor(carpincho): dedup send request build, balance
 check, and title lookup

---
 carpincho-wallet/src/cip56/amount.ts          |  7 ++++---
 .../src/components/SendConfirm.tsx            | 11 ++++------
 .../src/components/SendTokenForm.tsx          | 16 +++++----------
 .../src/components/TokenDetailSheet.tsx       | 20 +++++++++----------
 4 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/carpincho-wallet/src/cip56/amount.ts b/carpincho-wallet/src/cip56/amount.ts
index 67fdfff3..ace819ba 100644
--- a/carpincho-wallet/src/cip56/amount.ts
+++ b/carpincho-wallet/src/cip56/amount.ts
@@ -41,9 +41,10 @@ export const formatAmountInput = (value: string): string => {
   if (cleaned === '') {
     return ''
   }
-  const [whole, ...fraction] = cleaned.split('.')
-  const grouped = groupThousands(whole)
-  return fraction.length === 0 ? grouped : `${grouped}.${fraction.join('')}`
+  const dot = cleaned.indexOf('.')
+  return dot === -1
+    ? groupThousands(cleaned)
+    : `${groupThousands(cleaned.slice(0, dot))}${cleaned.slice(dot)}`
 }
 
 // Compares two decimal strings exactly (no float). Returns -1/0/1, or undefined for non-decimals.
diff --git a/carpincho-wallet/src/components/SendConfirm.tsx b/carpincho-wallet/src/components/SendConfirm.tsx
index 95360978..4544a8e1 100644
--- a/carpincho-wallet/src/components/SendConfirm.tsx
+++ b/carpincho-wallet/src/components/SendConfirm.tsx
@@ -52,14 +52,14 @@ export const SendConfirm = ({
 
   const expirationDate = transferDeadlineExpiration(deadline).toISOString()
   const trimmedMemo = memo.trim()
-  const request = {
-    sender: account.partyId,
+  // Shared by the inspector JSON and the actual submission so the two cannot drift.
+  const shared = {
     recipient: recipient.trim(),
     amount: amount.trim(),
-    instrumentId: summary.instrumentId?.id,
     ...(trimmedMemo === '' ? {} : { memo: trimmedMemo }),
     expirationDate,
   }
+  const request = { sender: account.partyId, instrumentId: summary.instrumentId?.id, ...shared }
 
   const onConfirm = async (): Promise<void> => {
     if (summary.instrumentId?.id === undefined) {
@@ -71,11 +71,8 @@ export const SendConfirm = ({
     try {
       await sendApi.createTokenTransfer({
         account,
-        recipient: recipient.trim(),
-        amount: amount.trim(),
         instrumentId: summary.instrumentId,
-        ...(trimmedMemo === '' ? {} : { memo: trimmedMemo }),
-        expirationDate,
+        ...shared,
         signMessage: vault.signMessage,
         recordTransaction: vault.recordTransaction,
       })
diff --git a/carpincho-wallet/src/components/SendTokenForm.tsx b/carpincho-wallet/src/components/SendTokenForm.tsx
index 4933e868..a62d5434 100644
--- a/carpincho-wallet/src/components/SendTokenForm.tsx
+++ b/carpincho-wallet/src/components/SendTokenForm.tsx
@@ -66,14 +66,6 @@ export interface SendTokenFormProps {
   onReview: () => void
 }
 
-// True when amount is a positive decimal not exceeding the spendable balance.
-const amountIsValid = (amount: string, balance: string): boolean => {
-  if (compareDecimalStrings(amount, '0') !== 1) {
-    return false
-  }
-  return compareDecimalStrings(amount, balance) !== 1
-}
-
 // Send screen body: controlled fields preset to one token; advances to confirmation via Review.
 export const SendTokenForm = ({
   summary,
@@ -90,11 +82,13 @@ export const SendTokenForm = ({
   onReview,
 }: SendTokenFormProps): JSX.Element => {
   const trimmedAmount = amount.trim()
-  const overBalance =
-    trimmedAmount !== '' && compareDecimalStrings(trimmedAmount, spendableBalance) === 1
+  const vsBalance = compareDecimalStrings(trimmedAmount, spendableBalance)
+  const overBalance = trimmedAmount !== '' && vsBalance === 1
+  const isPositive = compareDecimalStrings(trimmedAmount, '0') === 1
   const canReview =
     recipient.trim() !== '' &&
-    amountIsValid(trimmedAmount, spendableBalance) &&
+    isPositive &&
+    vsBalance !== 1 &&
     summary.instrumentId?.id !== undefined
 
   return (
diff --git a/carpincho-wallet/src/components/TokenDetailSheet.tsx b/carpincho-wallet/src/components/TokenDetailSheet.tsx
index ae2c8a7f..d4a66270 100644
--- a/carpincho-wallet/src/components/TokenDetailSheet.tsx
+++ b/carpincho-wallet/src/components/TokenDetailSheet.tsx
@@ -243,16 +243,16 @@ export const TokenDetailSheet = ({
     handleOpenChange(false)
   }
 
-  const title =
-    screen === 'send' || screen === 'confirm'
-      ? `Send ${summary.tokenLabel}`
-      : screen === 'contacts'
-        ? 'Choose recipient'
-        : screen === 'receive'
-          ? 'Receive'
-          : screen === 'holding'
-            ? 'Holding details'
-            : summary.tokenLabel
+  const sendTitle = `Send ${summary.tokenLabel}`
+  const titles: Record<Screen, string> = {
+    detail: summary.tokenLabel,
+    send: sendTitle,
+    confirm: sendTitle,
+    contacts: 'Choose recipient',
+    receive: 'Receive',
+    holding: 'Holding details',
+  }
+  const title = titles[screen]
   const animationClass =
     direction === 'forward' ? 'animate-slide-in-right' : 'animate-slide-in-left'
 

From e98f0e48cb8f7c7dd8076b24d209eb8d3976efb8 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 16:56:13 -0300
Subject: [PATCH 92/98] docs(carpincho): document redesigned send flow, Select
 primitive, and contacts icon

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

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index cd684e6c..f3eae023 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-switch`, `@radix-ui/react-tabs`, `@radix-ui/react-toast`, `@radix-ui/react-tooltip` for modals (incl. bottom sheets), 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, 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`); 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 uses `SendTokenForm` with the token preset and Receive shows a party-id QR via `TokenReceive` / `react-qr-code`), `TransfersPanel` (the Amulet preapproval auto-accept toggle plus incoming CIP-56 transfers awaiting receiver acceptance), 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 pending-incoming-transfer count badge. 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`. 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-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 incoming CIP-56 transfers awaiting receiver acceptance), 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 pending-incoming-transfer count badge. 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`. 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, incoming 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 36ea0ead..43b23a1f 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -32,14 +32,16 @@ src/
                     AccountRow, AccountListRow, AccountsDialog, CopyPartyIdButton,
                     ActivityList, HomeTabs, AssetsPanel, TransfersPanel,
                     TokenRow, TokenDetailSheet, TokenReceive, TokenHoldingDetail,
-                    SendTokenForm, ConnectionFooter,
+                    SendTokenForm, SendConfirm, ContactsPicker, AmountField,
+                    ConnectionFooter,
                     NewPasswordFields, CreateAccountForm, PasswordStrengthIndicator,
                     SecurityPanel, 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)
+                    @radix-ui/react-tabs; Sheet on top of @radix-ui/react-dialog;
+                    Select on top of @radix-ui/react-select)
                     and provides static visuals (Button, TextInput, PasswordInput,
                     Alert, Card, OptionList, Stepper, DangerConfirm, AccountAvatar,
-                    PendingActionCard).
+                    PendingActionCard, Select).
   theme/            ThemeProvider + ThemeContext + useTheme hook driving the
                     [data-theme] attribute on <html>
   cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,

From d2eab9335c81936b19c3db4734a896cd481bb50e Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:20:51 -0300
Subject: [PATCH 93/98] feat(carpincho): keep only pending transfers in
 transfers tab, history in activity

Revert the transfer-history merge: the Transfers tab again shows only active
incoming and outgoing transfers, and the full transaction log including
transfers returns to the Activity tab. The direction-aware rendering and
incoming-only badge are retained.
---
 carpincho-wallet/src/cip56/transfers.ts       |  7 ----
 carpincho-wallet/src/components/HomeTabs.tsx  | 17 +-------
 .../src/components/TransfersPanel.tsx         | 25 +++--------
 .../test/components/HomeTabs.test.tsx         | 36 ----------------
 .../test/components/TransfersPanel.test.tsx   | 41 +------------------
 5 files changed, 9 insertions(+), 117 deletions(-)

diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index bd831928..59ee5a7c 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -57,13 +57,6 @@ export interface CreateTokenTransferParams {
 
 const TRANSFER_REASON_KEY = 'splice.lfdecentralizedtrust.org/reason'
 
-// Transaction-log methods that represent transfers; these move from Activity into Transfers.
-const TRANSFER_HISTORY_METHODS = new Set(['cip56.transfer.create', 'cip56.transfer.accept'])
-
-// True when a recorded transaction is a transfer, so the two tabs can split their history.
-export const isTransferHistoryTransaction = (method: string): boolean =>
-  TRANSFER_HISTORY_METHODS.has(method)
-
 // Keeps token labels readable while preserving the SDK contract payload shape elsewhere.
 export const tokenDisplayLabel = (instrumentId?: TokenInstrumentId): string =>
   instrumentId?.id?.trim() === undefined || instrumentId.id.trim() === ''
diff --git a/carpincho-wallet/src/components/HomeTabs.tsx b/carpincho-wallet/src/components/HomeTabs.tsx
index 6eea8f02..0062b1f1 100644
--- a/carpincho-wallet/src/components/HomeTabs.tsx
+++ b/carpincho-wallet/src/components/HomeTabs.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useState } from 'react'
-import { isTransferHistoryTransaction } from '@/cip56/transfers'
 import { ActivityList } from '@/components/ActivityList'
 import { AssetsPanel } from '@/components/AssetsPanel'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
@@ -53,19 +52,6 @@ export const HomeTabs = ({
           ),
     [account, transactions],
   )
-  // Transfer history moves into the Transfers tab; everything else stays under Activity.
-  const { transferTransactions, otherTransactions } = useMemo(() => {
-    const transfersHistory: TransactionRecord[] = []
-    const other: TransactionRecord[] = []
-    for (const tx of activeTransactions) {
-      if (isTransferHistoryTransaction(tx.method)) {
-        transfersHistory.push(tx)
-      } else {
-        other.push(tx)
-      }
-    }
-    return { transferTransactions: transfersHistory, otherTransactions: other }
-  }, [activeTransactions])
 
   return (
     <Tabs
@@ -104,14 +90,13 @@ export const HomeTabs = ({
           api={transfersApi}
           preapprovalApi={preapprovalApi}
           onPendingCountChange={onPendingTransferCountChange}
-          historyTransactions={transferTransactions}
         />
       </TabContent>
       <TabContent
         value="activity"
         className={TAB_CONTENT_CLASS}
       >
-        <ActivityList transactions={otherTransactions} />
+        <ActivityList transactions={activeTransactions} />
       </TabContent>
     </Tabs>
   )
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 5481359a..2ee2c06a 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -7,7 +7,6 @@ import {
   transferStatusLabel,
   transferTimeLabel,
 } from '@/cip56/transfers'
-import { ActivityList } from '@/components/ActivityList'
 import { PrimaryButton, SecondaryButton } from '@/components/ui/Button'
 import { Switch } from '@/components/ui/Switch'
 import { Tooltip } from '@/components/ui/Tooltip'
@@ -17,7 +16,7 @@ import { useAmuletPreapproval } from '@/hooks/useAmuletPreapproval'
 import type { Cip56TransferApi } from '@/hooks/usePendingCip56Transfers'
 import { usePendingCip56Transfers } from '@/hooks/usePendingCip56Transfers'
 import { shortMiddle } from '@/utils/account'
-import type { AccountPublic, TransactionRecord } from '@/vault/types'
+import type { AccountPublic } from '@/vault/types'
 import { useVault } from '@/vault/useVault'
 
 export interface TransfersPanelProps {
@@ -25,7 +24,6 @@ export interface TransfersPanelProps {
   api?: Cip56TransferApi
   preapprovalApi?: AmuletPreapprovalApi
   onPendingCountChange?: (count: number) => void
-  historyTransactions?: TransactionRecord[]
 }
 
 interface TransferDetailRowProps {
@@ -207,13 +205,12 @@ const TransferCard = ({
   )
 }
 
-// Renders active CIP-56 transfers split by direction, plus this account's transfer history.
+// Renders active CIP-56 transfers split by direction; receivers can accept, senders watch.
 export const TransfersPanel = ({
   account,
   api,
   preapprovalApi,
   onPendingCountChange,
-  historyTransactions,
 }: TransfersPanelProps): JSX.Element => {
   const vault = useVault()
   const activeAccount = account ?? vault.primary ?? vault.accounts[0]
@@ -241,8 +238,6 @@ export const TransfersPanel = ({
     return { incoming: incomingTransfers, outgoing: outgoingTransfers }
   }, [transfers, activeAccount?.partyId])
 
-  const history = historyTransactions ?? []
-
   // Only incoming transfers need receiver action, so the badge counts those alone.
   useEffect(() => {
     onPendingCountChange?.(incoming.length)
@@ -281,7 +276,6 @@ export const TransfersPanel = ({
   }
 
   const hasActive = incoming.length > 0 || outgoing.length > 0
-  const hasContent = hasActive || history.length > 0
 
   return (
     <div className="flex min-h-full flex-col gap-3 px-1 pt-4 pb-2">
@@ -296,9 +290,11 @@ export const TransfersPanel = ({
         </div>
       )}
 
-      {!hasContent && !loading ? (
+      {!hasActive && !loading ? (
         <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 transfers yet</p>
+          <p className="m-0 text-[0.95rem] font-medium text-muted-foreground">
+            No pending transfers
+          </p>
         </div>
       ) : null}
 
@@ -330,15 +326,6 @@ export const TransfersPanel = ({
           ))}
         </div>
       ) : null}
-
-      {history.length > 0 ? (
-        <section className="flex flex-col">
-          <h2 className="m-0 px-1 pt-1 text-[0.8rem] font-semibold tracking-tight text-muted-foreground">
-            History
-          </h2>
-          <ActivityList transactions={history} />
-        </section>
-      ) : null}
     </div>
   )
 }
diff --git a/carpincho-wallet/test/components/HomeTabs.test.tsx b/carpincho-wallet/test/components/HomeTabs.test.tsx
index 070ecc2b..a3563adf 100644
--- a/carpincho-wallet/test/components/HomeTabs.test.tsx
+++ b/carpincho-wallet/test/components/HomeTabs.test.tsx
@@ -175,42 +175,6 @@ describe('HomeTabs navigation', () => {
     await screen.findByRole('tab', { name: 'Transfers 1' })
   })
 
-  it('routes transfer records to the Transfers tab and the rest to Activity', async () => {
-    // Scenario: transfer history is merged into the Transfers tab, so transfer
-    // records must not also appear under Activity. Non-transfer records stay there.
-    const transferRecord: TransactionRecord = {
-      id: 'tx-transfer',
-      accountId: ACCOUNT.id,
-      accountName: ACCOUNT.name,
-      partyId: ACCOUNT.partyId,
-      network: ACCOUNT.network,
-      method: 'cip56.transfer.create',
-      status: 'executed',
-      createdAt: Date.parse('2026-06-10T12:00:00.000Z'),
-      preparedTransactionHash: 'transfer-hash',
-      summary: 'Send 5 Amulet',
-    }
-    const otherRecord = txFor(ACCOUNT, 'tx-other', 'dApp execute')
-
-    renderHome(
-      baseVault(),
-      <HomeTabs
-        transactions={[transferRecord, otherRecord]}
-        preapprovalApi={inactivePreapprovalApi}
-      />,
-    )
-
-    // The Transfers tab is force-mounted, so its merged history is in the DOM already.
-    await screen.findByText('Send 5 Amulet')
-    assert.equal(screen.queryByText('dApp execute'), null)
-
-    await userEvent.click(screen.getByRole('tab', { name: 'Activity' }))
-
-    assert.equal(screen.getByText('dApp execute').textContent, 'dApp execute')
-    // The transfer record lives only in Transfers, never duplicated into Activity.
-    assert.equal(screen.getAllByText('Send 5 Amulet').length, 1)
-  })
-
   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.
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 3c9375b2..10a131f9 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -104,7 +104,7 @@ describe('TransfersPanel', () => {
 
     await screen.findByText('42.00 Amulet')
     await userEvent.click(screen.getByRole('button', { name: 'Accept' }))
-    await waitFor(() => assert.ok(screen.getByText('No transfers yet')))
+    await waitFor(() => assert.ok(screen.getByText('No pending transfers')))
 
     assert.deepEqual(calls, ['list', 'accept', 'list'])
   })
@@ -117,7 +117,7 @@ describe('TransfersPanel', () => {
 
     renderTransfers(api)
 
-    await screen.findByText('No transfers yet')
+    await screen.findByText('No pending transfers')
     assert.equal(screen.queryByText('Incoming transfers'), null)
   })
 
@@ -152,43 +152,6 @@ describe('TransfersPanel', () => {
     assert.equal(screen.queryByRole('button', { name: 'Accept' }), null)
   })
 
-  it('lists transfer history passed to the panel', async () => {
-    // Scenario: completed transfers come from the local transaction log and render
-    // in the Transfers tab alongside any active transfer instructions.
-    const api: Cip56TransferApi = {
-      listPendingIncomingTransfers: async () => [],
-    }
-
-    render(
-      <TestQueryClientProvider>
-        <TooltipProvider>
-          <VaultContext.Provider value={baseVault()}>
-            <TransfersPanel
-              api={api}
-              preapprovalApi={inactivePreapprovalApi}
-              historyTransactions={[
-                {
-                  id: 'tx-history-1',
-                  accountId: ACCOUNT.id,
-                  accountName: ACCOUNT.name,
-                  partyId: ACCOUNT.partyId,
-                  network: ACCOUNT.network,
-                  method: 'cip56.transfer.create',
-                  status: 'executed',
-                  createdAt: Date.parse('2026-06-10T12:00:00.000Z'),
-                  preparedTransactionHash: 'history-hash',
-                  summary: 'Send 5 Amulet',
-                },
-              ]}
-            />
-          </VaultContext.Provider>
-        </TooltipProvider>
-      </TestQueryClientProvider>,
-    )
-
-    await screen.findByText('Send 5 Amulet')
-  })
-
   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

From 04e2c2ba437c1e6e75e1c771ecf8f7dbcc2686e4 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:27:09 -0300
Subject: [PATCH 94/98] fix(carpincho): keep self-transfers acceptable in
 transfers tab

A transfer is outgoing only when sent to a different party; a transfer to one's
own party stays incoming so the receiver can still accept it. Make the accept
props optional on the transfer card and label each card by direction.
---
 .../src/components/TransfersPanel.tsx         | 28 ++++---
 .../test/components/TransfersPanel.test.tsx   | 82 +++++++++++++++++++
 2 files changed, 100 insertions(+), 10 deletions(-)

diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 2ee2c06a..94d7ca8b 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -110,8 +110,9 @@ interface TransferCardProps {
   direction: 'incoming' | 'outgoing'
   isExpanded: boolean
   onToggleDetails: (transferInstructionCid: string) => void
-  isAccepting: boolean
-  onAccept: (transferInstructionCid: string) => void
+  // Acceptance only applies to incoming transfers; senders just watch theirs settle.
+  isAccepting?: boolean
+  onAccept?: (transferInstructionCid: string) => void
 }
 
 // One active transfer instruction; receivers can accept, senders only watch it settle.
@@ -120,7 +121,7 @@ const TransferCard = ({
   direction,
   isExpanded,
   onToggleDetails,
-  isAccepting,
+  isAccepting = false,
   onAccept,
 }: TransferCardProps): JSX.Element => {
   const transferView = transfer.interfaceViewValue?.transfer
@@ -132,7 +133,12 @@ const TransferCard = ({
   const counterpartyLabel = direction === 'incoming' ? 'from' : 'to'
   const counterparty = direction === 'incoming' ? transferView?.sender : transferView?.receiver
   return (
-    <article className="rounded-md border border-border bg-surface px-3 py-3">
+    <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>
@@ -150,7 +156,7 @@ const TransferCard = ({
               className="px-3 py-1.5 text-[0.82rem]"
               disabled={isAccepting}
               onClick={() => {
-                onAccept(transfer.contractId)
+                onAccept?.(transfer.contractId)
               }}
             >
               {isAccepting ? 'Accepting...' : 'Accept'}
@@ -222,14 +228,18 @@ export const TransfersPanel = ({
     recordTransaction: vault.recordTransaction,
   })
 
-  // The ledger returns every instruction the party is a stakeholder on; the sender of an
-  // outgoing transfer cannot accept it, so only transfers we did not send are actionable.
+  // The ledger returns every instruction the party is a stakeholder on. A transfer is
+  // outgoing only when we sent it to someone else; if we are the receiver (including a
+  // transfer to ourselves) we are the one who must accept it, so it stays actionable.
   const { incoming, outgoing } = useMemo(() => {
     const partyId = activeAccount?.partyId
     const incomingTransfers: PendingTokenTransfer[] = []
     const outgoingTransfers: PendingTokenTransfer[] = []
     for (const transfer of transfers) {
-      if (transfer.interfaceViewValue?.transfer?.sender === partyId) {
+      const view = transfer.interfaceViewValue?.transfer
+      const isOutgoing =
+        partyId !== undefined && view?.sender === partyId && view.receiver !== partyId
+      if (isOutgoing) {
         outgoingTransfers.push(transfer)
       } else {
         incomingTransfers.push(transfer)
@@ -320,8 +330,6 @@ export const TransfersPanel = ({
               direction="outgoing"
               isExpanded={expandedCid === transfer.contractId}
               onToggleDetails={toggleDetails}
-              isAccepting={false}
-              onAccept={() => undefined}
             />
           ))}
         </div>
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index 10a131f9..cffe6428 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -152,6 +152,88 @@ describe('TransfersPanel', () => {
     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

From bb989acd5801de2126eec7b26b1312528ba13627 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:30:00 -0300
Subject: [PATCH 95/98] fix(carpincho): hide the active account from the
 account switcher

Selecting the account you are already on does nothing, so the switcher now
lists only the other accounts and shows a dedicated empty message when there
are none.
---
 .../src/components/AccountsDialog.tsx         | 13 +++++++----
 .../test/components/AccountsDialog.test.tsx   | 22 +++++++++++++------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/carpincho-wallet/src/components/AccountsDialog.tsx b/carpincho-wallet/src/components/AccountsDialog.tsx
index 566717d2..620b7ce4 100644
--- a/carpincho-wallet/src/components/AccountsDialog.tsx
+++ b/carpincho-wallet/src/components/AccountsDialog.tsx
@@ -26,15 +26,20 @@ export const AccountsDialog = ({ open, onOpenChange }: AccountsDialogProps): JSX
   const [removeTarget, setRemoveTarget] = useState<AccountPublic | null>(null)
 
   const sorted = useMemo(() => sortAccounts(v.accounts), [v.accounts])
+  // The active account is omitted: switching to the account you are already on is a no-op.
+  const others = useMemo(
+    () => sorted.filter((a) => a.id !== v.primary?.id),
+    [sorted, v.primary?.id],
+  )
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
     if (q === '') {
-      return sorted
+      return others
     }
-    return sorted.filter(
+    return others.filter(
       (a) => a.name.toLowerCase().includes(q) || a.partyId.toLowerCase().includes(q),
     )
-  }, [sorted, query])
+  }, [others, query])
 
   const isAdd = screen === 'add' && removeTarget === null
 
@@ -146,7 +151,7 @@ export const AccountsDialog = ({ open, onOpenChange }: AccountsDialogProps): JSX
             {/* 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">
-                No accounts match
+                {query.trim() === '' ? 'No other accounts' : 'No accounts match'}
               </p>
             ) : (
               filtered.map((a) => (
diff --git a/carpincho-wallet/test/components/AccountsDialog.test.tsx b/carpincho-wallet/test/components/AccountsDialog.test.tsx
index 3b97608a..74b649b1 100644
--- a/carpincho-wallet/test/components/AccountsDialog.test.tsx
+++ b/carpincho-wallet/test/components/AccountsDialog.test.tsx
@@ -80,12 +80,20 @@ describe('AccountsDialog', () => {
     cleanup()
   })
 
-  it('lists all accounts with name + address rows', async () => {
+  it('lists accounts other than the current one', async () => {
+    // Selecting the already-active account is a no-op, so it is left out of the switcher.
     renderDialog()
     const dialog = await screen.findByRole('dialog')
-    assert.ok((dialog.textContent ?? '').includes('alice'))
+    assert.equal((dialog.textContent ?? '').includes('alice'), false)
     assert.ok((dialog.textContent ?? '').includes('bob'))
-    assert.equal(within(dialog).getAllByTestId('account-item').length, 2)
+    assert.equal(within(dialog).getAllByTestId('account-item').length, 1)
+  })
+
+  it('shows an empty message when the current account is the only one', async () => {
+    renderDialog({ accounts: [ACCT_A], primary: ACCT_A })
+    await screen.findByRole('dialog')
+    assert.equal(screen.queryAllByTestId('account-item').length, 0)
+    assert.ok(screen.getByText(/no other accounts/i))
   })
 
   it('filters by the full party id substring, case-insensitively', async () => {
@@ -114,7 +122,7 @@ describe('AccountsDialog', () => {
       setPrimary: async (id) => void selected.push(id),
     })
     await screen.findByRole('dialog')
-    await user.click(screen.getAllByTestId('account-item')[1])
+    await user.click(screen.getAllByTestId('account-item')[0])
     assert.deepEqual(selected, ['b'])
     assert.ok(onOpenChange.includes(false))
   })
@@ -125,7 +133,7 @@ describe('AccountsDialog', () => {
     renderDialog({ removeAccount: async (id) => void removed.push(id) })
     await screen.findByRole('dialog')
 
-    const bobRow = screen.getAllByTestId('account-item')[1].parentElement as HTMLElement
+    const bobRow = screen.getAllByTestId('account-item')[0].parentElement as HTMLElement
     await user.click(within(bobRow).getByTestId('account-remove'))
 
     assert.ok(screen.getByText(/remove bob\?/i))
@@ -140,7 +148,7 @@ describe('AccountsDialog', () => {
     const { onOpenChange } = renderDialog({ removeAccount: async (id) => void removed.push(id) })
     await screen.findByRole('dialog')
 
-    const bobRow = screen.getAllByTestId('account-item')[1].parentElement as HTMLElement
+    const bobRow = screen.getAllByTestId('account-item')[0].parentElement as HTMLElement
     await user.click(within(bobRow).getByTestId('account-remove'))
     await user.click(screen.getByRole('button', { name: /close/i }))
 
@@ -170,7 +178,7 @@ describe('AccountsDialog', () => {
     const { onOpenChange } = renderDialog({ removeAccount: async () => undefined })
     await screen.findByRole('dialog')
 
-    const bobRow = screen.getAllByTestId('account-item')[1].parentElement as HTMLElement
+    const bobRow = screen.getAllByTestId('account-item')[0].parentElement as HTMLElement
     await user.click(within(bobRow).getByTestId('account-remove'))
     await user.click(screen.getByTestId('confirm-remove-action'))
 

From 529cd7e0d2f265d50e9c06bdac6fe534d30f1c38 Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:34:59 -0300
Subject: [PATCH 96/98] refactor(carpincho): extract transfer direction helper
 and tidy transfers tab

Move incoming/outgoing classification into a reusable transferDirection helper
in cip56/transfers, simplify the transfers tab empty/list rendering and accept
callback, and fold the account switcher filter into a single pass.
---
 carpincho-wallet/src/cip56/transfers.ts       | 13 +++++++
 .../src/components/AccountsDialog.tsx         | 15 +++-----
 .../src/components/TransfersPanel.tsx         | 33 ++++++-----------
 carpincho-wallet/test/cip56/transfers.test.ts | 37 +++++++++++++++++++
 4 files changed, 67 insertions(+), 31 deletions(-)

diff --git a/carpincho-wallet/src/cip56/transfers.ts b/carpincho-wallet/src/cip56/transfers.ts
index 59ee5a7c..650d4112 100644
--- a/carpincho-wallet/src/cip56/transfers.ts
+++ b/carpincho-wallet/src/cip56/transfers.ts
@@ -69,6 +69,19 @@ export const transferDescription = (transfer: PendingTokenTransfer): string | un
   return typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined
 }
 
+// Classifies a transfer relative to a party. The ledger returns every instruction the party
+// is a stakeholder on, so a transfer is outgoing only when the party sent it to someone else;
+// a transfer to oneself stays incoming because the party is still the one who must accept it.
+export const transferDirection = (
+  transfer: PendingTokenTransfer,
+  partyId: string | undefined,
+): 'incoming' | 'outgoing' => {
+  const view = transfer.interfaceViewValue?.transfer
+  return partyId !== undefined && view?.sender === partyId && view.receiver !== partyId
+    ? 'outgoing'
+    : 'incoming'
+}
+
 // Reads the current transfer status across SDK payload variants.
 export const transferStatusLabel = (transfer: PendingTokenTransfer): string =>
   transfer.interfaceViewValue?.status?.tag ??
diff --git a/carpincho-wallet/src/components/AccountsDialog.tsx b/carpincho-wallet/src/components/AccountsDialog.tsx
index 620b7ce4..4fad3445 100644
--- a/carpincho-wallet/src/components/AccountsDialog.tsx
+++ b/carpincho-wallet/src/components/AccountsDialog.tsx
@@ -27,19 +27,14 @@ export const AccountsDialog = ({ open, onOpenChange }: AccountsDialogProps): JSX
 
   const sorted = useMemo(() => sortAccounts(v.accounts), [v.accounts])
   // The active account is omitted: switching to the account you are already on is a no-op.
-  const others = useMemo(
-    () => sorted.filter((a) => a.id !== v.primary?.id),
-    [sorted, v.primary?.id],
-  )
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase()
-    if (q === '') {
-      return others
-    }
-    return others.filter(
-      (a) => a.name.toLowerCase().includes(q) || a.partyId.toLowerCase().includes(q),
+    return sorted.filter(
+      (a) =>
+        a.id !== v.primary?.id &&
+        (q === '' || a.name.toLowerCase().includes(q) || a.partyId.toLowerCase().includes(q)),
     )
-  }, [others, query])
+  }, [sorted, query, v.primary?.id])
 
   const isAdd = screen === 'add' && removeTarget === null
 
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 94d7ca8b..3b52ed9a 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -4,6 +4,7 @@ import type { PendingTokenTransfer } from '@/cip56/transfers'
 import {
   tokenDisplayLabel,
   transferDescription,
+  transferDirection,
   transferStatusLabel,
   transferTimeLabel,
 } from '@/cip56/transfers'
@@ -112,7 +113,7 @@ interface TransferCardProps {
   onToggleDetails: (transferInstructionCid: string) => void
   // Acceptance only applies to incoming transfers; senders just watch theirs settle.
   isAccepting?: boolean
-  onAccept?: (transferInstructionCid: string) => void
+  onAccept?: (transferInstructionCid: string) => void | Promise<void>
 }
 
 // One active transfer instruction; receivers can accept, senders only watch it settle.
@@ -156,7 +157,7 @@ const TransferCard = ({
               className="px-3 py-1.5 text-[0.82rem]"
               disabled={isAccepting}
               onClick={() => {
-                onAccept?.(transfer.contractId)
+                void onAccept?.(transfer.contractId)
               }}
             >
               {isAccepting ? 'Accepting...' : 'Accept'}
@@ -228,18 +229,12 @@ export const TransfersPanel = ({
     recordTransaction: vault.recordTransaction,
   })
 
-  // The ledger returns every instruction the party is a stakeholder on. A transfer is
-  // outgoing only when we sent it to someone else; if we are the receiver (including a
-  // transfer to ourselves) we are the one who must accept it, so it stays actionable.
   const { incoming, outgoing } = useMemo(() => {
     const partyId = activeAccount?.partyId
     const incomingTransfers: PendingTokenTransfer[] = []
     const outgoingTransfers: PendingTokenTransfer[] = []
     for (const transfer of transfers) {
-      const view = transfer.interfaceViewValue?.transfer
-      const isOutgoing =
-        partyId !== undefined && view?.sender === partyId && view.receiver !== partyId
-      if (isOutgoing) {
+      if (transferDirection(transfer, partyId) === 'outgoing') {
         outgoingTransfers.push(transfer)
       } else {
         incomingTransfers.push(transfer)
@@ -300,14 +295,6 @@ export const TransfersPanel = ({
         </div>
       )}
 
-      {!hasActive && !loading ? (
-        <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>
-      ) : null}
-
       {hasActive ? (
         <div className="flex flex-col gap-2">
           {incoming.map((transfer) => (
@@ -318,9 +305,7 @@ export const TransfersPanel = ({
               isExpanded={expandedCid === transfer.contractId}
               onToggleDetails={toggleDetails}
               isAccepting={acceptingCid === transfer.contractId}
-              onAccept={(cid) => {
-                void onAccept(cid)
-              }}
+              onAccept={onAccept}
             />
           ))}
           {outgoing.map((transfer) => (
@@ -333,7 +318,13 @@ export const TransfersPanel = ({
             />
           ))}
         </div>
-      ) : null}
+      ) : loading ? null : (
+        <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/cip56/transfers.test.ts b/carpincho-wallet/test/cip56/transfers.test.ts
index 7fa1300c..e7c4548f 100644
--- a/carpincho-wallet/test/cip56/transfers.test.ts
+++ b/carpincho-wallet/test/cip56/transfers.test.ts
@@ -4,6 +4,8 @@ import {
   acceptPendingTransfer,
   createTokenTransfer,
   listPendingIncomingTransfers,
+  type PendingTokenTransfer,
+  transferDirection,
 } from '@/cip56/transfers'
 import type { AccountPublic } from '@/vault/types'
 
@@ -221,3 +223,38 @@ describe('CIP-56 wallet-service transfer helpers', () => {
     assert.equal((recorded[0] as { method?: string } | undefined)?.method, 'cip56.transfer.create')
   })
 })
+
+describe('transferDirection', () => {
+  const transferWith = (sender?: string, receiver?: string): PendingTokenTransfer => ({
+    contractId: 'cid',
+    interfaceViewValue: { transfer: { sender, receiver } },
+  })
+
+  it('is outgoing only when the party sent it to someone else', () => {
+    assert.equal(
+      transferDirection(transferWith('alice::party', 'bob::party'), 'alice::party'),
+      'outgoing',
+    )
+  })
+
+  it('is incoming when the party is the receiver', () => {
+    assert.equal(
+      transferDirection(transferWith('bob::party', 'alice::party'), 'alice::party'),
+      'incoming',
+    )
+  })
+
+  it('is incoming for a transfer the party sent to itself', () => {
+    assert.equal(
+      transferDirection(transferWith('alice::party', 'alice::party'), 'alice::party'),
+      'incoming',
+    )
+  })
+
+  it('defaults to incoming when the party id is unknown', () => {
+    assert.equal(
+      transferDirection(transferWith('alice::party', 'bob::party'), undefined),
+      'incoming',
+    )
+  })
+})

From 7128061266b940c4a90db550997baa6724aec7ca Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:38:50 -0300
Subject: [PATCH 97/98] docs(carpincho): document direction-aware transfers and
 account switcher exclusion

Describe the transfers tab splitting pending transfers by direction via
transferDirection, the active account being omitted from the switcher, and the
pending list spanning both directions.
---
 carpincho-wallet/AGENTS.md       | 4 ++--
 carpincho-wallet/architecture.md | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/carpincho-wallet/AGENTS.md b/carpincho-wallet/AGENTS.md
index f3eae023..7d0fec55 100644
--- a/carpincho-wallet/AGENTS.md
+++ b/carpincho-wallet/AGENTS.md
@@ -13,10 +13,10 @@ 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 incoming CIP-56 transfers awaiting receiver acceptance), 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 pending-incoming-transfer count badge. 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`. 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-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 |
 | 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, incoming 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/*` |
+| 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/*` |
 | Linting | Biome (root config) | Single root `biome.json` + root `@biomejs/biome`; this project's rules (`@/` alias enforcement, Tailwind CSS parsing) live in a path `override`. Enforced via the root pre-commit hook; run `npm run lint` manually |
 | Node | 24 | inherited from `../.nvmrc` |
 | Naming | camelCase vars/functions, PascalCase components/types, kebab-case files | |
diff --git a/carpincho-wallet/architecture.md b/carpincho-wallet/architecture.md
index 43b23a1f..99ca3132 100644
--- a/carpincho-wallet/architecture.md
+++ b/carpincho-wallet/architecture.md
@@ -13,7 +13,7 @@
 | Language | TypeScript 5.9 (strict) | |
 | 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, incoming transfers, and Amulet preapproval status (5 s); imperative refetch after sends. Single `QueryClient` mounted in `App.tsx` |
+| 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) |
 | 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) |
@@ -46,7 +46,7 @@ src/
                     [data-theme] attribute on <html>
   cip56/            Token-standard domain logic: holdings/UTXO summaries, transfers, amount formatting,
                     and Amulet preapproval; calls wallet-service cip56.* / amulet.* RPC
-  hooks/            React Query wrappers over cip56/ (token holdings, incoming transfers,
+  hooks/            React Query wrappers over cip56/ (token holdings, pending transfers,
                     Amulet preapproval) with polling and imperative refetch
   config/           Runtime config persisted to localStorage (wallet-service RPC URL)
   extension/        Chrome extension scripts: background, content script, provider injection
@@ -122,7 +122,7 @@ Connects the extension popup UI to web pages and the extension background.
 Token balances, transfers, and Amulet auto-accept are layered on top of the wallet-service JSON-RPC bridge and React Query.
 
 - **`cip56/holdings.ts`** — Groups raw token UTXOs into per-instrument summaries (`summarizeTokenHoldings`) and exposes `listTokenHoldingSummaries` / `listTokenHoldings`, which call the wallet-service `cip56.listHoldingSummary` / `cip56.listHoldings` methods.
-- **`cip56/transfers.ts`** — `listPendingIncomingTransfers` reads pending CIP-56 transfers; `acceptPendingTransfer` and `createTokenTransfer` run write flows through `executePreparedCommands`.
+- **`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.

From 39683a76f5effb224a05d55fd589feb9d2615fae Mon Sep 17 00:00:00 2001
From: Gabito Esmiapodo <4015436+gabitoesmiapodo@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:50:26 -0300
Subject: [PATCH 98/98] feat(carpincho): show a loading spinner while tab data
 is fetching

Add a shared LoadingState spinner and render it in the Assets and Transfers
tabs while their first fetch is in flight, instead of leaving the body blank.
---
 carpincho-wallet/src/components/AssetsPanel.tsx | 13 ++++++++-----
 .../src/components/TransfersPanel.tsx           |  5 ++++-
 .../src/components/ui/LoadingState.tsx          | 17 +++++++++++++++++
 .../test/components/AssetsPanel.test.tsx        | 13 +++++++++++++
 .../test/components/TransfersPanel.test.tsx     | 13 +++++++++++++
 5 files changed, 55 insertions(+), 6 deletions(-)
 create mode 100644 carpincho-wallet/src/components/ui/LoadingState.tsx

diff --git a/carpincho-wallet/src/components/AssetsPanel.tsx b/carpincho-wallet/src/components/AssetsPanel.tsx
index 4201227b..07a62bb6 100644
--- a/carpincho-wallet/src/components/AssetsPanel.tsx
+++ b/carpincho-wallet/src/components/AssetsPanel.tsx
@@ -3,6 +3,7 @@ import type { TokenHoldingSummary } from '@/cip56/holdings'
 import type { Cip56SendApi } from '@/components/SendTokenForm'
 import { TokenDetailSheet } from '@/components/TokenDetailSheet'
 import { TokenRow } from '@/components/TokenRow'
+import { LoadingState } from '@/components/ui/LoadingState'
 import type { Cip56HoldingsApi } from '@/hooks/useTokenHoldings'
 import { useTokenHoldings } from '@/hooks/useTokenHoldings'
 import type { AccountPublic } from '@/vault/types'
@@ -37,11 +38,7 @@ export const AssetsPanel = ({ account, api, sendApi }: AssetsPanelProps): JSX.El
         </div>
       )}
 
-      {summaries.length === 0 && !loading ? (
-        <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 token holdings</p>
-        </div>
-      ) : (
+      {summaries.length > 0 ? (
         <div className="flex flex-col">
           {summaries.map((summary) => (
             <TokenRow
@@ -51,6 +48,12 @@ export const AssetsPanel = ({ account, api, sendApi }: AssetsPanelProps): JSX.El
             />
           ))}
         </div>
+      ) : loading ? (
+        <LoadingState label="Loading assets" />
+      ) : (
+        <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 token holdings</p>
+        </div>
       )}
 
       {selected !== null && (
diff --git a/carpincho-wallet/src/components/TransfersPanel.tsx b/carpincho-wallet/src/components/TransfersPanel.tsx
index 3b52ed9a..5226580c 100644
--- a/carpincho-wallet/src/components/TransfersPanel.tsx
+++ b/carpincho-wallet/src/components/TransfersPanel.tsx
@@ -9,6 +9,7 @@ import {
   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'
@@ -318,7 +319,9 @@ export const TransfersPanel = ({
             />
           ))}
         </div>
-      ) : loading ? null : (
+      ) : 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
diff --git a/carpincho-wallet/src/components/ui/LoadingState.tsx b/carpincho-wallet/src/components/ui/LoadingState.tsx
new file mode 100644
index 00000000..ea7bedd0
--- /dev/null
+++ b/carpincho-wallet/src/components/ui/LoadingState.tsx
@@ -0,0 +1,17 @@
+import { SPINNER_ICON } from '@/components/ui/icons'
+
+interface LoadingStateProps {
+  // Accessible name for the status region; screen readers announce it while the spinner shows.
+  label?: string
+}
+
+// Centered spinner for tab bodies waiting on their first fetch, so they never read as blank.
+export const LoadingState = ({ label = 'Loading' }: LoadingStateProps): JSX.Element => (
+  <div
+    role="status"
+    aria-label={label}
+    className="flex flex-1 flex-col items-center justify-center px-4 py-10 text-muted-foreground"
+  >
+    {SPINNER_ICON}
+  </div>
+)
diff --git a/carpincho-wallet/test/components/AssetsPanel.test.tsx b/carpincho-wallet/test/components/AssetsPanel.test.tsx
index d3e5015c..01758339 100644
--- a/carpincho-wallet/test/components/AssetsPanel.test.tsx
+++ b/carpincho-wallet/test/components/AssetsPanel.test.tsx
@@ -182,6 +182,19 @@ describe('AssetsPanel', () => {
     assert.equal(detailsCalls, 0)
   })
 
+  it('shows a spinner while holdings are loading instead of blank space', async () => {
+    // Scenario: the first holdings fetch is still in flight. The panel must show a
+    // loading indicator rather than an empty body, and not the no-holdings message.
+    const api: Cip56HoldingsApi = {
+      listTokenHoldingSummaries: () => new Promise(() => {}),
+    }
+
+    renderAssets(api)
+
+    await screen.findByRole('status', { name: /loading/i })
+    assert.equal(screen.queryByText('No token holdings'), null)
+  })
+
   it('shows an empty state when the party owns no tokens', async () => {
     // Scenario: a brand-new party has no holdings; the panel says so instead of
     // rendering an empty list.
diff --git a/carpincho-wallet/test/components/TransfersPanel.test.tsx b/carpincho-wallet/test/components/TransfersPanel.test.tsx
index cffe6428..045078a1 100644
--- a/carpincho-wallet/test/components/TransfersPanel.test.tsx
+++ b/carpincho-wallet/test/components/TransfersPanel.test.tsx
@@ -121,6 +121,19 @@ describe('TransfersPanel', () => {
     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