chore(pos): design review — POS app redesign & polish

[ignaciosantise]

Overview

Design-review pass across the pos-app: redesigns and polish for the Logs, Settings, Transactions and payment flows, plus a batch of fixes for theming, accessibility and native-navigation edge cases.

Highlights

Screens & flows

• Redesigned Transactions list, cards, filters and detail modal
• Redesigned Settings into grouped sections
• Redesigned Logs screen (expandable cards, type/date filters, copy entry, clear confirmation, empty-state/footer/perf polish)
• Redesigned toast as an inverted pill at the top of the screen
• Animated payment-success reveal (expanding circle + success animation)

Fixes & polish

• Hide the header back button and swipe-back while a payment is confirming, and disable swipe-back on the terminal success/failure screens — derived from payment status to avoid a react-native-screens Android crash (ScreenStackFragment added into a non-stack container)
• Success circle animation now covers the full screen (center on true screen center; safe-area padding moved to the content layer)
• Respect success-screen safe areas; refresh theme colors and dark-mode contrast
• Accessibility labels on the main action buttons
• Guard Android-only Bluetooth permission request by platform
• Route to Settings on invalid_api_key payment failure
• Gate NFC/HCE behind EXPO_PUBLIC_NFC_HCE_ENABLED
• Removed wallet theme variants (default only); centralized CTA button text

Notes

Opened as a draft for review. See individual commits for scoped changes.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
pos-demo	Ready	Preview	Aug 21, 2026 7:32pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
react-native-appkit	Ignored	Preview	Aug 21, 2026 7:32pm
react-native-walletkit	Ignored	Preview	Aug 21, 2026 7:32pm

[claude]

Claude finished @ignaciosantise's task in 4m 13s —— View job

---

Code Review

• Gather context
• Read key changed files
• Run breaking changes subagent → ✅ No breaking changes found
• Run data classification subagent
• Compile findings

---

🚨 PR Too Large
Files: 98 Lines: ~4703 (2706 additions + 1997 deletions) Severity: HIGH Category: maintainability

This PR mixes design system refactor, NFC feature flag, variant removal, and 3 screen redesigns. Suggested split:

• PR 1: Design system (button.tsx, pressable.tsx, theme.ts, filter-buttons.tsx, status-badge.tsx) + tests
• PR 2: Logs screen (log-card.tsx, log-entries-row.tsx, clear-logs-modal.tsx, logs.tsx, utils/logs.ts)
• PR 3: Payment flow (payment-success.tsx, payment-failure.tsx, scan.tsx, success-animation.tsx)
• PR 4: Settings + variant removal + NFC feature flag (settings.tsx, variants.ts, feature-flags.ts, withHceFeatureFlag.js, HceModule.kt)

---

Found 6 issue(s)

Issue 1: Full API response bodies (with transaction/wallet data) logged without filtering or retention cap

ID: dcl-client-response-data-in-logs-c7e1
File: dapps/pos-app/services/client.ts:86
Severity: MEDIUM
Category: security

Context:

• Pattern: After every successful API call, response: data is logged in full to useLogsStore. For transaction-list endpoints, data contains PaymentRecord[] objects with buyer wallet addresses (CAIP-10), transaction.hash, settlement.txHash, token amounts, and fiat amounts. Request body is also logged on both success and error paths (lines 84, 103, 118). The log store has no TTL or size cap, and buildLogText in utils/logs.ts serializes the full data object to the clipboard.
• Risk: Wallet addresses linked to natural persons are PII under GDPR/similar frameworks. Full financial records are retained in-memory indefinitely.
• Impact: Any log export (clipboard copy, bug report, MDM capture, screen recording) includes full payment history since last restart.
• Trigger: Accumulates on every transaction in normal operation.

Recommendation: Strip or mask buyer.accountCaip10, transaction.hash, and settlement.txHash before logging (e.g. first 6 + last 4 chars). Add a log entry count cap to useLogsStore (e.g., last 100 entries). Fix this →

---

Issue 2: renderHeaderTitle creates a new component type on every parent render

ID: layout-header-title-remount-a3f1
File: dapps/pos-app/app/_layout.tsx:83
Severity: MEDIUM
Category: performance

Context:

• Pattern: renderHeaderTitle("Settings") is called inside the RootLayout render body; each call allocates a new HeaderTitle closure and returns it as options.headerTitle for a Stack.Screen.
• Risk: React Navigation compares headerTitle by reference. A new function reference causes the header to unmount and remount.
• Impact: Visible header flicker on theme changes, orientation changes, or any state update triggering a RootLayout re-render.
• Trigger: Any state update in RootLayout (e.g. color scheme change, font load completion).

Recommendation: Define stable header components at module scope:

// Outside the component
const SettingsHeader = () => (
  <ThemedText fontSize={18} style={{ fontWeight: "500" }}>Settings</ThemedText>
);
// In Stack.Screen
options={{ headerTitle: SettingsHeader }}

---

Issue 3: maskPathIds false positive for long versioned/named path segments

ID: api-mask-path-false-positive-c2e8
File: dapps/pos-app/utils/api.ts:25
Severity: LOW
Category: code_quality

Context:

• Pattern: segment.length >= 16 && /[A-Za-z]/.test(segment) && /\d/.test(segment) matches any ≥16-char segment mixing letters and digits, including versioned slugs like v2-merchant-settings.
• Risk: Legitimate route segments get masked to :id, grouping unrelated endpoints in logs.
• Impact: Debugging becomes harder — distinct endpoints look identical in the log view.

Recommendation: Require ≥3 digits to reduce false positives:

if (
  segment.length >= 16 &&
  (segment.match(/\d/g) ?? []).length >= 3 &&
  /[A-Za-z]/.test(segment)
) {
  return ":id";
}

---

Issue 4: Two setTimeout calls with identical delay in payment-success.tsx

ID: payment-success-redundant-timeouts-7b4d
File: dapps/pos-app/app/payment-success.tsx:155
Severity: LOW
Category: code_quality

Context:

• Pattern: themeBackgroundTimeout and successAnimationTimeout both fire at contentRevealDelay (700 ms) and each sets one boolean state flag. Two timers, two separate re-renders.
• Impact: React may not batch these across the timeout boundary on React Native ≤18's bridged renderer, causing a brief intermediate render with mismatched flags.

Recommendation:

const revealTimeout = setTimeout(() => {
  setIsThemeBackgroundVisible(true);
  setIsSuccessAnimationVisible(true);
}, contentRevealDelay);
return () => clearTimeout(revealTimeout);

---

Issue 5: Duplicate tintColor on expo-image in settings.tsx

ID: settings-printer-tintcolor-dupe-f9a3
File: dapps/pos-app/app/settings.tsx:369
Severity: LOW
Category: code_quality

Context:

• Pattern: tintColor is passed both in style (ignored by expo-image) and as a direct prop. The style version has no effect and misleads future maintainers.

Recommendation: Remove tintColor from the style object; keep only the prop:

<Image
  source={require("@/assets/images/printer.png")}
  style={styles.printerIcon}
  tintColor={theme["text-primary"]}
  cachePolicy="memory-disk"
/>

---

Issue 6: Pre-existing — EXPO_PUBLIC_DEFAULT_CUSTOMER_API_KEY bakes API key into JS bundle

ID: dcl-merchant-config-api-key-in-bundle-a3f2
File: dapps/pos-app/utils/merchant-config.ts (pre-existing, not changed in this PR)
Severity: MEDIUM
Category: security

Context:

• Pattern: process.env.EXPO_PUBLIC_DEFAULT_CUSTOMER_API_KEY is read at build time and inlined into the distributed bundle (APK/IPA/web). Any real value is extractable by unpacking the binary.
• Risk: Leaked Api-Key credential allows unauthorized callers to impersonate the merchant, submit fraudulent payment requests, or access transaction history.
• Impact: Compliance finding — credentials must not be embedded in client-side bundles.

Note: This is pre-existing and not introduced by this PR; surfaced here for awareness. A separate fix via a runtime provisioning channel (existing useUrlCredentials hook, QR-code flow, or device registration API) is recommended.

[ignaciosantise]

Re: finding #6 (EXPO_PUBLIC_DEFAULT_CUSTOMER_API_KEY inlined into the bundle) — this is only a test key, not a production credential, so no real secret is exposed. We are reworking credentials handling soon, which will address this properly. Leaving as-is for now.

[Copilot]

Pull request overview

Design-review pass for dapps/pos-app, focusing on UI polish and flow robustness while adding better logging/filters, unified components (button/pressable/toast), and feature-gating for NFC/HCE to avoid platform edge cases.

Changes:

• Redesigned Logs/Settings/Transactions UI building blocks (new cards, filters, sections, modals) and centralized transaction-status display metadata.
• Refreshed theming and component primitives (new Button, shared Pressable, updated toast behavior/positioning, contrast tweaks).
• Added build-time NFC/HCE kill-switch (JS + config plugin + native Android module gating) and improved logging (masked API paths, log filters).

Reviewed changes

Copilot reviewed 63 out of 99 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
dapps/pos-app/utils/types.ts	Adds log-level filter type used by Logs UI/store.
dapps/pos-app/utils/transaction-status.ts	Centralizes transaction status → label/color/icon mapping.
dapps/pos-app/utils/toasts.tsx	Expands toast types (info/warning/loading) and fixes mappings.
dapps/pos-app/utils/printer.ts	Guards Android-only Bluetooth permission request by platform.
dapps/pos-app/utils/payment-errors.ts	Refines payment error copy and exports INVALID_API_KEY.
dapps/pos-app/utils/payment-errors.test.ts	Updates tests to match revised payment error messages.
dapps/pos-app/utils/navigation.ts	Simplifies reset navigation to dismissTo behavior.
dapps/pos-app/utils/misc.ts	Improves date formatting and adds spoken countdown formatter.
dapps/pos-app/utils/misc.test.ts	Updates/extends tests for countdown formatting changes.
dapps/pos-app/utils/logs.ts	Adds log formatting, filtering, and copy serialization helpers.
dapps/pos-app/utils/feature-flags.ts	Introduces build-time NFC/HCE feature flag helper.
dapps/pos-app/utils/date-range.ts	Extracts shared date-range options for filters.
dapps/pos-app/utils/api.ts	Adds URL path ID-masking helper for safer logging.
dapps/pos-app/utils/api.test.ts	Adds test coverage for maskPathIds.
dapps/pos-app/store/useSettingsStore.ts	Updates defaults/migrations (variant removal, date filter reset) and bumps persist version.
dapps/pos-app/store/useLogsStore.ts	Adds persisted log filters and actions; resets filters on clear.
dapps/pos-app/services/client.ts	Improves API logging (method + masked endpoint) and includes method in error logs.
dapps/pos-app/plugins/withHceFeatureFlag.js	Injects AndroidManifest meta-data for native HCE feature gating.
dapps/pos-app/modules/hce/android/src/main/java/com/reown/mobilepos/hce/HceModule.kt	Gates native HCE enable/disable behavior on manifest flag.
dapps/pos-app/jest.setup.js	Removes unused WC project env var from test setup.
dapps/pos-app/hooks/use-theme-color.ts	Disables variant color merging and uses base palette only.
dapps/pos-app/hooks/use-merchant-flow.ts	Reuses formatCountdown for lockout messaging.
dapps/pos-app/constants/variants.ts	Reduces shipped variants to default while preserving structure for future re-enable.
dapps/pos-app/constants/theme.ts	Refreshes accent colors, adds warning token, and improves dark surface contrast token.
dapps/pos-app/constants/printer-logos.ts	Removes Money20/20 printer logo constant, leaving default logo.
dapps/pos-app/components/transaction-detail-modal.tsx	Improves copy affordances, truncation, and moves toast to top with safe-area offset.
dapps/pos-app/components/transaction-card.tsx	Redesigns transaction card layout and uses status meta + updated date formatting.
dapps/pos-app/components/toast.tsx	Redesigns toast UI, adds loading state, and new icon assets.
dapps/pos-app/components/success-animation.tsx	Adds Skia-based one-shot success animation with pause/resume behavior.
dapps/pos-app/components/status-badge.tsx	Uses shared status meta and new badge icon behavior.
dapps/pos-app/components/settings-section.tsx	Introduces grouped Settings section wrapper component.
dapps/pos-app/components/settings-item.tsx	Adds caret variants and migrates interaction to shared Pressable.
dapps/pos-app/components/settings-bottom-sheet.tsx	Adds optional subtitle and updates close affordance.
dapps/pos-app/components/radio-list.tsx	Uses updated surface token for unselected rows.
dapps/pos-app/components/pressable.tsx	Adds shared Pressable wrapper around pressto with a11y wiring.
dapps/pos-app/components/pressable.test.tsx	Adds unit coverage for new Pressable wrapper.
dapps/pos-app/components/pin-modal.tsx	Updates key/cancel button styling to align with new surface tokens.
dapps/pos-app/components/numeric-keyboard.tsx	Migrates keys to shared Pressable and updated surface token.
dapps/pos-app/components/log-entries-row.tsx	Adds Settings “View logs” row with count + pill CTA.
dapps/pos-app/components/log-entries-row.test.tsx	Tests log entries row rendering and interaction.
dapps/pos-app/components/log-card.tsx	Adds expandable log card with copy/share affordance and animations.
dapps/pos-app/components/filter-buttons.tsx	Generalizes filter buttons to a config array and new styling.
dapps/pos-app/components/empty-state.tsx	Updates CTA handling to use new Button API and styling.
dapps/pos-app/components/clear-logs-modal.tsx	Adds “clear logs” confirmation bottom sheet modal.
dapps/pos-app/components/card.tsx	Migrates pressable card behavior to shared Pressable.
dapps/pos-app/components/button.tsx	Replaces prior generic pressable button with a themed, typed Button component.
dapps/pos-app/components/button.test.tsx	Adds unit coverage for new Button variants/sizing/disabled state.
dapps/pos-app/assets/lottie/Success.json	Adds new success animation asset.
dapps/pos-app/assets/images/wc-logo-dark.png	Adds/updates WalletConnect logo asset naming.
dapps/pos-app/app/settings.tsx	Redesigns Settings layout into sections; adds logs row; gates NFC; adds footer print action.
dapps/pos-app/app/scan.tsx	Gates NFC/HCE by feature flag; improves a11y countdown announcements; adjusts header back/gestures.
dapps/pos-app/app/payment-success.tsx	Updates success screen animation layering, safe-area handling, and new success animation.
dapps/pos-app/app/payment-failure.tsx	Routes invalid API key failures to Settings; updates visuals and Button usage.
dapps/pos-app/app/logs.tsx	Redesigns logs screen with filters, empty states, and clear confirmation flow.
dapps/pos-app/app/index.tsx	Redesigns home actions with responsive layout and improved a11y labels/hints.
dapps/pos-app/app/amount.tsx	Migrates primary CTA to new Button API and simplifies styling.
dapps/pos-app/app/activity.tsx	Uses shared date-range options and redesigned filters/empty states.
dapps/pos-app/app/_layout.tsx	Updates headers, toast placement, adds mono font, and disables gestures on terminal screens.
dapps/pos-app/app.json	Adds HCE feature-flag plugin, new splash assets, and registers mono font assets.
dapps/pos-app/AGENTS.md	Updates agent guidance to reflect variant removal and refreshed project notes.
dapps/pos-app/.env.example	Adds NFC/HCE build-time flag env var; removes WC project id.
dapps/pos-app/tests/store/useSettingsStore.test.ts	Updates variant-related tests and adds migration coverage.
dapps/pos-app/tests/services/client.test.ts	Updates expectations for new API success log message/data.
dapps/pos-app/tests/hooks/use-url-credentials.test.ts	Updates log-count expectations for additional “Credentials updated” log.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.