@primer-io/react-native 2.46.0 → 3.0.0-beta.0

package/src/Components/PrimerCheckoutSheet.tsx

@@ -0,0 +1,37 @@
+import { CheckoutSheet } from './internal/checkout-sheet/CheckoutSheet';
+import { CheckoutFlow } from './internal/checkout-flow/CheckoutFlow';
+
+export interface PrimerCheckoutSheetProps {
+  /** Whether the sheet is visible. Drives show/hide animation. */
+  visible: boolean;
+  /** Called when the sheet finishes its dismiss animation (fully hidden). */
+  onDismiss?: () => void;
+  /** Called when the user requests dismissal (backdrop tap, Android back). */
+  onRequestDismiss?: () => void;
+  /** Whether tapping the backdrop dismisses the sheet. Default: true. */
+  dismissOnBackdropPress?: boolean;
+}
+
+/**
+ * Pre-built checkout sheet that renders the full checkout flow:
+ * loading screen → method selection → payment forms.
+ *
+ * Must be rendered inside a PrimerCheckoutProvider.
+ */
+export function PrimerCheckoutSheet({
+  visible,
+  onDismiss,
+  onRequestDismiss,
+  dismissOnBackdropPress,
+}: PrimerCheckoutSheetProps) {
+  return (
+    <CheckoutSheet
+      visible={visible}
+      onDismiss={onDismiss}
+      onRequestDismiss={onRequestDismiss}
+      dismissOnBackdropPress={dismissOnBackdropPress}
+    >
+      <CheckoutFlow onCancel={onRequestDismiss} />
+    </CheckoutSheet>
+  );
+}

package/src/Components/PrimerPaymentMethodList.tsx

@@ -0,0 +1,82 @@
+import { useMemo, useCallback } from 'react';
+import { ActivityIndicator, FlatList, View, StyleSheet } from 'react-native';
+import { usePrimerTheme } from './internal/theme';
+import type { PrimerTokens } from './internal/theme';
+import { usePrimerPaymentMethods } from './hooks/usePrimerPaymentMethods';
+import { PaymentMethodButton } from './internal/ui/PaymentMethodButton';
+import type { PaymentMethodItem } from './types/PaymentMethodTypes';
+import type { PrimerPaymentMethodListProps } from './types/PrimerPaymentMethodListTypes';
+
+export function PrimerPaymentMethodList({
+  data,
+  include,
+  exclude,
+  onSelect,
+  onLoad,
+  style,
+}: PrimerPaymentMethodListProps) {
+  const tokens = usePrimerTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const hook = usePrimerPaymentMethods(
+    data != null
+      ? {}
+      : {
+          include,
+          exclude,
+          onLoad,
+        }
+  );
+  const paymentMethods = data ?? hook.paymentMethods;
+  const isLoading = data != null ? false : hook.isLoading;
+
+  const handlePress = useCallback(
+    (item: PaymentMethodItem) => {
+      onSelect(item);
+    },
+    [onSelect]
+  );
+
+  const Separator = useCallback(() => <View style={styles.separator} />, [styles.separator]);
+
+  if (isLoading) {
+    return (
+      <View style={[styles.centered, style]}>
+        <ActivityIndicator size="small" color={tokens.colors.primary} />
+      </View>
+    );
+  }
+
+  if (paymentMethods.length === 0) {
+    return <View style={style} />;
+  }
+
+  return (
+    <View style={style}>
+      <FlatList
+        data={paymentMethods}
+        keyExtractor={(item) => item.type}
+        renderItem={({ item }) => <PaymentMethodButton item={item} onPress={() => handlePress(item)} />}
+        ItemSeparatorComponent={Separator}
+        scrollEnabled={false}
+      />
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { spacing } = tokens;
+
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    centered: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: spacing.large,
+    },
+    separator: {
+      height: spacing.small,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}

package/src/Components/PrimerVaultedPaymentMethod.tsx

@@ -0,0 +1,234 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import type { TextStyle } from 'react-native';
+
+import { PrimerAnalytics } from './analytics';
+import { usePrimerTheme } from './internal/theme';
+import type { PrimerTokens } from './internal/theme';
+import { usePrimerLocalization } from './internal/localization';
+import { CheckoutRoute } from './internal/navigation/types';
+import { useNavigation } from './internal/navigation/useNavigation';
+import { CheckoutButton, VaultedCardCvvRow } from './internal/ui';
+import { useCardNetworkDescriptor } from './hooks/useCardNetworkDescriptor';
+import { usePrimerVaultManager } from './hooks/usePrimerVaultManager';
+import { usePrimerCheckout } from './hooks/usePrimerCheckout';
+import type { PrimerVaultedPaymentMethodProps, VaultedPaymentMethodItem } from './types/VaultedPaymentMethodTypes';
+
+const CARD_PAYMENT_METHOD_TYPE = 'PAYMENT_CARD';
+
+export const VAULTED_PAYMENT_METHOD_ROW_HEIGHT = 68;
+
+export function PrimerVaultedPaymentMethod({ data, onPay, style }: PrimerVaultedPaymentMethodProps) {
+  const tokens = usePrimerTheme();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const { t } = usePrimerLocalization();
+
+  const hook = usePrimerVaultManager();
+  const { setCvvInputVisible } = usePrimerCheckout();
+  const { replace } = useNavigation();
+  const method = data !== undefined ? data : hook.activeMethod;
+
+  const requiresCvvInput = hook.cvvInputVisible;
+  const [cvvValue, setCvvValue] = useState('');
+
+  const network = method?.rawMethod.paymentInstrumentData?.network ?? null;
+  const isCard = method?.paymentInstrumentType === CARD_PAYMENT_METHOD_TYPE;
+  const shouldRequireCvv = hook.requiresVaultedCardCvv && isCard;
+  const descriptor = useCardNetworkDescriptor(network);
+  const expectedCvvLength = descriptor.cvvLength;
+  const isCvvComplete = !requiresCvvInput || cvvValue.length === expectedCvvLength;
+
+  useEffect(() => {
+    setCvvInputVisible(false);
+    setCvvValue('');
+  }, [method?.id, setCvvInputVisible]);
+
+  useEffect(() => {
+    if (hook.vaultDisplayMode !== 'expanded') return;
+    if (!requiresCvvInput) return;
+    void PrimerAnalytics.trackEvent('VAULT_CVV_REQUIRED_DISMISSED', {
+      vaultedMethodId: method?.id ?? '',
+    });
+    setCvvInputVisible(false);
+    setCvvValue('');
+  }, [hook.vaultDisplayMode, requiresCvvInput, method?.id, setCvvInputVisible]);
+
+  // Recover if the merchant flag flips false mid-session while the CVV row is open —
+  // otherwise the next Pay tap would still try to submit with a CVV.
+  useEffect(() => {
+    if (hook.requiresVaultedCardCvv) return;
+    if (!requiresCvvInput) return;
+    setCvvInputVisible(false);
+    setCvvValue('');
+  }, [hook.requiresVaultedCardCvv, requiresCvvInput, setCvvInputVisible]);
+
+  const handlePress = useCallback(() => {
+    if (!method) return;
+    if (onPay) {
+      onPay(method);
+      return;
+    }
+    if (requiresCvvInput) {
+      if (cvvValue.length !== expectedCvvLength) return;
+      void PrimerAnalytics.trackEvent('VAULT_CVV_SUBMITTED', {
+        vaultedMethodId: method.id,
+        network: network ?? '',
+      });
+      replace(CheckoutRoute.processing);
+      void hook.pay({ cvv: cvvValue });
+      return;
+    }
+    if (shouldRequireCvv) {
+      // Commit the selection so the layout collapses to lite — this is also what the
+      // dismiss effect above listens for via vaultDisplayMode === 'expanded'.
+      hook.selectVaultedMethodId(method.id);
+      void PrimerAnalytics.trackEvent('VAULT_CVV_REQUIRED_RENDERED', {
+        vaultedMethodId: method.id,
+        network: network ?? '',
+        expectedCvvLength: String(expectedCvvLength),
+      });
+      setCvvInputVisible(true);
+      return;
+    }
+    replace(CheckoutRoute.processing);
+    void hook.pay();
+  }, [
+    method,
+    onPay,
+    hook,
+    replace,
+    requiresCvvInput,
+    cvvValue,
+    expectedCvvLength,
+    shouldRequireCvv,
+    network,
+    setCvvInputVisible,
+  ]);
+
+  if (!method) return null;
+
+  const maskedNumber = method.last4 != null ? t('primer_vault_format_masked', { last4: method.last4 }) : null;
+  const expiryText =
+    method.expiryMonth != null && method.expiryYear != null
+      ? t('primer_vault_format_expires', { month: method.expiryMonth, year: method.expiryYear })
+      : null;
+
+  return (
+    <View style={[styles.outer, style]}>
+      <View style={styles.tile}>
+        <View style={styles.row}>
+          <View style={styles.leftCol}>
+            {method.cardholderName != null && (
+              <Text style={styles.primaryText} numberOfLines={1}>
+                {method.cardholderName}
+              </Text>
+            )}
+            <View style={styles.brandRow}>
+              {method.brandIconUri != null && (
+                <Image source={{ uri: method.brandIconUri }} style={styles.brandIcon} resizeMode="contain" />
+              )}
+              {method.brandName != null && (
+                <Text style={styles.secondaryText} numberOfLines={1}>
+                  {method.brandName}
+                </Text>
+              )}
+            </View>
+          </View>
+          <View style={styles.rightCol}>
+            {maskedNumber != null && <Text style={styles.mediumText}>{maskedNumber}</Text>}
+            {expiryText != null && <Text style={styles.secondaryText}>{expiryText}</Text>}
+          </View>
+        </View>
+        {requiresCvvInput && (
+          <VaultedCardCvvRow
+            value={cvvValue}
+            onChangeValue={setCvvValue}
+            cvvLabel={descriptor.cvvLabel}
+            maxLength={descriptor.cvvLength}
+            autoFocus
+          />
+        )}
+      </View>
+      <CheckoutButton
+        title={t('primer_common_button_pay')}
+        variant="primary"
+        onPress={handlePress}
+        disabled={!isCvvComplete}
+      />
+    </View>
+  );
+}
+
+function createStyles(tokens: PrimerTokens) {
+  const { colors, spacing, radii, borders, typography } = tokens;
+
+  /* eslint-disable react-native/no-unused-styles */
+  return StyleSheet.create({
+    brandIcon: {
+      height: 16,
+      width: 22.4,
+    },
+    brandRow: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: spacing.xsmall,
+    },
+    leftCol: {
+      flex: 1,
+      gap: spacing.xsmall,
+      justifyContent: 'center',
+    },
+    mediumText: {
+      color: colors.textPrimary,
+      fontFamily: typography.bodyMedium.fontFamily,
+      fontSize: typography.bodyMedium.fontSize,
+      fontWeight: typography.bodyMedium.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.bodyMedium.letterSpacing,
+      lineHeight: typography.bodyMedium.lineHeight,
+      textAlign: 'right',
+    },
+    outer: {
+      backgroundColor: colors.surface,
+      borderRadius: radii.large,
+      gap: spacing.small,
+      padding: spacing.small,
+      width: '100%',
+    },
+    primaryText: {
+      color: colors.textPrimary,
+      fontFamily: typography.bodyLarge.fontFamily,
+      fontSize: typography.bodyLarge.fontSize,
+      fontWeight: typography.bodyLarge.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.bodyLarge.letterSpacing,
+      lineHeight: typography.bodyLarge.lineHeight,
+    },
+    rightCol: {
+      alignItems: 'flex-end',
+      gap: spacing.xsmall,
+    },
+    row: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: spacing.medium,
+    },
+    secondaryText: {
+      color: colors.textSecondary,
+      fontFamily: typography.bodySmall.fontFamily,
+      fontSize: typography.bodySmall.fontSize,
+      fontWeight: typography.bodySmall.fontWeight as TextStyle['fontWeight'],
+      letterSpacing: typography.bodySmall.letterSpacing,
+      lineHeight: typography.bodySmall.lineHeight,
+    },
+    tile: {
+      backgroundColor: colors.background,
+      borderColor: colors.primary,
+      borderRadius: radii.medium,
+      borderWidth: borders.strong,
+      gap: spacing.medium,
+      padding: spacing.medium,
+    },
+  });
+  /* eslint-enable react-native/no-unused-styles */
+}
+
+export type { VaultedPaymentMethodItem };

package/src/Components/analytics.ts

@@ -0,0 +1,19 @@
+import RNPrimer from '../RNPrimer';
+
+export const PrimerAnalytics = {
+  setup: (clientToken: string): Promise<void> => {
+    return RNPrimer.setupAnalyticsLoggingBridge(clientToken);
+  },
+
+  trackEvent: (eventName: string, metadata?: Record<string, string>): Promise<void> => {
+    return RNPrimer.trackAnalyticsEvent(eventName, metadata ? JSON.stringify(metadata) : undefined);
+  },
+
+  sendLog: (message: string, event: string, initDurationMs?: number): Promise<void> => {
+    return RNPrimer.sendLog(message, event, initDurationMs);
+  },
+
+  sendErrorLog: (message: string, event?: string, errorMessage?: string, stack?: string): Promise<void> => {
+    return RNPrimer.sendErrorLog(message, event, errorMessage, stack);
+  },
+};

package/src/Components/hooks/useCardNetworkDescriptor.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+import { DEFAULT_DESCRIPTOR, fetchCardNetworkDescriptor } from '../internal/cardNetwork';
+import type { CardNetworkDescriptor } from '../internal/cardNetwork';
+
+/**
+ * Resolves the network descriptor (CVV length/label, gap pattern, PAN lengths) for a
+ * known network identifier (e.g. `'AMEX'`, `'VISA'`). Returns `DEFAULT_DESCRIPTOR`
+ * while loading or when the network is null/unknown.
+ */
+export function useCardNetworkDescriptor(network: string | null | undefined): CardNetworkDescriptor {
+  const [descriptor, setDescriptor] = useState<CardNetworkDescriptor>(DEFAULT_DESCRIPTOR);
+
+  useEffect(() => {
+    setDescriptor(DEFAULT_DESCRIPTOR);
+    if (!network) return;
+    let cancelled = false;
+    void fetchCardNetworkDescriptor(network).then((d) => {
+      if (!cancelled) setDescriptor(d);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [network]);
+
+  return descriptor;
+}

package/src/Components/hooks/useCardNetworkIcons.ts

@@ -0,0 +1,57 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getCardNetworkIconURL } from '../internal/cardNetworkIcons';
+import { getNetworkAbbreviation, type CardNetworkId } from '../internal/cardNetwork';
+
+export interface CardNetworkIconState {
+  /**
+   * Upper-cased network id (`"VISA"`, `"AMEX"`, …). Native can report ids outside the
+   * known union, so we allow any string while keeping autocomplete for known ids.
+   */
+  network: CardNetworkId | (string & {});
+  /** Resolved image URI, or `null` while loading or when the fetch failed. */
+  iconUri: string | null;
+  /** Two-letter fallback (`"VI"`, `"AM"`, …) for chips without an icon. */
+  abbreviation: string;
+}
+
+/**
+ * Batch-resolves icon URIs for an ordered list of card networks. Preserves input order,
+ * dedupes case-insensitively, and shares the module-level promise cache with
+ * `usePrimerCardNetwork`, so an icon fetched once anywhere on the page is reused everywhere.
+ */
+export function useCardNetworkIcons(networks: string[]): CardNetworkIconState[] {
+  const key = useMemo(() => [...new Set(networks.map((n) => n.toUpperCase()))].join('|'), [networks]);
+  const upperNetworks = useMemo(() => key.split('|').filter(Boolean), [key]);
+
+  const [iconUris, setIconUris] = useState<Record<string, string | null>>({});
+
+  useEffect(() => {
+    let cancelled = false;
+    upperNetworks.forEach((network) => {
+      getCardNetworkIconURL(network)
+        .then((uri) => {
+          if (!cancelled) {
+            setIconUris((prev) => (prev[network] === uri ? prev : { ...prev, [network]: uri }));
+          }
+        })
+        .catch(() => {
+          if (!cancelled) {
+            setIconUris((prev) => (network in prev ? prev : { ...prev, [network]: null }));
+          }
+        });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, upperNetworks]);
+
+  return useMemo(
+    () =>
+      upperNetworks.map((network) => ({
+        network,
+        iconUri: iconUris[network] ?? null,
+        abbreviation: getNetworkAbbreviation(network),
+      })),
+    [upperNetworks, iconUris]
+  );
+}

package/src/Components/hooks/usePrimerBillingAddressForm.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react';
+import { useBillingAddressFormStateContext } from '../internal/form-state/BillingAddressFormStateProvider';
+import type {
+  UsePrimerBillingAddressFormOptions,
+  UsePrimerBillingAddressFormReturn,
+} from '../types/BillingAddressFormTypes';
+
+/**
+ * Billing-address form adapter hook. Thin wrapper over
+ * `BillingAddressFormStateProvider` — the provider owns the field state,
+ * touched map, and debouncer. This hook reads the shared state and wires the
+ * per-caller `onValidationChange` callback.
+ *
+ * Must be used inside a `<PrimerCheckoutProvider>` tree that also mounts
+ * `<BillingAddressFormStateProvider>` (the drop-in `CheckoutFlow` does this
+ * for you).
+ */
+export function usePrimerBillingAddressForm(
+  options: UsePrimerBillingAddressFormOptions = {}
+): UsePrimerBillingAddressFormReturn {
+  const state = useBillingAddressFormStateContext();
+  if (!state) {
+    throw new Error(
+      'usePrimerBillingAddressForm must be used within a <BillingAddressFormStateProvider>. ' +
+        'The built-in <PrimerCheckoutSheet>/<CheckoutFlow> wires this automatically.'
+    );
+  }
+
+  const onValidationChangeRef = useRef(options.onValidationChange);
+  onValidationChangeRef.current = options.onValidationChange;
+
+  useEffect(() => {
+    onValidationChangeRef.current?.(state.isValid, state.errors);
+  }, [state.isValid, state.errors]);
+
+  return state;
+}

package/src/Components/hooks/usePrimerCardForm.ts

@@ -0,0 +1,50 @@
+import { useEffect, useRef } from 'react';
+import { useCardFormStateContext } from '../internal/form-state/CardFormStateProvider';
+import { usePrimerCheckout } from './usePrimerCheckout';
+import type { UseCardFormOptions, UsePrimerCardFormReturn } from '../types/CardFormTypes';
+
+/**
+ * Card form adapter hook. Thin wrapper over `PrimerCardFormProvider` — the
+ * provider owns the field state, focus tracking, debouncer, and submit lifecycle.
+ * This hook reads the shared state and wires per-caller option callbacks
+ * (`onValidationChange`, `onBinDataChange`, `onMetadataChange`).
+ *
+ * Must be used inside a `<PrimerCheckoutProvider>` tree that also mounts
+ * `<PrimerCardFormProvider>` (the drop-in `CheckoutFlow` does this for you).
+ */
+export function usePrimerCardForm(options: UseCardFormOptions = {}): UsePrimerCardFormReturn {
+  const state = useCardFormStateContext();
+  if (!state) {
+    throw new Error(
+      'usePrimerCardForm must be used within a <PrimerCardFormProvider>. ' +
+        'The built-in <PrimerCheckoutSheet>/<CheckoutFlow> wires this automatically.'
+    );
+  }
+
+  const { cardFormState } = usePrimerCheckout();
+
+  const onValidationChangeRef = useRef(options.onValidationChange);
+  onValidationChangeRef.current = options.onValidationChange;
+  const onBinDataChangeRef = useRef(options.onBinDataChange);
+  onBinDataChangeRef.current = options.onBinDataChange;
+  const onMetadataChangeRef = useRef(options.onMetadataChange);
+  onMetadataChangeRef.current = options.onMetadataChange;
+
+  useEffect(() => {
+    onValidationChangeRef.current?.(state.isValid, state.errors);
+  }, [state.isValid, state.errors]);
+
+  useEffect(() => {
+    if (state.binData) {
+      onBinDataChangeRef.current?.(state.binData);
+    }
+  }, [state.binData]);
+
+  useEffect(() => {
+    if (cardFormState.metadata) {
+      onMetadataChangeRef.current?.(cardFormState.metadata);
+    }
+  }, [cardFormState.metadata]);
+
+  return state;
+}

package/src/Components/hooks/usePrimerCardNetwork.ts

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react';
+import { usePrimerCheckout } from './usePrimerCheckout';
+import { DEFAULT_DESCRIPTOR, fetchCardNetworkDescriptor } from '../internal/cardNetwork';
+import { getCardNetworkIconURL } from '../internal/cardNetworkIcons';
+import type { CardNetworkDescriptor, CardNetworkIconSource } from '../internal/cardNetwork';
+
+const LOG = '[usePrimerCardNetwork]';
+
+export interface UseCardNetworkReturn {
+  /** Raw network identifier as reported by native (`"VISA"`, `"AMEX"`, ...), or `null` before BIN detection. */
+  network: string | null;
+  /**
+   * Traits for the detected network, resolved asynchronously from the native SDK.
+   * Starts as `DEFAULT_DESCRIPTOR` on mount / network-change and upgrades when the
+   * native call returns. Stays as `DEFAULT_DESCRIPTOR` for unknown networks or when
+   * the native call fails.
+   */
+  descriptor: CardNetworkDescriptor;
+  /** `{ uri }` source for `<Image />`, or `null` while loading or when unknown. */
+  iconSource: CardNetworkIconSource;
+}
+
+/**
+ * Reads the detected card network from the provider's BIN data and resolves the
+ * matching traits + icon from the native SDK. Traits drive per-network input
+ * formatting (gaps), max length, and the CVV label; icon is a separate fetch.
+ */
+export function usePrimerCardNetwork(): UseCardNetworkReturn {
+  const { cardFormState } = usePrimerCheckout();
+  const network = cardFormState.binData?.preferred?.network ?? null;
+
+  const [descriptor, setDescriptor] = useState<CardNetworkDescriptor>(DEFAULT_DESCRIPTOR);
+  const [iconUri, setIconUri] = useState<string | null>(null);
+
+  useEffect(() => {
+    console.log(`${LOG} network change ${JSON.stringify({ network })}`);
+    setDescriptor(DEFAULT_DESCRIPTOR);
+    if (!network) return;
+    let cancelled = false;
+    void fetchCardNetworkDescriptor(network).then((d) => {
+      if (cancelled) return;
+      console.log(`${LOG} descriptor resolved ${JSON.stringify({ network, id: d.id })}`);
+      setDescriptor(d);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [network]);
+
+  useEffect(() => {
+    // Guard on the raw network string, not descriptor.id. Networks like Cartes Bancaires,
+    // Bancontact, and EFTPOS have icons but no validation traits on iOS — their descriptor
+    // collapses to DEFAULT (id: 'OTHER'), but the raw network string is still the real
+    // network name and the icon asset exists.
+    setIconUri(null);
+    if (!network || network.toUpperCase() === 'OTHER') return;
+    let cancelled = false;
+    getCardNetworkIconURL(network)
+      .then((uri) => {
+        console.log(`${LOG} icon resolved ${JSON.stringify({ network, uri })}`);
+        if (!cancelled) setIconUri(uri);
+      })
+      .catch((err) => {
+        console.warn(`${LOG} icon fetch failed ${network}: ${String(err)}`);
+        if (!cancelled) setIconUri(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [network]);
+
+  const iconSource: CardNetworkIconSource = iconUri ? { uri: iconUri } : null;
+  return { network, descriptor, iconSource };
+}