add new home screen #1019

remicolin · 2025-09-08T22:51:27Z

Summary by CodeRabbit

New Features
- Home shows a scrollable, responsive ID card list; tap an item to open a new ID Details screen with data visibility toggle, Manage ID shortcut, proof history, and Connect ID action.
- QR code scan button added to the home bar.
Style
- Refreshed navigation bars, updated color tokens and platform-aware font handling for improved readability.
Chores
- Added native blur dependency for visual effects.
- Proof history now associates entries with selected IDs for clearer context.

coderabbitai · 2025-09-08T22:51:34Z

Caution

Review failed

The pull request is closed.

Walkthrough

Adds ID management UI and navigation, including IdCard layout, IdDetails screen/header, Home list updates, and proof-history association with documents (DB schema + runtime migration). Introduces BlurView dependency and color/font tokens; Propagation of documentId into proof history and related stores/providers.

Changes

Cohort / File(s)	Summary
Dependencies `app/package.json`	Adds `@react-native-community/blur@^4.4.1`.
Nav Bars `app/src/components/NavBar/HomeNavBar.tsx`, `app/src/components/NavBar/IdDetailsNavBar.tsx`, `app/src/components/NavBar/index.ts`	HomeNavBar: split left/right actions into two buttons (scan, clipboard / activity, settings), updated colors/timing, new QRCodeViewFinder navigation. Added new `IdDetailsNavBar` component and exported it.
ID Card & Home UI `app/src/components/homeScreen/idCard.tsx`, `app/src/screens/home/HomeScreen.tsx`	New responsive `IdCardLayout` component rendering MRZ and attributes (masking support). HomeScreen now loads document catalog/docs, shows scrollable list of IdCardLayout items, selection/navigation to IdDetails.
Id Details & Proof History UI `app/src/screens/home/IdDetailsScreen.tsx`, `app/src/screens/home/ProofHistoryList.tsx`	New `IdDetailsScreen` with visibility toggle, connect/manage actions, BlurView footer. `ProofHistoryList` implemented with grouping, pagination, and navigation to detail.
Navigation `app/src/navigation/home.ts`, `app/src/navigation/index.tsx`	Registers `IdDetails` route with custom header; minor type-only import added.
Proof history & DB `app/src/stores/database.ts`, `app/src/stores/proof-types.ts`, `app/src/stores/proofHistoryStore.ts`	Adds `documentId` column to `proof_history`, updates inserts/loaders to include `documentId`, adds runtime migration (ALTER TABLE) and retry logic. `ProofHistory` type updated.
Prove flow `app/src/screens/prove/ProveScreen.tsx`	Prove flow now loads document catalog and attaches `selectedDocumentId` to new proof history entries.
User store `app/src/stores/userStore.ts`	Adds `idDetailsDocumentId` state and setter to track the IdDetails selection.
Utilities `app/src/utils/colors.ts`, `app/src/utils/fonts.ts`	Adds `charcoal` color, adjusts `slate100`; makes `plexMono` platform-aware.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Home as HomeScreen
  participant Pass as PassportProvider
  participant Nav as Navigation
  participant IdS as IdDetailsScreen
  participant PHL as ProofHistoryList
  participant Store as ProofHistoryStore

  User->>Home: open screen
  Home->>Pass: loadDocumentCatalog() + getAllDocuments()
  Pass-->>Home: catalog, documents
  User->>Home: tap document
  Home->>Nav: navigate('IdDetails', { id })
  Nav->>IdS: mount with id
  IdS->>Pass: getAllDocuments() + loadDocumentCatalog()
  Pass-->>IdS: document, catalog
  IdS->>PHL: render ProofHistoryList(documentId)
  PHL->>Store: loadMoreHistory(documentId)
  Store-->>PHL: grouped proofs

sequenceDiagram
  autonumber
  participant Prove as ProveScreen
  participant Pass as PassportProvider
  participant PHS as ProofHistoryStore
  participant DB as Database

  Prove->>Pass: loadDocumentCatalog()
  Pass-->>Prove: { selectedDocumentId }
  Prove->>PHS: addProofHistory(..., documentId)
  PHS->>DB: insertProof(row with documentId)
  alt DB schema has column
    DB-->>PHS: insert OK
  else DB missing column
    DB->>DB: ALTER TABLE add documentId DEFAULT ''
    DB->>PHS: retry insert
    DB-->>PHS: insert OK
  end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Start of Web App #689 — Modifies proof history DB schema and types; directly related to the added documentId column and loaders.
Remove noisy console logs #838 — Touches database and proof-history flows; overlaps in migration and store changes.
SELF-702: Refactor navigation structure and dev utilities #994 — Updates HomeNavBar and QR/Proof navigation; intersects with navbar and routing changes here.

Suggested labels

codex

Suggested reviewers

transphorm
aaronmgdr

Poem

New cards flutter in a scroll of light,
Details bloom with a tap just right.
Proofs now tether to IDs’ thread,
A blur at the bottom, softly spread.
Migrations hum, the schema sings—connect and tread 🌟

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
		  - name: "Undocumented Breaking Changes"
			  mode: "warning"
			  instructions: |
				  Flag potential breaking changes that are not documented:
				  1. Identify changes to public APIs/exports, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints (including removed/renamed items and changes to types, required params, return values, defaults, or behavior).
				  2. Ignore purely internal/private changes (e.g., code not exported from package entry points or marked internal).
				  3. Verify documentation exists: a "Breaking Change" section in the PR description and updates to CHANGELOG.md.

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9997049 and 2958927.

📒 Files selected for processing (5)

app/src/navigation/index.tsx (1 hunks)
app/src/screens/home/HomeScreen.tsx (3 hunks)
app/src/screens/home/IdDetailsScreen.tsx (1 hunks)
app/src/stores/userStore.ts (3 hunks)
app/src/utils/fonts.ts (1 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch app/new-home-screen-2

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai

Actionable comments posted: 11

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

app/package.json (1)

58-59: Avoid double building deps in test:build (CI time/cost hit)

test:build runs build:deps, then yarn test runs build:deps again. Split tests to a test:only script to remove redundant work.

Apply within this hunk:
-    "test:build": "yarn build:deps && yarn types && node ./scripts/bundle-analyze-ci.cjs ios && yarn test",
+    "test:build": "yarn build:deps && yarn types && node ./scripts/bundle-analyze-ci.cjs ios && yarn test:only",
And add/update outside this range (scripts section):
{
  "scripts": {
    "test:only": "jest --passWithNoTests && node --test scripts/tests/*.cjs",
    "test": "yarn build:deps && yarn test:only"
  }
}

app/src/stores/database.ts (1)

109-168: Include documentId in the web IndexedDB schema and writes
The database.web.ts implementation of insertProof never persists proof.documentId. In the web DB’s upgrade/schema setup (e.g. in initWebStore or onupgradeneeded), add documentId to the object-store’s keyPath or indices, and update insertProof to include proof.documentId when calling store.add/put.

app/src/components/NavBar/HomeNavBar.tsx (1)

25-71: Block token leakage: remove sensitive logs, avoid query params for secrets, add timeout, and always clear the clipboard

Currently, the token is logged to console and sent as a query parameter. Both are high-risk: tokens end up in logs, analytics, proxy/server logs, and crash reports. Also, the fetch lacks timeout/abort and doesn’t check response.ok. Clear the clipboard on all paths to reduce exposure window.

Apply the patch below (keeps current GET endpoint to avoid backend breakage, but mitigates logging, adds timeout, validates response, and clears clipboard in finally). Follow-up patch below switches to POST if the server supports it.

@@
-  const handleConsumeToken = async () => {
-    const content = await Clipboard.getString();
-    console.log('Consume token content:', content);
-    const uuidRegex =
-      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-    if (!content || !uuidRegex.test(content)) {
-      console.log('Invalid clipboard content');
-      props.navigation.navigate('DeferredLinkingInfo');
-      return;
-    }
-    if (uuidRegex.test(content)) {
-      try {
-        const response = await fetch(
-          `https://api.self.xyz/consume-deferred-linking-token?token=${content}`,
-        );
-        console.log('Consume token response:', response);
-        const result = await response.json();
-        console.log('Consume token result:', result);
-        if (result.status !== 'success') {
-          throw new Error(
-            `Failed to consume token: ${result.message || 'Unknown error'}`,
-          );
-        }
-        const selfApp: SelfApp = JSON.parse(result.data.self_app);
-        console.log('Consume token selfApp:', selfApp);
-        useSelfAppStore.getState().setSelfApp(selfApp);
-        useSelfAppStore.getState().startAppListener(selfApp.sessionId);
-        try {
-          Clipboard.setString('');
-        } catch {}
-        props.navigation.navigate('Prove');
-      } catch (error) {
-        console.error('Error consuming token:', error);
-        if (
-          error instanceof Error &&
-          error.message.includes('Token not found or expired')
-        ) {
-          try {
-            Clipboard.setString('');
-          } catch {}
-          props.navigation.navigate('DeferredLinkingInfo');
-        }
-      }
-    } else {
-      console.log('Clipboard content is not a UUID');
-    }
-  };
+  const handleConsumeToken = async () => {
+    let content: string | undefined;
+    try {
+      content = await Clipboard.getString();
+    } catch {
+      props.navigation.navigate('DeferredLinkingInfo');
+      return;
+    }
+    const uuidRegex =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    if (!content || !uuidRegex.test(content)) {
+      try { await Clipboard.setString(''); } catch {}
+      props.navigation.navigate('DeferredLinkingInfo');
+      return;
+    }
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000);
+    try {
+      const response = await fetch(
+        `https://api.self.xyz/consume-deferred-linking-token?token=${encodeURIComponent(content)}`,
+        { signal: controller.signal },
+      );
+      if (!response.ok) {
+        const text = await response.text().catch(() => '');
+        throw new Error(`HTTP ${response.status}: ${text.slice(0, 120)}`);
+      }
+      const result = await response.json();
+      if (result.status !== 'success' || !result.data?.self_app) {
+        throw new Error('Failed to consume token');
+      }
+      const selfApp: SelfApp = JSON.parse(result.data.self_app);
+      if (!selfApp?.sessionId) throw new Error('Invalid self_app payload');
+      useSelfAppStore.getState().setSelfApp(selfApp);
+      useSelfAppStore.getState().startAppListener(selfApp.sessionId);
+      props.navigation.navigate('Prove');
+    } catch (error) {
+      console.error('Error consuming token:', (error as Error)?.message);
+      props.navigation.navigate('DeferredLinkingInfo');
+    } finally {
+      clearTimeout(timeoutId);
+      try { await Clipboard.setString(''); } catch {}
+    }
+  };

If the backend supports POST (recommended), replace only the fetch call with:

-      const response = await fetch(
-        `https://api.self.xyz/consume-deferred-linking-token?token=${encodeURIComponent(content)}`,
-        { signal: controller.signal },
-      );
+      const response = await fetch('https://api.self.xyz/consume-deferred-linking-token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ token: content }),
+        signal: controller.signal,
+      });

🧹 Nitpick comments (4)

app/src/screens/home/HomeScreen.tsx (2)

127-127: Use the imported color constant instead of hardcoded value

You've imported slate50 but are using the hardcoded hex value #F8FAFC instead.

-      backgroundColor={'#F8FAFC'}
+      backgroundColor={slate50}

142-164: Add empty state UI when no documents are available

When there are no documents to display, the screen shows an empty ScrollView without any indication to the user about what to do next.

Add an empty state message after the map function:

         {documentCatalog.documents.map((metadata: DocumentMetadata) => {
           // ... existing code ...
         })}
+        {documentCatalog.documents.length === 0 && (
+          <YStack
+            flex={1}
+            justifyContent="center"
+            alignItems="center"
+            paddingVertical={50}
+          >
+            <Text color={slate500} fontSize={16} textAlign="center">
+              No documents available.{'\n'}
+              Please add a document to get started.
+            </Text>
+          </YStack>
+        )}
       </ScrollView>

app/src/components/homeScreen/idCard.tsx (2)

549-578: Improve date parsing logic for edge cases

The date formatting function makes assumptions about century that could fail for edge cases (e.g., people born in 1999 vs 2001, or passports expiring in 2099).

Consider using a more robust approach:

function formatDateFromYYMMDD(
  dateString: string,
  isExpiry: boolean = false,
): string {
  if (dateString.length !== 6 || !/^\d{6}$/.test(dateString)) {
    return 'Invalid Date';
  }

  const yy = parseInt(dateString.substring(0, 2), 10);
  const mm = dateString.substring(2, 4);
  const dd = dateString.substring(4, 6);

  const currentYear = new Date().getFullYear();
  const currentYearLastTwo = currentYear % 100;
  
  let year: number;
  if (isExpiry) {
    // Expiry dates: assume within next 20 years
    year = yy >= currentYearLastTwo 
      ? 2000 + yy 
      : 2100 + yy;
  } else {
    // Birth dates: assume within past 100 years
    year = yy <= currentYearLastTwo 
      ? 2000 + yy 
      : 1900 + yy;
  }

  return `${dd}/${mm}/${year}`;
}

71-72: Potential layout calculation issue with shadow margins

The card width calculation subtracts 16px for margins but the actual margin is only 8px at the bottom. This could cause horizontal alignment issues.

-  const cardWidth = screenWidth * 0.95 - 16; // 90% of screen width minus margin space
+  const cardWidth = screenWidth * 0.95; // 95% of screen width

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ff678b3 and 9997049.

⛔ Files ignored due to path filters (5)

app/ios/Podfile.lock is excluded by !**/*.lock
app/src/images/icons/checkmark_gray.svg is excluded by !**/*.svg
app/src/images/icons/epassport.svg is excluded by !**/*.svg
app/src/images/logo_gray.svg is excluded by !**/*.svg
yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (16)

app/package.json (1 hunks)
app/src/components/NavBar/HomeNavBar.tsx (2 hunks)
app/src/components/NavBar/IdDetailsNavBar.tsx (1 hunks)
app/src/components/NavBar/index.ts (1 hunks)
app/src/components/homeScreen/idCard.tsx (1 hunks)
app/src/navigation/home.ts (3 hunks)
app/src/navigation/index.tsx (2 hunks)
app/src/screens/home/HomeScreen.tsx (3 hunks)
app/src/screens/home/IdDetailsScreen.tsx (1 hunks)
app/src/screens/home/ProofHistoryList.tsx (1 hunks)
app/src/screens/prove/ProveScreen.tsx (2 hunks)
app/src/stores/database.ts (3 hunks)
app/src/stores/proof-types.ts (1 hunks)
app/src/stores/proofHistoryStore.ts (1 hunks)
app/src/utils/colors.ts (2 hunks)
app/src/utils/fonts.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/technical-specification.mdc)

**/*.{ts,tsx}: Define IdentityCommitment with fields: commitment (Poseidon hash), nullifier (domain-separated), timestamp (UTC number), version (circuit version), documentType ('passport' | 'eu_id_card')
Define DSCKeyCommitment with fields: publicKeyHash (Poseidon hash), certificateChain (hashes), revocationStatus (boolean), issuer (country code)
Define VerificationConfig with fields: circuitVersion (semver), complianceRules array, timeWindow (seconds, 24h), clockDrift (±5 min), trustAnchors, revocationRoots, timeSource (NTP), nullifierScope (domain separation)

Files:

app/src/stores/proof-types.ts
app/src/navigation/home.ts
app/src/navigation/index.tsx
app/src/screens/prove/ProveScreen.tsx
app/src/utils/colors.ts
app/src/components/NavBar/IdDetailsNavBar.tsx
app/src/screens/home/IdDetailsScreen.tsx
app/src/stores/proofHistoryStore.ts
app/src/utils/fonts.ts
app/src/components/NavBar/index.ts
app/src/screens/home/HomeScreen.tsx
app/src/screens/home/ProofHistoryList.tsx
app/src/components/NavBar/HomeNavBar.tsx
app/src/components/homeScreen/idCard.tsx
app/src/stores/database.ts

app/src/**/*.{ts,tsx,js,jsx}

⚙️ CodeRabbit configuration file

app/src/**/*.{ts,tsx,js,jsx}: Review React Native TypeScript code for:

Component architecture and reusability

State management patterns

Performance optimizations

TypeScript type safety

React hooks usage and dependencies

Navigation patterns

Files:

app/src/stores/proof-types.ts
app/src/navigation/home.ts
app/src/navigation/index.tsx
app/src/screens/prove/ProveScreen.tsx
app/src/utils/colors.ts
app/src/components/NavBar/IdDetailsNavBar.tsx
app/src/screens/home/IdDetailsScreen.tsx
app/src/stores/proofHistoryStore.ts
app/src/utils/fonts.ts
app/src/components/NavBar/index.ts
app/src/screens/home/HomeScreen.tsx
app/src/screens/home/ProofHistoryList.tsx
app/src/components/NavBar/HomeNavBar.tsx
app/src/components/homeScreen/idCard.tsx
app/src/stores/database.ts

app/package.json

📄 CodeRabbit inference engine (.cursor/rules/mobile-sdk-migration.mdc)

Expose a 'test:build' script in the app's package.json that builds deps, types, performs bundle analysis, and runs tests

Files:

app/package.json

🧠 Learnings (12)