@myazahq/kyc-sdk-react-native 2.0.2 → 2.1.0

package/src/mrz/parse.ts

@@ -0,0 +1,178 @@
+// ---------------------------------------------------------------------------
+// MRZ parsing (ICAO 9303).
+//
+// The Machine Readable Zone off a document's photo page: TD3 (passports, 2×44)
+// and TD1 (ID cards, 3×30), validated with the 7-3-1 check digits.
+//
+// Unlike the server — which reads EXACT bytes off the chip's DG1 — this parses
+// OCR output, which misreads characters. Two defences:
+//
+//   1. Numeric-only fields (dates, check digits) get an OCR-confusion pass
+//      (O→0, I→1, S→5, …) before validation. It is applied ONLY where the spec
+//      says the field is numeric — running it over a name or a document number
+//      would corrupt letters that are genuinely there.
+//   2. Nothing is accepted unless EVERY check digit passes. That makes a bad
+//      frame self-rejecting: the scanner simply keeps looking, and a misread
+//      never becomes a wrong document number.
+//
+// The second point is what makes this safe to trust. A wrong document number
+// would be used as a BAC key (the chip refuses, harmlessly) or, worse, sent to
+// a paid government lookup that would return a confident "not found".
+// ---------------------------------------------------------------------------
+
+const WEIGHTS = [7, 3, 1];
+
+/** 7-3-1 weighted modulus-10 check digit over an MRZ field. */
+export function mrzCheckDigit(field: string): number {
+  let sum = 0;
+  for (let i = 0; i < field.length; i++) {
+    const c = field.charCodeAt(i);
+    // '0'–'9' → 0–9, 'A'–'Z' → 10–35, '<' (and anything else) → 0.
+    const v = c >= 48 && c <= 57 ? c - 48 : c >= 65 && c <= 90 ? c - 55 : 0;
+    sum += v * WEIGHTS[i % 3]!;
+  }
+  return sum % 10;
+}
+
+/**
+ * Letters OCR commonly returns in place of digits.
+ *
+ * Only ever applied to fields the spec defines as numeric. Applying it to a
+ * name or document number would turn a real 'O' into a '0'.
+ */
+function toDigits(s: string): string {
+  return s.replace(/[OQDU]/g, '0').replace(/[IL]/g, '1').replace(/Z/g, '2')
+    .replace(/S/g, '5').replace(/G/g, '6').replace(/T/g, '7').replace(/B/g, '8');
+}
+
+function digitOk(field: string, checkDigit: string): boolean {
+  const fixed = toDigits(checkDigit);
+  if (fixed.length !== 1) return false;
+  const code = fixed.charCodeAt(0);
+  if (code < 48 || code > 57) return false;
+  return mrzCheckDigit(field) === code - 48;
+}
+
+/**
+ * A YYMMDD field as a date.
+ *
+ * The century is inferred, because the MRZ does not carry it. Birth dates pivot
+ * on the current year (a two-digit year later than today must be last century);
+ * expiry pivots at 70, since eMRTD validity is at most ten years, so anything
+ * that high cannot be a future date.
+ */
+function mrzDate(raw: string, opts: { expiry: boolean; now: Date }): Date | null {
+  const yymmdd = toDigits(raw);
+  if (yymmdd.length !== 6 || !/^\d{6}$/.test(yymmdd)) return null;
+  const yy = Number(yymmdd.slice(0, 2));
+  const mm = Number(yymmdd.slice(2, 4));
+  const dd = Number(yymmdd.slice(4, 6));
+  if (mm < 1 || mm > 12 || dd < 1 || dd > 31) return null;
+  const nowYY = opts.now.getFullYear() % 100;
+  const century = opts.expiry ? (yy >= 70 ? 1900 : 2000) : yy > nowYY ? 1900 : 2000;
+  return new Date(Date.UTC(century + yy, mm - 1, dd));
+}
+
+/** Filler-stripped text, or null when the field was empty. */
+function clean(s: string): string | null {
+  const v = s.replace(/</g, ' ').replace(/\s+/g, ' ').trim();
+  return v === '' ? null : v;
+}
+
+/** The fields the BAC key needs, plus the biodata worth showing back. */
+export interface MrzScan {
+  format: 'TD1' | 'TD3';
+  documentNumber: string;
+  /** ISO date (YYYY-MM-DD) — the shape the rest of the SDK passes around. */
+  dateOfBirth: string;
+  dateOfExpiry: string;
+  firstName?: string;
+  lastName?: string;
+  nationality?: string;
+}
+
+const iso = (d: Date): string => d.toISOString().slice(0, 10);
+
+function parseTd3(l1: string, l2: string, now: Date): MrzScan | null {
+  const docNumber = l2.slice(0, 9);
+  const dob = l2.slice(13, 19);
+  const expiry = l2.slice(21, 27);
+  const personal = l2.slice(28, 42);
+  const personalCd = l2[42]!;
+  const composite = l2.slice(0, 10) + l2.slice(13, 20) + l2.slice(21, 43);
+
+  const valid =
+    digitOk(docNumber, l2[9]!) &&
+    digitOk(dob, l2[19]!) &&
+    digitOk(expiry, l2[27]!) &&
+    // An unused personal-number field carries either filler or '0' as its
+    // check digit, depending on the issuer.
+    (clean(personal) === null
+      ? personalCd === '<' || personalCd === '0'
+      : digitOk(personal, personalCd)) &&
+    digitOk(composite, l2[43]!);
+  if (!valid) return null;
+
+  const birth = mrzDate(dob, { expiry: false, now });
+  const expires = mrzDate(expiry, { expiry: true, now });
+  const number = clean(docNumber)?.replace(/ /g, '');
+  if (!birth || !expires || !number) return null;
+
+  const names = l1.slice(5).split('<<');
+  return {
+    format: 'TD3',
+    documentNumber: number,
+    dateOfBirth: iso(birth),
+    dateOfExpiry: iso(expires),
+    lastName: clean(names[0] ?? '') ?? undefined,
+    firstName: clean(names.slice(1).join(' ')) ?? undefined,
+    nationality: clean(l2.slice(10, 13)) ?? undefined,
+  };
+}
+
+function parseTd1(l1: string, l2: string, l3: string, now: Date): MrzScan | null {
+  const docNumber = l1.slice(5, 14);
+  const dob = l2.slice(0, 6);
+  const expiry = l2.slice(8, 14);
+  const composite =
+    l1.slice(5, 30) + l2.slice(0, 7) + l2.slice(8, 15) + l2.slice(18, 29);
+
+  const valid =
+    digitOk(docNumber, l1[14]!) &&
+    digitOk(dob, l2[6]!) &&
+    digitOk(expiry, l2[14]!) &&
+    digitOk(composite, l2[29]!);
+  if (!valid) return null;
+
+  const birth = mrzDate(dob, { expiry: false, now });
+  const expires = mrzDate(expiry, { expiry: true, now });
+  const number = clean(docNumber)?.replace(/ /g, '');
+  if (!birth || !expires || !number) return null;
+
+  const names = l3.split('<<');
+  return {
+    format: 'TD1',
+    documentNumber: number,
+    dateOfBirth: iso(birth),
+    dateOfExpiry: iso(expires),
+    lastName: clean(names[0] ?? '') ?? undefined,
+    firstName: clean(names.slice(1).join(' ')) ?? undefined,
+    nationality: clean(l2.slice(15, 18)) ?? undefined,
+  };
+}
+
+/**
+ * Parse a continuous MRZ string (88 chars = TD3, 90 = TD1).
+ *
+ * Returns null when it is not syntactically valid or ANY check digit fails —
+ * there is no partial success, because a partially-correct MRZ is a wrong
+ * document number wearing a plausible disguise.
+ */
+export function parseMrz(text: string, now: Date = new Date()): MrzScan | null {
+  const flat = text.toUpperCase().replace(/[^A-Z0-9<]/g, '');
+  if (flat.length === 88) return parseTd3(flat.slice(0, 44), flat.slice(44), now);
+  if (flat.length === 90) {
+    return parseTd1(flat.slice(0, 30), flat.slice(30, 60), flat.slice(60), now);
+  }
+  return null;
+}

package/src/mrz/textRecognizer.ts

@@ -0,0 +1,149 @@
+import { NitroModules } from 'react-native-nitro-modules';
+import type { BoxedHybridObject } from 'react-native-nitro-modules';
+import type { Frame } from 'react-native-vision-camera';
+
+import type { MyazaTextRecognizer } from '../specs/MyazaTextRecognizer.nitro';
+import { extractMrz } from './extract';
+import type { MrzScan } from './parse';
+
+// ---------------------------------------------------------------------------
+// The native text recogniser, reached from the camera-thread worklet.
+//
+// Same boxing dance as the face detector: the HybridObject is created on the JS
+// thread, boxed, and unboxed inside the worklet, so the frame never crosses the
+// bridge — only the recognised lines come back.
+//
+// A build without the native code (Expo Go, or a host app that has not rebuilt)
+// leaves `hasHybridObject` false and every call returns no lines. The MRZ step
+// then simply never finds one, which is the same as pointing the camera at a
+// blank wall — a capability that is absent rather than an app that crashes.
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolved LAZILY and re-tried until it appears.
+ *
+ * Creating it at module load is fragile in a way that fails SILENTLY: if this
+ * module evaluates before Nitro's registry is populated — Fast Refresh does
+ * this — the reference stays null for the session and every scan returns "no
+ * text", which looks exactly like a document the camera cannot read.
+ *
+ * The BOXED handle is created alongside on the JS thread; a worklet cannot
+ * construct one itself, so it must exist before the first frame arrives.
+ */
+function create(): MyazaTextRecognizer | null {
+  try {
+    return NitroModules.hasHybridObject('MyazaTextRecognizer')
+      ? NitroModules.createHybridObject<MyazaTextRecognizer>('MyazaTextRecognizer')
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+// EAGER, and it has to be. The worklet below captures `boxed` when the worklet
+// is CREATED, so a value that is null at that moment stays null on the camera
+// thread forever — every frame then returns no text, which looks exactly like a
+// camera that cannot read the document. (A lazy version of this silently killed
+// auto-capture.) The JS-side path re-tries via `resolve()` for the cold-start
+// case where the registry was not ready at import.
+let recognizer: MyazaTextRecognizer | null = create();
+// `let`, not `const`: if the eager create above ran before Nitro's registry was
+// populated, `resolve()` re-creates AND re-boxes. Leaving this const meant a
+// late resolution produced a working JS-side module with a null worklet handle
+// — the camera thread stayed blind while everything looked fine from JS.
+let boxed: BoxedHybridObject<MyazaTextRecognizer> | null = recognizer ? NitroModules.box(recognizer) : null;
+
+function resolve(): MyazaTextRecognizer | null {
+  if (!recognizer) {
+    recognizer = create();
+    if (recognizer) boxed = NitroModules.box(recognizer);
+  }
+  return recognizer;
+}
+
+/**
+ * Whether this build can recognise text at all.
+ *
+ * Also the WARM-UP: calling it resolves the module on the JS thread so the
+ * boxed handle exists by the time frames start arriving in the worklet.
+ */
+export function hasTextRecognizer(): boolean {
+  return resolve() !== null;
+}
+
+/**
+ * The bottom slice of the frame the MRZ occupies.
+ *
+ * Generous on purpose: the band tolerates FRAMING, not the document. A tighter
+ * crop sliced the MRZ off real captures in the server's own scanner, because
+ * the document does not fill the frame — the same mistake is easy to repeat
+ * here, and the cost is a scanner that never reads anything.
+ */
+export const MRZ_BAND_FRACTION = 0.55;
+
+/**
+ * Read the MRZ off a captured photo.
+ *
+ * This is the path the document step uses. Reading it from the picture the user
+ * just took is what spares them scanning the same passport a second time for
+ * the chip step — the MRZ IS the key that unlocks the chip.
+ *
+ * Returns null when nothing valid was found, which includes every document that
+ * has no MRZ at all. That is the ordinary case, not an error.
+ */
+export async function scanMrzFromImage(uri: string): Promise<MrzScan | null> {
+  const r = resolve();
+  if (r == null) return null;
+  try {
+    const { lines } = await r.recognizeTextInImage(uri, MRZ_BAND_FRACTION);
+    const banded = extractMrz(lines);
+    if (banded) return banded;
+    // Second pass over the WHOLE image. The band is an optimisation, not a
+    // truth: Android post-filters by line position rather than true ROI, and a
+    // capture whose document sits high (or whose EXIF orientation confused
+    // "bottom") can leave the real MRZ just outside the band. One extra pass
+    // on an already-captured still is cheap; sending the user to rescan the
+    // same passport at the chip step is not.
+    const { lines: allLines } = await r.recognizeTextInImage(uri, 1);
+    return extractMrz(allLines);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Recognise the MRZ band in a frame. A WORKLET — call it from `onFrame`.
+ *
+ * Returns an empty array when the recogniser is unavailable or found nothing,
+ * which is the ordinary case for most frames while the user is still aiming.
+ */
+export function recognizeMrzLines(frame: Frame): string[] {
+  'worklet';
+  if (boxed == null) return [];
+  try {
+    return boxed.unbox().recognizeText(frame, MRZ_BAND_FRACTION).lines;
+  } catch {
+    // A recogniser that throws on one frame must not take the scan down; the
+    // next frame gets its own attempt.
+    return [];
+  }
+}
+
+/**
+ * Recognise text across the WHOLE frame. A WORKLET — call it from `onFrame`.
+ *
+ * This is what auto-capture reads: identity comes from the printed words
+ * ("PASSPORT", "FRSC", "INEC"), which sit above the MRZ band and are cropped
+ * out by `recognizeMrzLines`. The MRZ is still recoverable from these lines —
+ * it is simply included rather than isolated — so one pass per frame answers
+ * both "which document is this" and "is its strip readable".
+ */
+export function recognizeAllLines(frame: Frame): string[] {
+  'worklet';
+  if (boxed == null) return [];
+  try {
+    return boxed.unbox().recognizeText(frame, 1).lines;
+  } catch {
+    return [];
+  }
+}

package/src/screens/ApplicantRoleStep.tsx

@@ -0,0 +1,331 @@
+import React, { useState } from 'react';
+import { View } from 'react-native';
+
+import { radius, spacing } from '../config/theme';
+import { useKyc, useKycConfig, useKycStore, useTheme } from '../components/runtime';
+import { MyazaText } from '../components/Typography';
+import { MyazaButton } from '../components/MyazaButton';
+import { MyazaInput } from '../components/MyazaInput';
+import { MyazaSelect } from '../components/MyazaSelect';
+import { Pressable } from 'react-native';
+import { Icon } from '../components/Icon';
+import { CountryFlag } from '../components/CountryFlag';
+import {
+  KEY_PERSON_ROLE_LABELS,
+  KEY_PERSON_ROLES,
+  isKeyPersonRowValid,
+  namesLooselyMatch,
+} from '../config/keyPeople';
+import type { ApplicantRole } from '../types/business';
+
+// ---------------------------------------------------------------------------
+// The applicant declares who they are to the business, then verifies their own
+// identity in the ordinary individual capture steps that follow.
+//
+// When key people were entered earlier, the applicant may BE one of them — so
+// the step first asks "which of these is you?" (pre-selected when the
+// consumer's userData name matches). Picking themselves flags that entry on
+// the submission and the server merges the two records: one person, one KYC,
+// one screening, no duplicate invite. "I'm not one of these" falls through to
+// the plain role + name form. Mirrors the web SDK's ApplicantRoleStep.
+// ---------------------------------------------------------------------------
+
+export const applicantRoleMeta = {
+  title: 'Now verify your own identity',
+  description:
+    'Tell us your role at the business, then verify your identity with a government-issued ID.',
+};
+
+const APPLICANT_ROLES: ApplicantRole[] = [...KEY_PERSON_ROLES, 'authorized_representative'];
+
+const APPLICANT_ROLE_LABELS: Record<ApplicantRole, string> = {
+  ...KEY_PERSON_ROLE_LABELS,
+  authorized_representative: 'Authorized representative',
+};
+
+/** "Richard Ingwe" → "RI" — the avatar monogram. */
+function initialsOf(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((t) => t[0]?.toUpperCase() ?? '')
+    .join('');
+}
+
+export function ApplicantRoleStep(): React.ReactElement {
+  const store = useKycStore();
+  const config = useKycConfig();
+  const { colors } = useTheme();
+  const stored = useKyc((s) => s.businessApplication);
+
+  // The valid entered people, keeping their ORIGINAL index — the payload flag
+  // is index-based, so the list and the submission can never disagree.
+  const people = stored.keyPeople
+    .map((row, index) => ({ row, index }))
+    .filter(({ row }) => isKeyPersonRowValid(row));
+  const hasPeople = people.length > 0;
+
+  const propName = [config.userData?.firstName, config.userData?.lastName]
+    .filter(Boolean)
+    .join(' ');
+
+  // Tri-state: a person's index, 'other', or nothing chosen yet. First arrival
+  // pre-selects the applicant's own entry when the userData name matches
+  // (they still confirm) — a stored choice always wins.
+  const [selection, setSelection] = useState<number | 'other' | null>(() => {
+    if (stored.applicantKeyPersonIndex !== null) return stored.applicantKeyPersonIndex;
+    if (stored.applicantRole) return 'other';
+    if (propName) {
+      const match = people.find(({ row }) => namesLooselyMatch(propName, row.name));
+      if (match) return match.index;
+    }
+    return null;
+  });
+  const [role, setRole] = useState<ApplicantRole | null>(stored.applicantRole);
+  // Pre-filled from the consumer's userData when nothing was typed yet — the
+  // applicant is usually the person the integrator already knows about.
+  const [name, setName] = useState(() => stored.applicantName || propName);
+
+  const handleContinue = (): void => {
+    if (typeof selection === 'number') {
+      const person = stored.keyPeople[selection];
+      if (!person) return;
+      store.getState().setApplicant(person.role, person.name.trim(), selection);
+      // Their entry already answered "where was your ID issued?" — the leg
+      // uses that country and the country-select step is skipped (see
+      // derive.hasCountrySelect).
+      if (person.country.trim() !== '') {
+        store.getState().setCountry(person.country.trim().toUpperCase());
+      }
+    } else {
+      if (!role) return;
+      store.getState().setApplicant(role, name, null);
+    }
+    store.getState().nextStep();
+  };
+
+  const canContinue = hasPeople
+    ? typeof selection === 'number' || (selection === 'other' && role !== null)
+    : role !== null;
+
+  return (
+    <View>
+      {/* Regulatory note card — the web SDK's ScanFace callout (rounded-xl,
+          p-4, 36px icon tile). */}
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          backgroundColor: colors.backgroundSecondary,
+          borderRadius: radius.sm,
+          padding: spacing.md,
+        }}
+      >
+        <View
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: radius.xs,
+            backgroundColor: colors.primary100,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginRight: spacing.sm + 4,
+          }}
+        >
+          <Icon name="scan-face" size={18} color={colors.primary} />
+        </View>
+        <MyazaText variant="bodySmall" style={{ flex: 1 }}>
+          Regulations require the person submitting a business application to verify their own
+          identity. This only takes a minute.
+        </MyazaText>
+      </View>
+
+      {hasPeople ? (
+        <>
+          <View style={{ height: spacing.lg }} />
+          <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.sm }}>
+            Are you one of the people you listed?
+          </MyazaText>
+          {people.map(({ row, index }) => (
+            <SelfCard
+              key={index}
+              name={row.name.trim()}
+              subtitle={KEY_PERSON_ROLE_LABELS[row.role]}
+              ownershipPct={row.ownershipPct.trim() || null}
+              country={row.country.trim() ? row.country.trim().toUpperCase() : null}
+              selected={selection === index}
+              onPress={() => setSelection(index)}
+            />
+          ))}
+          <SelfCard
+            name="I'm not one of these people"
+            other
+            selected={selection === 'other'}
+            onPress={() => setSelection('other')}
+          />
+          {typeof selection === 'number' ? (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                backgroundColor: colors.primary100,
+                borderRadius: radius.xs,
+                paddingHorizontal: spacing.sm + 4,
+                paddingVertical: spacing.sm + 2,
+                marginTop: spacing.xs,
+              }}
+            >
+              <Icon name="check" size={14} color={colors.primary} />
+              <MyazaText variant="bodySmall" style={{ flex: 1, marginLeft: spacing.xs + 2 }}>
+                You'll verify your identity at the end of this form — no separate invite link is
+                needed for you.
+              </MyazaText>
+            </View>
+          ) : null}
+        </>
+      ) : null}
+
+      {!hasPeople || selection === 'other' ? (
+        <>
+          <View style={{ height: spacing.lg }} />
+          <MyazaText variant="bodySmall" style={{ fontWeight: '600', marginBottom: spacing.xs }}>
+            Your role at the business
+          </MyazaText>
+          <MyazaSelect
+            value={role}
+            hint="Select your role"
+            sheetTitle="Your role"
+            options={APPLICANT_ROLES.map((option) => ({
+              value: option,
+              label: APPLICANT_ROLE_LABELS[option],
+            }))}
+            onChange={setRole}
+          />
+
+          <View style={{ height: spacing.md }} />
+          <MyazaInput
+            label="Full name (optional)"
+            value={name}
+            onChangeText={setName}
+            placeholder="Enter your full name"
+            autoCapitalize="words"
+          />
+        </>
+      ) : null}
+
+      <View style={{ height: spacing.xl }} />
+      <MyazaButton label="Continue" onPress={handleContinue} disabled={!canContinue} />
+    </View>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// One selectable "this is me" card — monogram avatar with the person's
+// ID-issuing-country flag badged on its corner, name + role/ownership, and a
+// radio dot. The "someone else" variant swaps the avatar for an add-person
+// icon on a dashed border. Mirrors the web SDK's ApplicantRoleStep cards 1:1.
+// ---------------------------------------------------------------------------
+
+function SelfCard({
+  name,
+  subtitle,
+  ownershipPct,
+  country,
+  other = false,
+  selected,
+  onPress,
+}: {
+  name: string;
+  subtitle?: string;
+  ownershipPct?: string | null;
+  country?: string | null;
+  /** The dashed "I'm not one of these people" variant. */
+  other?: boolean;
+  selected: boolean;
+  onPress: () => void;
+}): React.ReactElement {
+  const { colors } = useTheme();
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: selected }}
+      accessibilityLabel={name}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        borderWidth: selected ? 1.5 : 1,
+        borderStyle: other && !selected ? 'dashed' : 'solid',
+        borderColor: selected ? colors.primary : colors.border,
+        borderRadius: radius.sm,
+        backgroundColor: selected ? colors.primary50 : colors.background,
+        padding: spacing.md - 2,
+        marginBottom: spacing.sm,
+      }}
+    >
+      <View
+        style={{
+          width: 40,
+          height: 40,
+          borderRadius: 20,
+          backgroundColor: other && !selected ? colors.backgroundSecondary : colors.primary100,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {other ? (
+          <Icon name="user-plus" size={18} color={selected ? colors.primary : colors.textMuted} />
+        ) : (
+          <MyazaText variant="bodySmall" color={colors.primary} style={{ fontWeight: '700' }}>
+            {initialsOf(name)}
+          </MyazaText>
+        )}
+        {country ? (
+          <View
+            style={{
+              position: 'absolute',
+              bottom: -2,
+              right: -4,
+              borderRadius: 10,
+              borderWidth: 2,
+              borderColor: selected ? colors.primary50 : colors.background,
+              overflow: 'hidden',
+            }}
+          >
+            <CountryFlag country={country} size={16} />
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ flex: 1, minWidth: 0, marginLeft: spacing.sm + 4 }}>
+        <MyazaText variant="bodyMedium" numberOfLines={1} style={{ fontWeight: '600' }}>
+          {name}
+        </MyazaText>
+        {subtitle ? (
+          <MyazaText variant="bodySmall" color={colors.textMuted} numberOfLines={1} style={{ marginTop: 1 }}>
+            {subtitle}
+            {ownershipPct ? ` · ${ownershipPct}% ownership` : ''}
+          </MyazaText>
+        ) : null}
+      </View>
+
+      {/* Radio dot — filled with a check when selected. */}
+      <View
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: 10,
+          borderWidth: 2,
+          borderColor: selected ? colors.primary : colors.border,
+          backgroundColor: selected ? colors.primary : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginLeft: spacing.sm,
+        }}
+      >
+        {selected ? <Icon name="check" size={12} color={colors.background} /> : null}
+      </View>
+    </Pressable>
+  );
+}