Skip to content

dev: add /dev/kyc-ui audit page#2113

Open
kushagrasarathe wants to merge 3 commits into
mainfrom
kyc-ui-audit-page
Open

dev: add /dev/kyc-ui audit page#2113
kushagrasarathe wants to merge 3 commits into
mainfrom
kyc-ui-audit-page

Conversation

@kushagrasarathe
Copy link
Copy Markdown
Contributor

@kushagrasarathe kushagrasarathe commented May 27, 2026

Screenshot 2026-05-27 at 11 33 15 AM Screenshot 2026-05-27 at 11 33 40 AM Screenshot 2026-05-27 at 11 33 53 AM Screenshot 2026-05-27 at 11 34 09 AM

dev-only page showing all KYC UI states, modals, copy audit, and a
proposed "Where you can pay" page design that separates identity
confirmation from per-region payment status. splits manteca into
separate argentina/brazil entries matching the geo-scoped enrollment.
@vercel
Copy link
Copy Markdown

vercel Bot commented May 27, 2026

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

Project Deployment Actions Updated (UTC)
peanut-wallet Ready Ready Preview, Comment May 27, 2026 6:06am

Request Review

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 27, 2026

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 912567e0-1abf-4b88-9797-e60b8a9b7369

📥 Commits

Reviewing files that changed from the base of the PR and between 9a8dc7b and c0997d0.

📒 Files selected for processing (1)
  • src/app/dev/kyc-ui/page.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • src/app/dev/kyc-ui/page.tsx

Walkthrough

A new Next.js development page for KYC UI auditing was added at src/app/dev/kyc-ui/page.tsx. The page provides tabbed views to preview a proposed regions flow, catalog current KYC state components, interact with modal variants, and review copy quality and principles.

Changes

KYC UI Audit Page

Layer / File(s) Summary
Setup, imports, and mock rejection data
src/app/dev/kyc-ui/page.tsx
Module setup with client directive, React state imports, and UI/KYC component imports. Mock ProviderRejectionInfo constants represent fixable, blocked, ToS, and field-specific rejection scenarios for state catalog rendering.
Presentational helper components
src/app/dev/kyc-ui/page.tsx
StateCard wraps KYC state panels with optional issue badges and problem text. CopyAuditRow displays severity-based badges alongside current and proposed copy in a card layout.
ProposedRegionsPage implementation
src/app/dev/kyc-ui/page.tsx
ProposedRegionsPage renders payment-method ActionListCards grouped by region and conditionally shows "ID confirmed", deadline notices, unlock preview for new users, and action-needed vs completed status badges.
Proposed tab UI
src/app/dev/kyc-ui/page.tsx
Four scenario blocks (new user, RFI-required, EEA deadline, happy path) each render ProposedRegionsPage within a card.
Current States catalog
src/app/dev/kyc-ui/page.tsx
StateCard wrappers around inline KYC state components with example props, including provider rejection instances backed by mock rejection data; action callbacks are stubbed.
Modals preview tab
src/app/dev/kyc-ui/page.tsx
Buttons toggle openModal to show InitiateKycModal variants and GuestVerificationModal; modals render conditionally based on openModal.
Copy Audit tab and example
src/app/dev/kyc-ui/page.tsx
CopyAuditRow list of copy issues, a Principles section, and a Good example card whose button switches to the Modals tab and opens a modal after a short timeout.
Page render orchestration
src/app/dev/kyc-ui/page.tsx
Default KycUiAuditPage manages activeTab and openModal state and composes the four tab contents.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

enhancement

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title 'dev: add /dev/kyc-ui audit page' accurately summarizes the main change—adding a new development audit page for KYC UI at /dev/kyc-ui. It is concise, clear, and directly reflects the changeset's primary objective.
Description check ✅ Passed The pull request description provides visual documentation (screenshots) of the new audit page and relates directly to the changeset, though screenshots alone offer limited textual context about the implementation details and rationale for the changes.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot added the enhancement New feature or request label May 27, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 27, 2026

Code-analysis diff

Painscore total: 5721.23 → 5729.52 (+8.29)
Findings: +5 net (+5 new, -0 resolved)

🆕 New findings (5)

  • critical complexity — src/app/dev/kyc-ui/page.tsx — CC 50, MI 65.7, SLOC 152
  • medium high-mdd — src/app/dev/kyc-ui/page.tsx:307 — KycUiAuditPage: MDD 156.7 (uses across many lines from declarations)
  • medium high-mdd — src/app/dev/kyc-ui/page.tsx:131 — ProposedRegionsPage: MDD 68.3 (uses across many lines from declarations)
  • medium structural-dup — src/app/dev/kyc-ui/page.tsx:228 — 22 duplicate lines / 0 tokens with src/app/dev/kyc-ui/page.tsx:202
  • low missing-return-type — src/app/dev/kyc-ui/page.tsx:307 — KycUiAuditPage: exported fn missing return type annotation

📈 Painscore deltas (top movers)

File Before After Δ
src/app/dev/kyc-ui/page.tsx 0.0 8.3 +8.3

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 27, 2026

🧪 UI test report — ✅ all green

Suites

  • unit: 1090 ran, 0 failed, 0 skipped, 18.3s

📊 Coverage (unit)

metric %
statements 47.3%
branches 28.8%
functions 29.5%
lines 47.1%
⏱ 10 slowest test cases
time test
0.3s src/app/actions/__tests__/api-headers-extended.test.ts › should not include apiKey in updateUserById body
0.3s src/app/actions/__tests__/api-headers.test.ts › should include Content-Type in updateUserById
0.1s src/app/(mobile-ui)/qr-pay/__tests__/qr-pay-states.test.tsx › Manteca PIX form ready shows merchant card + amount input + pay button
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle valid 9-digit US account
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle invalid ETH address (too short)
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle invalid ETH address (invalid characters)
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle invalid ETH address (missing 0x prefix)
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle valid US account with spaces
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle too long for US account
0.1s src/components/Global/GeneralRecipientInput/__tests__/GeneralRecipientInput.test.tsx › should handle minimum length (6 digits) US account
📍 Inline annotations are in the **Unit test report** check above. Coverage artifact: `coverage-unit`. Generated by `.github/workflows/tests.yml`.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
src/app/dev/kyc-ui/page.tsx (1)

590-594: 💤 Low value

Optional: Add cleanup for setTimeout to prevent state updates on unmounted component.

If the component unmounts during the 100ms delay, setOpenModal will be called on an unmounted component. For a dev page, this is low risk, but you could add cleanup using a ref or useEffect.

♻️ Optional fix with cleanup
 export default function KycUiAuditPage() {
     const [openModal, setOpenModal] = useState<string | null>(null)
     const [activeTab, setActiveTab] = useState<'proposed' | 'states' | 'modals' | 'audit'>('proposed')
     const noop = () => {}
+    const timeoutRef = useRef<NodeJS.Timeout>()
+
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current)
+            }
+        }
+    }, [])

     return (
         ...
                         onClick={() => {
                             setActiveTab('modals')
-                            setTimeout(() => setOpenModal('initiate_cross_region'), 100)
+                            timeoutRef.current = setTimeout(() => setOpenModal('initiate_cross_region'), 100)
                         }}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/dev/kyc-ui/page.tsx` around lines 590 - 594, The onClick handler
schedules setOpenModal('initiate_cross_region') with setTimeout which can call
state on an unmounted component; capture the timeout ID (e.g., in a ref like
timeoutRef) when calling setTimeout in the component that contains setActiveTab
and setOpenModal, and clear it in a useEffect cleanup (or clearTimeout before
scheduling another) so the pending timeout is cancelled on unmount and avoids
calling setOpenModal after unmount.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@src/app/dev/kyc-ui/page.tsx`:
- Around line 590-594: The onClick handler schedules
setOpenModal('initiate_cross_region') with setTimeout which can call state on an
unmounted component; capture the timeout ID (e.g., in a ref like timeoutRef)
when calling setTimeout in the component that contains setActiveTab and
setOpenModal, and clear it in a useEffect cleanup (or clearTimeout before
scheduling another) so the pending timeout is cancelled on unmount and avoids
calling setOpenModal after unmount.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0010776a-2fc0-4622-8155-ad4325d3d710

📥 Commits

Reviewing files that changed from the base of the PR and between be8b3b4 and 8b97ed2.

📒 Files selected for processing (1)
  • src/app/dev/kyc-ui/page.tsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant